关于html:第-36-题什么是原型原型链继承

什么是原型？

每个函数都有 prototype（原型）属性，这个属性是一个指针，指向一个对象，这个对象的用处是蕴含特定类型的所有实例共享的属性和办法，这个对象（原型对象）是用来给实例共享属性和办法的。

function Person() {}
Person.prototype.name = 'Nicholas';
Person.prototype.age = '29';
Person.prototype.job = 'SoftWare Engineer';
Person.prototype.sayName = function() {console.log(this.name);
};

var person1 = new Person();
person1.sayName(); // Nicholas

var person2 = new Person();
person1.sayName(); // Nicholas

console.log(person1.sayName === person2.sayName); // true

以下是关系图

<img src=”https://noxussj.top:3000/36/1.png”></img>

由上图可知

1. 构造函数的 prototype（原型）属性，指向原型对象
2. 因为目前原型对象是属于 Person 构造函数的，所以它的 constructor 指向 Person 构造函数
3. 实例 1、实例 2 都是指向原型对象，所以就证实了 Person.prototype 定义的属性和办法都会共享给它的实例。即代码中 person1.sayName === person2.sayName 返回 true。即它们应用的的确是同一个函数（函数的援用地址雷同）
4. 当调用构造函数创立一个新的实例后，该实例外部将蕴含一个指针（外部属性）即[[Prototype]]，指向构造函数的原型对象。尽管在脚本中没有规范的形式拜访[[Prototype]]，但 Firefox、Safari、Chrome 等浏览器在每个对象上都反对一个属性proto；
5. 要留神一点，实例 1、实例 2 的 [[Prototype]] 都是指向原型对象，而不是间接指向构造函数自身
6. 尽管无法访问 [[Prototype]] 属性，然而能够通过原型对象的 isPrototypeOf()办法来判断实例是否指向该构造函数的原型对象，Person.prototype.isPrototypeOf(person1) 返回 true
7. 在 ES5 中，新增了一个办法 Object.getPrototypeOf()，返回 [[Prototype]] 的值

到目前为止，应该了解原型、原型对象、构造函数之间的关系了吧

什么是原型链？

假如一个原型对象等于另一个类型的实例，另一个类型的原型对象又等于另一个类型的实例。就像这样一层层递进，就形成了实例与原型的链条，这个就是所谓的原型链的基本概念

// 定义构造函数：超类
function SuperType() {this.property = true;}

SuperType.prototype.getSuperValue = function() {return this.property;};

// 定义构造函数：子类
function SubType() {this.subproperty = false;}

//  SubType.prototype 等于 SuperType 的实例，即重写 SubType 原型对象
SubType.prototype = new SuperType();

// 原型对象重写后又新增了办法
SubType.prototype.getSubValue = function() {return this.subproperty;};

var instance = new SubType();

关系图

<img src=”https://noxussj.top:3000/36/2.png”></img>

什么是继承？

能够了解为，假如有函数 A 和函数 B。函数 A 继承了函数 B。那么函数 B 中的属性办法在函数 A 中也能拜访和应用

继承的形式有很多：原型链继承、组合继承、原型式继承、寄生式继承、寄生组合式继承

文章的内容 / 灵感都从下方内容中借鉴

• 【继续保护 / 更新 500+ 前端面试题 / 笔记】https://github.com/noxussj/In…
• 【大数据可视化图表插件】https://www.npmjs.com/package…
• 【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/