prototype 扩展:实现对象继承

prototype 作用

我们可以为new创建的实例对象动态添加成员变量,而无需在函数对象中定义所有的属性和方法。如下代码:

function animal(){
    
}
 
animal.prototype.name = "animal";
animal.prototype.move = function(){
    alert("i can move");
}
 
var animalObj = new animal();
alert(animalObj.name);
animalObj.move();

new 过程中对 prototype 对象的操作

一个函数对象被new实例化成为实例对象时,可以分解为以下三步(用上面的animal对象作为例子):

第一步:定义animalObj = {};
第二步:animalObj .__proto__ = animal.prototype;
第三步:animal.call(animalObj );

这里需要解释一下__proto__,每个对象都在其内部初始化一个属性,就是__proto__。当访问一个对象属性时,如果内部不存在,就会去__proto__里找,__proto__又会有自己的__proto__,于是一直找下去,这就是原型链的概念。

当访问animalObj的name和move属性时,animalObj并没有这些属性,就会去__proto__中找,在第二步中,__proto__指向了animal.prototype,所以animal.prototype定义了name和move属性,所以就可以访问这些属性。那么到底怎么验证我们对于__proto__的结论呢?

按照标准__proto__不对外公开,是个私有属性,但chrome的引擎将其暴露出来成一个共有的属性,可对外访问和设置,IE不能直接访问,如下:

alert(animalObj.__proto__ === animal.prototype);

总结:当一个函数对象被被new为一个实例对象时,函数对象的prototype对象中的属性并没有直接成为实例对象的成员属性,而是成为实例对象的__proto__对象中的属性,而函数对象中的成员(需要使用this关键字)会被改变引用直接成为实例对象的成员属性。

prototype扩展:实现JavaScript对象的继承

上面说到,当访问一个对象的成员属性时,如果对象本身没有该属性时,会去它的__proto__对象中找,如果找不到,继续找__proto__的__proto__对象中的属性,一直往下找。可以利用这一特性,实现类似于java中的继承,如下代码:

// 动物"类"(构造函数)
function animal(){
 
}
 
animal.prototype.name = "animal";
animal.prototype.move = function(){
 
   alert("i can move");
}
 
// 定义一个cat对象,继承animal中的成员
function cat(){
 
}
 
//prototype实现继承
cat.prototype = new animal();
 
// 为cat.prototype增加成员
cat.prototype.detail = "I am a cat , I am also an animal";
 
// cat的实例对象,访问成员属性
var c = new cat();
alert(c.detail);
alert(c.name);
c.move();

代码分析如下所示:

1、var a = new animal(); 得出a.__proto__ = animal.prototype
2、cat.prototype = a,cat.prototype.__proto__ = a.__proto__
3、var c = new cat(); 得出c.__proto__ = cat.prototype,所以c.__proto__.__proto__ = animal.prototype;

所以,当访问c的detail时,本身找不到该属性,会找__proto__(即cat.prototype)中是否有该属性,找到了该属性,同理,访问name和move属性时,会继续往下遍历__proto__中是否有该属性。

这也就是原型链的实现原理。本质上prototype只是一个假象,在实现原型链中只起到辅助作用,只是在new的时候有价值,原型链的本质,其实在于__proto__