当前位置: 首页 > Web前端 > JavaScript

JavaScript中的原型和原型链

时间:2023-03-27 01:21:45 JavaScript

构造对象functionPerson(){}letperson=newPerson()上面的程序创建了一个Person类型的实例原型functionPerson(){}Person.prototype.name="ztq"Person.prototype.sayHi=function(){console.log("helloworld")}letperson1=newPerson()letperson2=newPerson()console.log(Person.prototype)//{name:'ztq',sayHi:[Function(anonymous)]}console.log(person1.name)//ztqconsole.log(person2.name)//ztq的每个构造函数都有一个prototype属性指向实例原型,那么实例原型是什么?你可以将其理解为一个对象,其值是与实例对象关联的原始状态。在实例中获取不到的属性值会在原型中找到,这也是后面实现继承最重要的特性。constructorfunctionPerson(){}Person.prototype.name="ztq"Person.prototype.sayHi=function(){console.log("helloworld")}letperson1=newPerson()letperson2=newPerson()控制台.log(person1.constructor)//[Function:Person]console.log(person2.constructor)//[Function:Person]console.log(person1.constructor===person2.constructor)//真正的实例原型构造器指针将指向构造函数proto在每个实例对象中都有一个[[prototype]]属性。我们不能通过标准方法直接访问这个属性,但是chrome、firefox、safria浏览器中都有__proto__属性。在目前的标准中,getPrototype和setPrototypeOf可以获取和设置__proto__,而__proto__属性实际上是对[[prototype]]的引用。functionPerson(){}Person.prototype.name="ztq"Person.prototype.sayHi=function(){console.log("helloworld")}letperson1=newPerson()letperson2=newPerson()控制台.log(person1.__proto__)//{name:'ztq',sayHi:[Function(anonymous)]}console.log(Object.getPrototypeOf(person1))//{name:'ztq',sayHi:[Function(anonymous)]}原型链实例对象通过__proto__获取实例原型,但是实例原型也是一个对象,所以它也有自己的实例原型函数Person(){}Person.prototype.name="ztq"Person.prototype.sayHi=function(){console.log("helloworld")}letperson1=newPerson()letperson2=newPerson()console.log(person1.__proto__)//{name:'ztq',sayHi:[Function(anonymous)]}console.log(person1.__proto__.__proto__)//[Object:nullprototype]{}原型的原型这样连接起来的链成为原型链,由蓝色组成图片中的线条,实例对象可以获取原型中的属性,构成了原型链实现继承的重要特征。