技术控

    今日:162| 主题:49347
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] 浅谈 OOP JavaScript [3] -- 原型

[复制链接]
咬字拆开念 发表于 2016-11-28 16:31:55
46 3

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
上一章我们谈了构造函数,他的唯一特点就是比较了地址不相同,因为大家知道引用类型是比较的引用。我们来谈谈 原型。
  原型
   我们每创建一个函数都有一个原型(prototype)属性,这个属性是一个对象,他的特点是 共享 。也就是说不用在构造函数中定义对象实例,而是直接将这些添加到原型当中。
  [code]function Create () {}    //声明一个构造函数
Create.prototype.a = 'abc';    //在原型中添加属性
Create.prototype.b = 10;
Create.prototype.c = function () {    //在原型中添加方法
    return this.a + this.b;
};
var create = new Create();   
alert(create.c());    //返回abc10[/code]  我们这次再来比较一下原型中方法的地址是否一致:
  [code]var create = new Create();
var create1 = new Create();
alert(create.c == create1.c);    //true[/code]     是不是还没明白?我们用一张图来告诉大家:
   
浅谈 OOP JavaScript [3] -- 原型-1 (javascript,oop,javascript,oop编程,javascript,原型链,javascript,原型)
    这个__proto__就相当于指针,指向了原型对象的constructor,而constructor就相当于将构造函数对象和原型对象相关联。
   那么我们要用构造函数对象去给重写 属性或者方法 会怎么样呢?
  [code]var create = new Create();
create.a = 'EFD';
alert(create.a);    //返回EFD[/code]   真的将原型对象里面的 a 给覆盖了么?并没有:
  [code]var create1 = new Create();
alert(create.a);    //返回abc[/code]  原型模式的执行过程:
  1.先去查找构造函数里面的属性和方法 ,如果有就立即返回。
  2.如果构造函数实例里面没有,就去原型里面查找,如果有就立即返回。
  因为我们在构造函数添加了属性,所以它会自动去查找,构造函数里面的属性也就立即返回了!
  原型的字面量
  在原型中,我们也可以使用字面量的方式去创建,可以让属性和方法体现出更好的封装效果。
  [code]function Create(a,b){};    //声明一个构造函数
Create.prototype = {    //字面量方式
    a:'abc',
    b:10,
    c:function () {
        return this.a + this.b;
    }
};[/code]  不知道大家有没有发现,我们用字面量的方式是这样的:Create.prototype ={};
  大家都知道,用一个{}就等同于new Create();这样,我们就相当于新声明的一个对象,我们原型对象里面的constructor还会指向Create么?
  [code]var create = new Create();
alert(create.constructor == Create);    //false
alert(create.constructor == Object);    //true[/code]  (我们来解释一下为什么用create.constructor,因为我们打印constructor就会将整个构造函数打印出来,因为上面讲过它是将构造函数对象和原型对象相关联的属性。)
  通过上面的例子可以看出,它已经指向了新的实例对象。
  constructor的巧妙用法:
  我们可以使用constructor来强制指回原来的实例对象:
  [code]function Create(a,b){};
Create.prototype = {
    constructor:Create,
    a:'abc',
    b:10,
    c:function () {
        return this.a + this.b;
    }
};[/code]  原型对象的重写问题:
  大家都知道,构造函数的属性和方法重写是无伤大雅的,但是原型对象中可以重写么?
  [code]function Create(a,b){};
Create.prototype = {
    constructor:Create,
    a:'abc',
    b:10,
    c:function () {
        return this.a + this.b;
    }
};

Create.prototype = {
    a:'EFD',
};
var create = new Create();
alert(create.c());    //create.c is not a function[/code]  不难看出,我们重写了原型会将之前的原型指向切断!!!
  原型模式的缺点:
   其实它的缺点也是它优点: 共享
  我们在字面量里面给原型对象添加一个数组就很容易的看出来了:
  [code]function Create(a,b){};
Create.prototype = {
    constructor:Create,
    a:'abc',
    b:10,
    c:[第一个,第二个,第三个],
    d:function () {
        return this.a + this.b + this.c;
    }
};
var create = new Create();
create.c.push('第四个');
alert(create.run());    //返回abc10第一个第二个第三个第四个[/code]  我们看得出这时候push添加已经生效了,在数组的末尾添加了“第四个”
  我们再来实例一个对象就能看得出他的共享问题了:
  [code]var create1 = new Create();
alert(create1.run());    //返回abc10第一个第二个第三个第四个[/code]  这就是共享问题。下面新实例化一个对象也会将上面添加的字符串给共享到这里来。
   这一章就到这里。 欢迎所有阅读文章的人指正错误!
  Brian Lee
友荐云推荐




上一篇:百度输入法在启动速度、智能手写、语音输入上所做的技术优化 ...
下一篇:Nodejs之npm&package.json
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

276317703 发表于 2016-11-29 01:02:17
276317703留下了印记
回复 支持 反对

使用道具 举报

stolpedopeah 发表于 5 天前
非常好,顶一下
回复 支持 反对

使用道具 举报

锄禾 发表于 5 天前
打酱油的人拉,回复下赚取积分
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表