您的位置:首页 > Web前端 > JavaScript

深入理解JavaScript中的继承:原型链篇

2017-11-08 00:00 573 查看
一、何为原型链
  原型是一个对象,当我调用一个对象的方法时,如果该方法没有在对象里面,就会从对象的原型去寻找。JavaScript就是通过层层的原型,形成原型链。
二、谁拥有原型
  任何对象都可以有原型,当我们创建对象的时候,会自动为对象添加一个属性,这个属性就是原型,我们无法访问到他,但在firefox和chrome中可以通过一个非标准的属性__proto__(双下划线)来访问到原型(或通过Object.getPrototypeOf来访问)。
三、理解原型链
  我们先从以下代码入手
  var foo = {};
  console.log(foo.toString()); // [object Object]  
  console.log(foo.__proto__); // object { ... } 这里指向Object.prototype
  foo里面明明没有toString方法,但我却能调用,这就是原型链的作用。当我调用foo.toString时,由于在里面找不到toString方法,那么我从__proto__属性里面去找,找到后并调用。上面的代码中我们就是从Object.prototype中找到了toString方法。你可能会很困惑,prototype是什么?我们不要被prototype所迷惑,他只是一个存放属性的容器而已,你可以如下这样做来实现继承(但尽量不要这么做)

function Bar() {}
Bar.test = {
say: function () {
console.log('say test');
}
}

var foo = new Bar();
foo.say(); // 报错

// 改变继承的对象

foo.__proto__ = Bar.test;
foo.say() // say test

  在上面的代码中我们通过new的形式来创建一个对象,在new的过程中对象会将__proto__指向函数的prototype,由于prototype中是没有say函数的,所以调用会报错,但是之后我们强行改变了继承的对象,将foo的继承对象改为Bar.test,所以我们就能调用say函数了。
________________________________________

  我想你已经明白个大概了,prototype事实上并没有什么特殊的,硬要说有什么特殊的话,他只是被JavaScript默认为原型属性的存放点而已,他本质上只是个对象,原型链的重点就在于__proto__,你可以试着把__proto__当作桥梁,当我在对象内部找不到属性时,我就会通过这座桥梁到对面的对象里去寻找属性,直到找到为止或者对象里没有桥梁时才停下来。JavaScript就是通过这样的方式来形成原型链,实现继承的关系。
  最后说一下,__proto__只是方便我们查看对象的原型而已,大家不要通过修改__proto__来实现继承的关系,而是要用如构造函数之类的方式来实现继承,这个我会放到以后的文章去说。
(ps:可能有动手能力强的同学会自己去测试,发现__proto__里面也有__proto__,一直循环下去,无穷无尽,但事实上你去获取的时候你会发现Object.__proto__.__proto__.__proto__的值是null,也就是没有原型。)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: