一 、基础
原型
每个对象都包含一个原型属性(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
2. 构造函数
构造函数 ,是一种特殊的方法。主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中。
- 实例
通过构造函数和new创建出来的对象,就是实例
二、 三者之间关系
原型.constructor === 构造函数
构造函数.prototype === 原型
实例.__ 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 __ === 原型
2.获取构造函数内容
3.获取原型内容
在原型中具备constructor属性,该属性的内容就是构造函数,从而验证了原型.constructor === 构造函数
今天的分享就到这里了,想学习前端领取前端资料的人,欢迎大家私信、关注我!!!