美文网首页
JavaScript的原型链到底是什么?

JavaScript的原型链到底是什么?

作者: 陈学谦_ | 来源:发表于2017-04-18 20:37 被阅读184次

1.proto与prototype:

首先,proto 叫做内部原型,prototype 叫做构造器原型

prototype就像构造函数的工具箱一样,里面装着各种各样的工具,并且一直伴随着构造函数。如下图

而对象是没有这个属性的,因为对象就像一个成品,至于这个成品有什么功能都是由其模具(构造函数)决定的。所以prototype被称为“构造器原型”。

其次,我们所说的“找原型链”其实不是从prototype属性中找,而是从proto属性中找

比如说我们有一个构造函数Student,它实例化了一个对象 stu,我们需要用到stu的say()方法,那么它会去其proto属性内寻找有没有这个方法,而对象的proto属性指向其构造函数的prototype属性,也就是
stu.proto === Student.prototype,这样一来对象stu就会去Student.prototype中寻找是否有say()这个方法。

如果在上一层没找到say()方法,那么它会继续往Student.prototype的proto中寻找,也就是stu. proto . proto对象的proto属性指向其构造函数的prototype属性,并且Student.prototype是一个对象,它的构造函数是Object,因此它会去Object.prototype中寻找

prototype显得像个接收器...

因此真正的“找原型链”实际上是从proto里面找有没有想要的属性或方法,所以proto被称为“内部原型”。

proto并不是W3C标准,只是浏览器对原型的一种实现手段。
亲测支持proto属性的浏览器有:Chrome, FireFox, Opera, Edge, 没有Mac系统,Safari是否支持不知道,IE不支持。
因此除非用于调试,请不要在代码中出现proto,至于怎么间接借用proto利用原型链,我们将在下面讲到。

2. 如何借用proto利用原型链?

我们需要用到原型链无非就是想用到原型链上一层中的方法。上文说过,对象的proto属性指向其类的prototype属性(对象.proto === 类.prototype),我们就可以利用这一点把几个类在原型链中连接起来。

我们先声明一个Person类,之后在这个类的prototype属性上添加say方法。

var Person = function () {};
Person.prototype.say = function () {    
  console.log("Person say.");
};

之后我们再声明一个Student类

var Student = function () {};

这时如果我们若要使Student类能使用Person类的公共方法say就需要把Student类的prototype属性加到原型链中,将Student.prototype与Person.prototype串起来

如图

但是要通过什么方式连接呢?就是利用对象的proto属性指向其构造函数的prototype属性

如图

Student.prototype = new Person();

整体代码

var Person = function () {};
Person.prototype.say = function () {    
  console.log("Person say.");
};

var Student = function () {};

Student.prototype = new Person();

试验一下

var stu = new Student ();
stu.say(); // 输出 Person say.

相关文章

  • JavaScript原型链

    原型链是JavaScript中比较重要的一个概念,也是JavaScript中实现继承的主要手段。 原型链是什么?要...

  • 【javascript】继承

    javascript只支持实现继承,而且继承主要是依靠原型链来实现的。 原型链 javascript将原型链作为实...

  • js原型、原型链、继承的理解

    一、原型、原型链 原型是Javascript中的继承的基础,JavaScript的继承主要依靠原型链来实现的。 原...

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • javaScript原型链

    javaScript原型链概念JavaScript之继承(原型链)数据结构var Person = functio...

  • 原型、原型链

    (什么是原型、原型链?有什么作用) JavaScirpt深入之从原型到原型链 图解 Javascript 原型链 ...

  • web前端面试题总结

    1.知道JavaScript中的原型是什么吗?什么是原型链?能手写一个原型链继承的例子吗? 答:(1)在javas...

  • javascript碎片知识001

    javascript中的对象(原型,原型链) 什么是原型? 原型是JavaScript中的继承的基础,JavaSc...

  • JavaScript的原型链到底是什么?

    1.proto与prototype: 首先,proto 叫做内部原型,prototype 叫做构造器原型。 pro...

  • 面试题的总结

    进实验室前端的面试题总结 《1》知道javascript中的原型是什么吗?什么是原型链?能手写一个原型链继承的例子...

网友评论

      本文标题:JavaScript的原型链到底是什么?

      本文链接:https://www.haomeiwen.com/subject/vcleuttx.html