欢迎光临
我的个人博客网站

第 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 

以下是关系图

第 36 题:什么是原型、原型链、继承?

由上图可知

  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(); 

关系图

第 36 题:什么是原型、原型链、继承?

什么是继承?

可以理解为,假设有函数 A 和函数 B。函数 A 继承了函数 B。那么函数 B 中的属性方法在函数 A 中也能访问和使用

继承的方式有很多:原型链继承、组合继承、原型式继承、寄生式继承、寄生组合式继承

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

赞(0) 打赏
未经允许不得转载:张拓的天空 » 第 36 题:什么是原型、原型链、继承?
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