在这个看脸的世界,该如何优雅的创建JS对象

Javascript是一门解释型的语言,是基于对象的,严格来说并不怎么符合的面向对象的标准,显著的特点就是函数就是“一等对象”,与传统的面向对象语言不同的时,Javascript有“一千种”方法来创建对象,(尽管猿们找个对象的方法基本为零)。《Js高程》为我们讲解了多种创建对象的方法,这些方法之间并没有优劣,只要在具体的环境下选择合适的方法即可。

1.对象字面量

  1. var mygirl={
  2. name:"js",
  3. age:"24",
  4. shopping:function(){
  5. console.log("give me money!")
  6. }
  7. }

小结:大括号里的键值对,只能创建一个特定的单例对象

2. Object构造函数

  1. var mygirl=new Object();
  2. mygirl.name="js";
  3. mygirl.age=24;
  4. mygirl.shopping=function(){
  5. console.log("give me money!")
  6. }

小结:ES5新方法构建对象,再添加属性,还有一种常用的更简洁的方法

  1. var mygirl={};
  2. mygirl.name="js";
  3. mygirl.age=24;
  4. mygirl.shopping=function(){
  5. console.log("give me money!")
  6. }

3.工厂模式创建对象

  1. function createMygirl(name, age)
  2. {
  3. var o = new Object();
  4. o.name=name;
  5. o.age=24;
  6. o.shopping=function()
  7. {
  8. console.log("give me money!")
  9. };
  10. return o;
  11. }
  12. var mygirl=createMygirl("JS",24);

小结:函数 createMygirl() 能够根据接受的参数来构建一个包含所有必要信息的对象。可以无

数次地调用这个函数,而每次它都会返回一个包含两个属性一个方法的对象。

特点:可以创建多个相似对象的问题,但却没有解决对象识别的问题(即怎样知道一个对象的类型)。

4.自定义构造函数模式创建对象

  1. function Girl(name, age)
  2. {
  3. this.name=name;
  4. this.age=24;
  5. this.shopping=function()
  6. {
  7. console.log("give me money!")
  8. };
  9. }
  10. var mygirl=new Girl("JS",24);
  11. var yourgirl=new Girl("HTML",23);

要创建 Girl 的新实例,必须使用 new 操作符。以这种方式调用构造函数实际上会经历以下 4个步骤:

  • (1) 创建一个新对象;
  • (2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象);
  • (3) 执行构造函数中的代码(为这个新对象添加属性);
  • (4) 返回新对象。

特点:实例上的同名函数不能共享,即

  1. alert(mygirl.shopping == yourgirl.shopping); //false

5. 使用原型模式创建对象

  1. function Girl(){
  2. }
  3. Girl.prototype.name="JS";
  4. Girl.prototype.age=24;
  5. Girl.prototype.friends=["girl1","girl2"];
  6. Girl.prototype.shopping=function()
  7. {
  8. console.log("走起,闺蜜们"+this.friends);
  9. //叫上闺蜜一起败家
  10. };
  11. var mygirl=new Girl();
  12. mygirl.friends.push("girl3");
  13. mygirl.shopping();//走起,闺蜜们girl1,girl2,girl3
  14. var yourgirl=new Girl();
  15. yourgirl.shopping();//走起,闺蜜们girl1,girl2,girl3

特点:原型中所有属性是被所有实例共享的,这种共享对于函数非常合适,但是对于基本属性就显得不是很合适,尤其是对于包含引用类型值的属性来说,问题就比较突出了。所有实例共享属性,如firends,这样mygirl添加的闺蜜,也会变成yourgirl的闺蜜。

6. 组合使用原型模式和构造函数创建对象(my beauty)

  1. function Girl(name, age)
  2. {
  3. this.name=name;
  4. this.age=24;
  5. this.friends=["girl1","girl2"];
  6. }
  7. Girl.prototype.shopping=function()
  8. {
  9. console.log("走起,闺蜜们"+this.friends);
  10. //叫上闺蜜一起败家
  11. };
  12. var mygirl=new Girl("JS",24);
  13. var yourgirl=new Girl("HTML",25);
  14. mygirl.friends.push("girl3");
  15. console.log(mygirl.friends);//[ ‘girl1‘, ‘girl2‘, ‘girl3‘ ]
  16. console.log(yourgirl.friends);//[ ‘girl1‘, ‘girl2‘ ]
  17. console.log(mygirl.friends===yourgirl.friends);//false
  18. console.log(mygirl.shopping===yourgirl.shopping);//true

