第20篇 js高级知识---深入原型链

时间:2021-01-03 03:34:06

前面把js作用域和词法分析都说了下,今天把原型链说下,写这个文章费了点时间,因为这个东西有点抽象,想用语言表达出来不是很容易,我想写的文章不是简单的是官方的API的copy,而是对自己的知识探索和总结的过程,以及在这个过程碰到的问题都一一写出来,我想大多数人应该也有这个疑惑,然后带着疑惑去找答案,当你把这个疑惑解决之后,才觉得很有成就感。下面不多说了,开始说说什么是原型链。要想了解原型链,还是要从简单的开始,什么是原型?首先看下代码:

function funcA() {
    this.show = function() {}
}
console.log(funcA.prototype);

第20篇  js高级知识---深入原型链

由这个图可以看出funcA的原型是一个对象,他的名字也是funcA,有一个constructor属性指向funcA,同时有一个__proto__指向Object.prototype(这个是怎么得到?可以看下上面的__proto__下面的constructor属性指向是Object,说明他是Object的原型).funcA原型大概写成:

funcA.prototype={

constructor:funcA,

__proto__:Object.prototype

}

PS:这里的__proto__从哪里冒出来的?在js中,每个对象都有一个名为__proto__的内部隐藏属性,指向于它所对应的原型对象(chrome、firefox中名称为__proto__,并且可以被访问到),而普通的对象没有prototype属性,只有__proto__属性。由上面的结果可以得到下面的这张图

第20篇  js高级知识---深入原型链

现在我们对原型有了一个大概的了解,反正他就是这么一个对象,有几个不同寻常的属性,继续深入,当我们利用funcA创建对象的时候,这个又会发生什么?

function funcA() {
    this.show = function() {}
}
console.log(funcA.prototype);
var a = new funcA();
console.log(a);
console.log(a.__proto__);
console.log(a.__proto__ === funcA.prototype);
console.log(a.__proto__.constructor === funcA);

运行结果如下:

第20篇  js高级知识---深入原型链

对上面的这个结果进行分析,a是funcA创建出来的对象,他有funcA里面的方法,同时他也有一个__proto__,可以用代码表示成:

var a={

show:function(){..…},

__proto__:funcA.prototype

}

同理,我们可以得到下面这张图:

第20篇  js高级知识---深入原型链

总结下上面的过程,从表象上看,funcA在创建对象的时候,这个对象a,把funcA里面的方法“复制过来”,然后产生了一个__proto__属性指向它的原型。

其实new创建对象,分为三步


创建了一个空对象a={};

2、
将这个空对象的__proto__成员指向了funcA函数对象prototype成员对象

3、将funcA函数对象的this指针替换成a,然后再调用funcA函数,于是我们就给a对象赋值了一个新
的方法成员。

具体的实现代码可以表示如下:

var a ={};
a.__proto__=funcA.prototype;
funcA.call(a);

下面我们用代码来验证:
function funcA() {
    this.show = function() {}
}
console.log(funcA.prototype);

var b=new funcA();//new 来构建

var a ={};//define 手动定义
a.__proto__=funcA.prototype;
funcA.call(a);
console.log(a);
console.log(b);

实现结果如下 ,可以看到a和b的内部方法完全一个,唯一的区别是a来自于Object的prototype,b来自于funcA的prototype(导致输出的名字是不一样)。

第20篇  js高级知识---深入原型链

现在这个可以对上面的几个过程做一个总结,什么是原型? Js所有的函数都有一个prototype,其实质就是对一个对象的引用,称之为原型(还是有点难理解,但先作为js的一种机制去理解,至于为什么,后面再往深入去探讨)。在构造新的对象的普通对象的时候会产生一个__proto__属性指向它。

继续向下挖:

好了,现在把js的原型和对象的产生理解清楚了,下面的事情就简单了,下面揭开上面图形中的Object的神秘面纱:funcA.prototype.__proto__指向的Object是一个什么东西?它的来源又是什么?我们在控制台上面输出当前的这个值结果如下:

第20篇  js高级知识---深入原型链

根据上面的经验,我们可以推测出__proto__指向的应该是一个函数的原型,也就是说xxx.prototype=funcA.prototype.__proto__,这个xxx同时应该是当前这个Object的constrcutor,好了下面看看猜想的对不对。

第20篇  js高级知识---深入原型链

上面的红色框框的是输出的结果,由这个我们可以说我们说的是对的。同理既然Object是一个对象,那他的prototype和__proto__又是什么呢?

第20篇  js高级知识---深入原型链

由上面的内容可以看出,最终的原型是一个null,即说明 产生Object.prototype这个对象的“母体”的原型是null,总结上面的结果,可以总结到下面这张图上面:

第20篇  js高级知识---深入原型链

好了,对于原型算是讨论差不多了,下面再说说比较特殊的Function,上点代码

var foo=new Function("var str='c';console.log(str);");
foo();
console.log(foo);
console.log(foo.prototype);
console.log(foo.__proto__);
// 

运行结果如下:

第20篇  js高级知识---深入原型链

由上面的结果可知,由Function产生的对象还是一个函数对象,foo.__proto__是一个空函数对象,foo.prototype是一个Object的实例对象。由上面可以推断出来,foo.__proto__===Function.prototype;为true推出Function.prototype=function(){}(是一个空函数),既然Fuction,prototype是一个函数对象,那它的原型是什么呢?即查看Function.prototype.prototype=?这个值是多少呢?

第20篇  js高级知识---深入原型链

