美文网首页
JS原型链的一些理解

JS原型链的一些理解

作者: 一颗粒普斯 | 来源:发表于2018-07-26 17:29 被阅读14次

关于原型链我的理解是一个构造函数的原型作为另一个构造函数的实例形成的继承关系
在JS高级程序设计中有这样一个图

图片来源于JS高级程序设计
当我们定义一个函数时会有一个原型,即图中的SuperType Prototype,这时原型对象中会有一个constructor指向构造函数SuperType,这便是构造函数与原型对象之间的关系;
function Super(){
  this.name='bob';
  this.age=20;
}

此时如果再定义一个SubType构造函数,把SubType prototype作为构造函数SuperType的实例,便会有[[Prototype]]指向SuperType Prototype这样便形成了原型链,注意SubType Prototype已经没有constructor

function Super(){
  this.name='bob';
  this.age=20;
}

function Person(){};
Person.prototype = new Super();

原型链中的继承
上面代码中Person构造函数和prototype里什么也没定义,但是我们现在对Person进行实例,事实上我们是可以取到值的

var person = new Person();
console.log(person.name); //'bob'
console.log(person.age); //20

通过chrome控制台的打印我们可以发现这种继承关系,__prototo__:SuperPerson.prototype = new Super(); 存在Super中的属性;

image.png
constructor指向变化
JS高级程序设计说如果一个构造函数的原型对象作为另一个构造函数的实例,那么作为实例的原型对象的constructor就会消失,从上图中我们也能发现绿色框中没有constructor属性,这里当时我在想如果直接手动将constructor指为Person这个构造函数原型链是否会断裂
function Super(){
  this.name='bob';
  this.age=20;
}

function Person(){};
Person.prototype = new Super();

Person.prototype.constructor = Person;

console.log(Person.prototype);

var person=new Person();
console.log(person);

通过在控制台中打印可以发现constructor这里只作为一个属性,值为Person这个构造函数,而真正的影响指向的constructor为灰色


image.png

因此可以推断不存在手动更改constructor指向这么一说

相关文章

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • 再来看一次JS继承

    原型链继承 理解原型链的概念 用一张图来理解原型链再合适不过了。 总结概括JS红宝书上对原型链的概念:每个函数都有...

  • 2018-01-09 关于javascript原型链的思考 pl

    s 深入理解原型和原型链? 构造函数 理解原型和原型链 new的时候js都干了什么? 一个实现继承的demo 构造...

  • js原型链--js面向对象编程

    简单粗暴地理解js原型链--js面向对象编程 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢...

  • js继承完全理解

    认识原型链 要理解js的继承原来要先理解原型链,要理解原型链要先清楚下面两个结论: 任何一个构造函数(其实是任何一...

  • 前端资料

    ES6新数据类型 Symbol . js变量提升函数提升 js this js 原型及原型链理解 new做了什么 ...

  • 说说JS原型链

    JS的原型链的分析网上有大把,比如这种: 不过有必要把简单的东西复杂化吗? 其实理解JS原型链只需要理解一个准则,...

  • 原型和原型链

    今天发现一张特别好的图(↑↑↑上图↑↑↑),对原型和原型链的理解特别直观友好。 原型和原型链 基础储备:每个 JS...

  • 原型与新版的类-class

    首先来理解原型原型 === 共用属性可以先看看方姐的几篇文章:什么是JS原型链JS 中 proto 和 proto...

  • js原型-原型链理解

    1、prototype function Person(){ };Person.prototype.name = ...

网友评论

      本文标题:JS原型链的一些理解

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