特点:创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方法的引用,最大限度地节省了内存。另外,这种混成模式还支持向构造函数传递参数;可谓是集两种模式之长。

7.动态原型模式

  1. function Girl(name, age)
  2. {
  3. this.name=name;
  4. this.age=24;
  5. if (typeof this.sayName!="function") {
  6. Girl.prototype.shopping = function() {
  7. console.log("give me money!")
  8. };
  9. }
  10. }
  11. var mygirl=new Girl("JS",24);
  12. mygirl.shopping();

特点:动态原型模式把所有信息都封装在了构造函数中,而通过在构造函数中初始化原型(仅在必要的情况下),又保持了同时使用构造函数和原型的优点。换句话说,可以通过检查某个应该存在的方法是否有效,来决定是否需要初始化原型。

8.寄生构造函数模式

  1. function Girl(name, age)
  2. {
  3. var o = new Object();
  4. o.name=name;
  5. o.age=age;
  6. o.shopping=function()
  7. {
  8. console.log("give me money!")
  9. };
  10. return o;
  11. }
  12. var mygirl=new Girl("kevin",24);

这个模式可以在特殊的情况下用来为对象创建构造函数。假设我们想创建一个具有额外方法的特殊数组。由于不能直接修改 Array 构造函数,因此可以使用这个模式。

  1. function SpecialArray(){
  2. //创建数组
  3. var values = new Array();
  4. //添加值
  5. values.push.apply(values, arguments);
  6. //添加方法
  7. values.toPipedString = function(){
  8. return this.join("|");
  9. };
  10. //返回数组
  11. return values;
  12. }
  13. var colors = new SpecialArray("red", "blue", "green")
  14. alert(colors.toPipedString()); //"red|blue|green"

9.稳妥构造函数模式

  1. function Girl(name, age,bestfriend)
  2. {
  3. //可以在这里定义私有变量和函数
  4. var o = new Object();
  5. o.name=name;
  6. o.age=age;
  7. o.bestfriend=["girl1","girl2"];
  8. o.shopping=function()
  9. {
  10. console.log("走起,闺蜜们"+this.friends);
  11. //叫上闺蜜一起败家
  12. };
  13. return o;
  14. }
  15. var mygirl=Girl("kevin",24);

特点:一是新创建对象的实例方法不引用 this;二是不使用 new 操作符调用构造函数。在以这种模式创建的对象中, 除了使用 shopping() 方法之外,没有其他办法访问 bestfriend 的值(闭包)。

来自为知笔记(Wiz)

时间: 2024-11-01 00:35:12

在这个看脸的世界,该如何优雅的创建JS对象的相关文章

Android好奇宝宝_番外篇_看脸的世界_02

一个有吃豆人删除动画的ListView 这是一个无聊的效果,由一个无聊的程序猿,在无聊的情况下写的. 虽然这效果不中看中用,不过就当学习了. 先上图 效果一目了然,主要是: (1)移除item时执行吃豆人动画 (2)滚动时吃豆人也相应移动 (3)应对可见与不可见状态间的切换 简单原理分析: (1)吃豆人.豆.和左边的白色矩形(当然所有颜色都是可以改的,你想换成图片也行)都是用canvas画出来的. (2)问:canvas那里来的?答:ListView的canvas.具体是重写ListView的这

Android好奇宝宝_番外篇_看脸的世界_06

简单实现波纹效果 其实这一篇的效果实现很简单,写这篇博客重点是为了说另一件事,剧透一下:有关内存泄露的. 先说下效果的实现: 原理: 原理只有一个,就是Shader的使用.Shader我看别人翻译成着色器,其实它的作用就是为画笔增加颜色的渐变,画笔默认是一个颜色画到底,但是使用Shader可以实现从一个颜色渐变到另一个颜色. 想了解更多关于Shader的姿势,推荐博客:传送门 有了Shader,就能很简单的画出波纹的效果了,至于动画效果,只是动态改变画的大小而已. 高清源码: (1)初始化 重写

Android好奇宝宝_番外篇_看脸的世界_05

