第 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();
// Nicholasvar person2 = new Person();
person1.sayName();
// Nicholasconsole.log(person1.sayName === person2.sayName);
// true
以下是关系图
文章图片
由上图可知
- 构造函数的 prototype(原型)属性,指向原型对象
- 因为目前原型对象是属于 Person 构造函数的,所以它的 constructor 指向 Person 构造函数
- 实例 1、实例 2 都是指向原型对象,所以就证明了 Person.prototype 定义的属性和方法都会共享给它的实例。即代码中 person1.sayName === person2.sayName 返回 true。即它们使用的确实是同一个函数(函数的引用地址相同)
- 当调用构造函数创建一个新的实例后,该实例内部将包含一个指针(内部属性)即[[Prototype]],指向构造函数的原型对象。虽然在脚本中没有标准的方式访问[[Prototype]],但 Firefox、Safari、Chrome 等浏览器在每个对象上都支持一个属性proto;
- 要注意一点,实例 1、实例 2 的[[Prototype]]都是指向原型对象,而不是直接指向构造函数本身
- 虽然无法访问[[Prototype]]属性,但是可以通过原型对象的 isPrototypeOf()方法来判断实例是否指向该构造函数的原型对象,Person.prototype.isPrototypeOf(person1) 返回 true
- 在 ES5 中,新增了一个方法 Object.getPrototypeOf(),返回[[Prototype]]的值
什么是原型链? 假设一个原型对象等于另一个类型的实例,另一个类型的原型对象又等于另一个类型的实例。就像这样一层层递进,就构成了实例与原型的链条,这个就是所谓的原型链的基本概念
// 定义构造函数:超类
function SuperType() {
this.property = true;
}SuperType.prototype.getSuperValue = https://www.it610.com/article/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();
关系图
文章图片
什么是继承? 可以理解为,假设有函数 A 和函数 B。函数 A 继承了函数 B。那么函数 B 中的属性方法在函数 A 中也能访问和使用
【第 36 题(什么是原型、原型链、继承())】继承的方式有很多:原型链继承、组合继承、原型式继承、寄生式继承、寄生组合式继承
文章的内容/灵感都从下方内容中借鉴
- 【持续维护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...
- 【大数据可视化图表插件】https://www.npmjs.com/package...
- 【利用 THREE.JS 实现 3D 城市建模(珠海市)】https://3d.noxussj.top/
推荐阅读
- 第6.2章(设置属性)
- parallels|parallels desktop 解决网络初始化失败问题
- 2018-02-06第三天|2018-02-06第三天 不能再了,反思到位就差改变
- 第三节|第三节 快乐和幸福(12)
- EffectiveObjective-C2.0|EffectiveObjective-C2.0 笔记 - 第二部分
- android第三方框架(五)ButterKnife
- 开学第一天(下)
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 2018年11月19日|2018年11月19日 星期一 亲子日记第144篇
- 为什么你的路演总会超时()