由此可见,这个function(){}没有原型,他应该是原型的终结了,即全部函数的__proto__就都是function(){},即是Function.prototype,即所有的函数都是Function的一个实例对象,这也就解释了,js中一切皆对象的这句话。

再思考:我们已经找到函数的根了,那Function.prototype对象的根在哪里?Function.prototype已经是到了原型的终结了,那它又是怎么来的呢?我们再看看Function.prototype.__proto__=?这个到底是什么

第20篇  js高级知识---深入原型链

从这个结果我们看到,Function.prototype.__proto__是一个Object的实例对象,从上面分析原型的时候我们都已经知道,这个“object”最终的__proto__的指向是null。到目前为止我们心里虽然有很多的疑问,但觉得一切变得明朗起来,函数对象和普通对象是相通的,最终的指向都是一个null.总结一下,如下图:

第20篇  js高级知识---深入原型链

上图是我们分析后所有的元素的关系,这个看起来清楚了许多,所有的对象的__proto__元素的终点都是null,如果撇开null元素,即所有的普通对象的基对象都是Object(是Object函数的原型),包括Object的类型的普通对象;同理,所有的函数的__proto__都是function(){}(Function.prototype),当然也包含Function本身。看完这些是不是有一种从无中生一(null对象),一生二,二生万物的感觉?

可能有人也注意到了右正解的红色的Function,他也是他自己产生的,先不要急, 为了更好的说明上面的这个图我们再看下面的代码说明下:

function funcA() {}
function funcB() {}
console.log(funcA.__proto__);
console.log(funcB.__proto__);
console.log(funcA.__proto__ === funcB.__proto__);
console.log(funcA.__proto__ === funcB.__proto__ && funcB.__proto__ === Number.__proto__ && Number.__proto__ === Function.__proto__);
console.log(Function.prototype == Function.__proto__);

运行结果如下:

第20篇  js高级知识---深入原型链

上面的运行结果也证明我的们想法,Function是一个特殊的对象,他的实例来源也来自于他自己,因为他的原型是一切函数的源头,他本身也是一个函数,所以就不奇怪Function.prototype===Function.__proto__是成立的。同理,一切函数对象的根源也都是一样的,所以下面的等式都成立了

function funcA() {}
function funcB() {}
funcA.__proto__ === funcB.__proto__ ;
funcB.__proto__ === Number.__proto__ ;
Number.__proto__ === Function.__proto__;
Function.__proto__===Function.prototype
Number.__proto__ === Function.prototype;  // true
Boolean.__proto__ === Function.prototype; // true
String.__proto__ === Function.prototype ; // true
Object.__proto__ === Function.prototype;  // true
Function.__proto__ === Function.prototype; // true
Array.__proto__ === Function.prototype ;  // true
RegExp.__proto__ === Function.prototype;  // true
Error.__proto__ === Function.prototype;   // true
Date.__proto__ === Function.prototype;    // true

说了这么多还没有讲到原型链,呵呵,上面如果都理解了,那么原型链这个东西就so easy了,不多说还是用代码说话:

 var a={};
 a.__proto__.value="a";
 a.show=function(){
     console.log(this.value);
 }
 a.show();

这段代码运行的结果是输出一个字母”a”,但是我们看到a的对象中没有value的这个字段,但同样也能输出,因为在它的__proto__上面有一个value属性,js在寻找属性的时候会沿着__proto__的去寻找,这个就是我们要说的原型链。原理很简单:如果在当前对象中找不到当前属性或者方法(value),那么就会沿着原型链开始找,一直遍历完整个的原型链,一旦找到,就返回第一个找到的属性获得方法,如果没有,就返回undefined。

说了这么多,原型链到底有什么作用?也许很多人会说,可以用来继承,不过没错,但是我们还是要了解,为什么他可以继承,为什么 funcA.prototype=new funcB();这个就可以实现了所谓的继承。下面还是看代码:

function funcA() {
    this.show = function(str) {
        console.log(str);
    }
}
function funcB() {
    this.read = function() {
    }
}
var a = new funcA();
funcB.prototype = a;
a.show("a");
var b=new funcB();
b.show("b");

运行的结果如下:

第20篇  js高级知识---深入原型链

这个是很常用的写法,可以看到b是可以调用funcA的方法的,这个是为什么呢,下面我们画一个原型的示意图

第20篇  js高级知识---深入原型链


看到上面的图应该就明白了,因为funcB的原型是a,所以导致b.__proto__=a,所以b就能够沿着原型链访问a中的方法,这样就实现了继承----原型链继承,又称为原型继承。

当前这种继承的方法可以不用这么写,原理清楚了,那就改下也没有什么,看一段简单粗暴的原型继承:

function funcA() {
    this.show = function(str) {
        console.log(str);
    }
}
function funcB() {
    this.read = function() {}
}
var a = new funcA();
var b = new funcB();
b.__proto__ = a;
a.show("a");
b.show("b");

这样和上面的输出的结果是一个的,但是这样的话只有对象b继承了a中的方法,但是再产生的funcB的新对象,却没有a中的方法:

如:

var c=new funcB();
c.show("c");//报错

当然实现的方法很多,下讲会讲说下js的三种继承方式,如果篇幅不大,会连着js的this的一起写出来。下面在写一个个实现方法,供参考,原因在上面:

function funcA() {
    this.show = function(str) {
        console.log(str);
    }
}
function funcB() {
    this.read = function() {}
}
var a = new funcA();
var b = new funcB();
 funcA.call(b);//use call
a.show("a");
b.show("b");

写于2015.11.14