一、基础
原型
每个对象都包含一个原型属性(prototype),用于关联另一个对象,关联后就能使用那个对象的属性和方法,这其实就是JavaScript的原型式继承。操作原型有如下方法:
(1)Object.create()
根据指定的原型创建新对象,原型可以是null
constparentObj={add:function(){returnthis.a+this.b;}};constnewObj=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。
constparentObj={add:function(){returnthis.a+this.b;}};constchildObj={a:10,b:20};Object.setPrototypeOf(childObj,parentObj);console.log(childObj.add());//30console.log(Object.getPrototypeOf(childObj));//{add:[Function:add]}
(4)Object.prototype.isPrototypeOf()
返回一个布尔值,用于检查一个对象是否存在于另一个对象的原型链上。
console.log(parentObj.isPrototypeOf(childObj));//true
2.构造函数
构造函数,是一种特殊的方法。主要用来在创建对象时初始化对象,即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中。
3.实例
通过构造函数和new创建出来的对象,就是实例
二、三者之间关系
下面先看一张网上流传的神图,里面包含了原型、构造函数、实例三者之间的关系。
上述图中内容可以简化为以下几条:
原型.constructor===构造函数构造函数.prototype===原型实例.__proto__===原型
下面先来看一段代码,这段代码虽然简短,但是里面却包含了上述的原型、构造函数和实例。
//构造函数functionTest(a,b){this.a=a;this.b=b;}//原型Test.prototype.add=function(){returnthis.a+this.b;}//实例consttest=newTest(10,20);console.log(test.add());//30
下面来利用上述代码验证一下这三者的关系
1.获取实例内容
在实例中具备__proto__属性,可以看到里面的内容就是原型,从而验证了实例.__proto__===原型
2.获取构造函数内容
3.获取原型内容
在原型中具备constructor属性,该属性的内容就是构造函数,从而验证了原型.constructor===构造函数
今天的分享就到这里了,想学习前端领取前端资料的人,欢迎大家私信、