上一篇番外篇讲了一个炒鸡炒鸡简单的自定义ProgressBar,这一篇基于上一篇的基础扩展为SeekBar,没看过上一篇的,请先看一遍:传送门 先上效果图(2G内存的机子运行模拟器,所以有点卡): 这个效果之前不知道在哪里看到过,我也忘了. 下面进入正题: 测量大小和绘制部分沿用上一篇ProgressBar的,不清楚的请走上面的传送门. 对比上一篇的扩展: (1)SeekBar能通过触摸改变刻度 (2)SeekBar上方添加一个显示当前刻度的浮动View(后面用FloatView表示) (1)通

Android好奇宝宝_番外篇_看脸的世界_03

无聊刷帖看到一个求助,试着写了一下. 一个自定义Switch控件,附带动画效果. 说是控件,其实是一个布局容器,先上效果图: 先讲原理,再看高清源码. 原理: 好像没啥原理,汗... 跟其它自定义容器控件一样,一般要注意: (1)计算好大小,宽度和高度 (2)计算好子View的布局位置 不是一般要注意的: (3)动画是用的nineoldandroids (4)遮挡效果是通过控制子View的绘制顺序 高清源码: (1)计算大小: protected void onMeasure(int width

Android好奇宝宝_番外篇_看脸的世界_04

这一篇是记录一下本猿自定义View的一般思路,通过一个炒鸡简单的自定义ProgressBar讲解一些自定义View的基础知识.适合新手,高手勿喷,有好的指点和想法的欢迎评论. (1)确认需求 写一个自定义View,首先你要确定需求是什么.一般包括外观,事件处理,动画效果. 外观需求:ProgressBar的外观需求非常简单,就是两个矩形(当然也可以是其它形状,这里我们只实现基础的矩形)重叠显示.其中一个固定大小的当背景,一个可变宽度的来显示刻度. 事件处理:ProgressBar不是SeekBa

Android好奇宝宝_番外篇_看脸的世界_07

废话少说,先上图: (请看底部的4个点) 忘记是在那个APP上看到ViewPager底部的圆点指示器可以随着滚动而滚动的效果,便开始思考要怎么实现,最终发现效果实现很简单,拿来练手自定义View挺不错的. 写码之前: 写代码之前必须至少先有大概的思路,而且不要想到一点就开始写,必须对整体都大概心里有数再开始写.比如在实现这个效果时,刚开始我是想着重写线性布局,然后动态添加圆点,通过margin控制间隔.但是我发现这种办法在滚动时的处理逻辑编写起来比较复杂,既然只是几个圆点而已,直接继承View用

Android好奇宝宝_番外篇_看脸的世界_08

废话少说,先上效果图: (左侧的图片是我用window画图软件1分钟画的,所以就不要嫌丑了,You can you up no bb.) 这是我发过最挫的效果图了,不过这是由于没有图片素材导致的,就不要在意这些细节了,知道实现原理后完全可以发挥你的想象去实现更美观的效果. 这个效果也是有开源库的,不过我又把名字给忘了,不过我记得原理,于是就试着自己写了一下. 其实原理很简单,我在另一篇博客(一个有吃豆人删除动画的ListView)也说过了,这一篇当做兑换那些年少轻狂不更事时许下的诺言(是不是瞬间

这是一个看脸的时代,但最终拼的还是实力

1300多年前,传说唐太宗得到一匹烈马,武媚勇敢地提出驯马要求,说:只要给我三样东西,就能降服这马.一支皮鞭,一柄铁锤.一把锋利的刀子.先用皮鞭打它.还不听话,就用铁锤敲它的脑袋,如果仍不能制服它,就干脆用刀子割断它的喉咙. 1300多年后,女星范冰冰接受采访,被问到嫁入豪门的问题时,说:我不需要嫁入豪门,我自己就是豪门. 2014年,范冰冰挑战14岁到80岁的女皇武则天.她扮演的,是一位将美貌与权力相互成就并达到巅峰位置的女人,这个角色身上,没有落难灰姑娘遇到王子搭救的爱情传说,有的只是每个毛

计算机如何“看”我们的世界

计算机如何“看”我们的世界 计算机虽然有了人工智能的程序支持,但事实上也不能将其机器学习的功能等同于像人类那样.至少,到目前还不是这样.那么,向Google的图片识别或者Facebook的M应用等一类系统,它们是怎么能够理解自然语言或视觉的呢? 下面,是人工智能系统Josh的自我独白: 简而言之,我们将单词和短语的含义以数字的形式储存在计算机上.目前,市场上有许多这类产品,比如将单词转换成向量形式的工具word2vec,该工具使用浅人工神经网络来计算文字嵌入.此外也有一些诸如记忆网络的技术,能够