乐趣区

关于前端:前端百题斩016原型构造函数和实例之间的奇妙关系

jiezi

写该系列文章的初衷是“让每位前端工程师把握高频知识点，为工作助力”。这是前端百题斩的第 16 斩，心愿敌人们关注公众号“执鸢者”，用常识武装本人的头脑。

16.1 根底

  1. 原型

每个对象都蕴含一个原型属性（prototype），用于关联另一个对象，关联后就能应用那个对象的属性和办法，这其实就是 JavaScript 的原型式继承。操作原型有如下办法：

（1）Object.create()

依据指定的原型创立新对象，原型能够是 null

const parentObj = {add: function() {return this.a + this.b;}
};

const newObj = Object.create(parentObj, {
    a: {value: 10},
    b: {value: 20}
});

console.log(newObj.add()); // 30

（2）Object.getPrototypeOf()

返回指定对象的原型

// ……
console.log(Object.getPrototypeOf(newObj)); // {add: [Function: add] }

（3）Object.setPrototypeOf()

设置一个指定的对象的原型到另一个对象或 null。

const parentObj = {add: function() {return this.a + this.b;}
};

const childObj = {
    a: 10,
    b: 20
};

Object.setPrototypeOf(childObj, parentObj);

console.log(childObj.add()); // 30
console.log(Object.getPrototypeOf(childObj)); // {add: [Function: add] }

（4）Object.prototype.isPrototypeOf()

返回一个布尔值，用于查看一个对象是否存在于另一个对象的原型链上。

console.log(parentObj.isPrototypeOf(childObj)); // true
  1. 构造函数

构造函数，是一种非凡的办法。次要用来在创建对象时初始化对象，即为对象成员变量赋初始值，总与 new 运算符一起应用在创建对象的语句中。

  1. 实例

通过构造函数和 new 创立进去的对象，就是实例

16.2 三者之间关系

上面先看一张网上流传的神图，外面蕴含了原型、构造函数、实例三者之间的关系。

上述图中内容能够简化为以下几条：

  1. 原型.constructor === 构造函数
  2. 构造函数.prototype === 原型
  3. 实例.__ proto __ === 原型

上面先来看一段代码，这段代码尽管简短，然而外面确蕴含了上述的原型、构造函数和实例。

// 构造函数
function Test(a, b) {
    this.a = a;
    this.b = b;
}

// 原型
Test.prototype.add = function() {return this.a + this.b;}

// 实例
const test = new Test(10, 20);
console.log(test.add()); // 30

上面来利用上述代码验证一下这三者的关系

  1. 获取实例内容

在实例中具备__ proto 属性，能够看到外面的内容就是原型，从而验证了 实例. proto __ === 原型

  1. 获取构造函数内容

  1. 获取原型内容

在原型中具备 constructor 属性，该属性的内容就是构造函数，从而验证了 原型.constructor === 构造函数

1. 如果感觉这篇文章还不错，来个分享、点赞吧，让更多的人也看到

2. 关注公众号执鸢者，与号主一起斩杀前端百题

退出移动版