浅谈 OOP JavaScript [3] -- 原型

上一章我们谈了组织函数,他的唯一特性就是比较了地点不相同,由于人人晓得援用范例是比较的援用。我们来谈谈原型。

原型

我们每建立一个函数都有一个原型(prototype)属性,这个属性是一个对象,他的特性是同享。也就是说不用在组织函数中定义对象实例,而是直接将这些增加到原型当中。

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

我们此次再来比较一下原型中要领的地点是不是一致:

var create = new Create();
var create1 = new Create();
alert(create.c == create1.c);    //true

是不是是还没邃晓?我们用一张图来通知人人:
《浅谈 OOP JavaScript [3] -- 原型》

这个__proto__就相当于指针,指向了原型对象的constructor,而constructor就相当于将组织函数对象和原型对象相关联。
那末我们要用组织函数对象去给重写属性或许要领会怎样呢?

var create = new Create();
create.a = 'EFD';
alert(create.a);    //返回EFD

真的将原型对象内里的a给覆蓋了么?并没有:

var create1 = new Create();
alert(create.a);    //返回abc

原型形式的实行历程:

1.先去查找组织函数内里的属性和要领 ,假如有就马上返回。

2.假如组织函数实例内里没有,就去原型内里查找,假如有就马上返回。

由于我们在组织函数增加了属性,所以它会自动去查找,组织函数内里的属性也就马上返回了!

原型的字面量

在原型中,我们也能够运用字面量的体式格局去建立,能够让属性和要领体现出更好的封装结果。

function Create(a,b){};    //声明一个组织函数
Create.prototype = {    //字面量体式格局
    a:'abc',
    b:10,
    c:function () {
        return this.a + this.b;
    }
};

不晓得人人有无发明,我们用字面量的体式格局是如许的:Create.prototype ={};
人人都晓得,用一个{}就等同于new Create();如许,我们就相当于新声明的一个对象,我们原型对象内里的constructor还会指向Create么?

var create = new Create();
alert(create.constructor == Create);    //false
alert(create.constructor == Object);    //true

(我们来解释一下为什么用create.constructor,由于我们打印constructor就会将全部组织函数打印出来,由于上面讲过它是将组织函数对象和原型对象相关联的属性。)
经由过程上面的例子能够看出,它已指向了新的实例对象。

constructor的奇妙用法:

我们能够运用constructor来强迫指回本来的实例对象:

function Create(a,b){};
Create.prototype = {
    constructor:Create,
    a:'abc',
    b:10,
    c:function () {
        return this.a + this.b;
    }
};

原型对象的重写题目:

人人都晓得,组织函数的属性和要领重写是无伤大雅的,然则原型对象中能够重写么?

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

不难看出,我们重写了原型会将之前的原型指向割断!!!

原型形式的瑕玷:

实在它的瑕玷也是它长处:同享
我们在字面量内里给原型对象增加一个数组就很轻易的看出来了:

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第一个第二个第三个第四个

我们看得出这时候push增加已见效了,在数组的末端增加了“第四个”

我们再来实例一个对象就可以看得出他的同享题目了:

var create1 = new Create();
alert(create1.run());    //返回abc10第一个第二个第三个第四个

这就是同享题目。下面新实例化一个对象也会将上面增加的字符串给同享到这里来。
这一章就到这里。迎接一切阅读文章的人斧正毛病!

Brian Lee

    原文作者:Brian_Lee
    原文地址: https://segmentfault.com/a/1190000007623594
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