javascript的原型链解读

2017-10-03  本文已影响0人  地罗神

关于原型链的调用原理

只要明白js里访问一个对象的方法或属性的过程，就能彻底搞明白js的原型链。(首先要明确，js里的对象实际上就是一个标准的字典)

  1. 用属性或方法的名字作为key值，在当前对象的字典中查找对应值。如果找到对应的key,则返回值，否则进行第二步

  2. 查找对象中是否有__proto__属性，如果存在，则把__proto__当成当前处理对象，重复第一步。否则报错

这个就是原型链的实现基础，接下来我们看看js里如何来建立一个原型链

原型链的建立方法

原型链对象__proto__的建立主要是分为两步，一是定义prototype对象，二是把它们链接起来。

第一步: 定义prototype

定义prototype的方法大家应该已经很熟悉了，就是类似下面这样的写法

function Super() {
}

Super.prototype.foo = function() {
  console.log("foo from super");
}

var instance = new Super();
instance.foo();

这一段代码，为Super的prototype对象添加了foo函数，所以new它会输出foo from super.

小贴士: 这里要注意一个问题，就是Super.prototype.foo = function(){}绝对不能写成Super.prototype.foo = new function(){}. 不加new关键字的话，foo是一个function类型，加了new关键字之后，foo就是一个object类型了，不能被当成函数调用

第二步: 把prototype定义链接起来

要明白js里的原型链的建立过程，我们先要明确new运算符所作的事情。

当new foo被执行时(实际上就是一个constructor)调用new运算符时,会发生三件事情:

这里最特别的就是__proto__的赋值操作，正是这一句保证了定义完foo对象后，new出来的对象都能调用到定义在foo的prototype上的函数和方法。

到这里，只是类定义的实例能调用到类的方法，要实现继承关系的话，要怎么作呢，我们假设有Super和Derived两个类，那么我们只要保证Derived的prototype对象的__proto__属性指向Super即可，看一下示例:

//=============定义Super对象=========================

function Super() {
    console.log("Super constructor");
}

Super.prototype.print = function() {
    console.log("Super print function");
}

//==============定义Derive对象========================

function Derive() {
    console.log("Derive constructor");
}

// 关键语句在这里，把Derive的prototype对象的__proto__指向Super
// 的prototype，就可以保证Super的方法/属性可以被Derive的实例
// 访问到
Derive.prototype.__proto__ = Super.prototype;

//==============测试Derive对象========================

var instance = new Derive();

// instance对象自己定义的print函数
//instance.print = function() {
//  console.log("print in instance");
//}

instance.print();

整个执行流程如下:

当调用instance.print函数时，会先从instance对象自己的字典里查找print方法，(如果上文例子最后部分的注释去掉，则会找到instance自己的print函数从而输出"print in instance")。

因为instance自己没有定义print函数，所以从它的__proto__对象查找（也就是Derive.prototype对象），也找不到。

接下来继续从Derive.prototype对象的__proto__查找，它指向的是Super.prototype, 这里有定义，因此最终输出了"Super print function"

网上有一种写法，我是非常不推荐的。像下面这样:

//Derive.prototype.__proto__ = Super.prototype;
Derive.prototype = new Super();

它利用了new操作符会把Super的prototype对象赋给新生成对象的__proto__属性这一特性，来完成原型链的链接，缺点是显而易见的，就是带来了一次完全无价值的Super对象实例化，Derive原来的prototype对象则被舍弃掉了。 相比而言，注释中的那一条实现同样功能的写法只是一个简单的赋值运算的开销

关于构造函数的继承

通过文中的例子，我们只是实现了函数调用的继承，但是构造函数也是要考虑的事情。让派生类调用基类的构造函数要通过下面的方式进行

function Derive() {
    console.log("Derive constructor");
    Super.call(this);   // 调用此句可以在构建Derive之前先构建Super
}

附录－关于new function

一开始对下面两种定义感到疑惑

Derive.prototype.print = function() {...}
Derive.prototype.print = new function() {...}

以为这两者效果应该是差不多的，试了一下才发现这二者的区别:

上一篇 下一篇

猜你喜欢

热点阅读