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

JS原型和原型链

时间:2023-03-28 11:32:12 HTML

JS原型构造函数由于JS没有类的概念,JS设计者定义了一个构造函数来实现继承//constructorfunctionPerson(name,age){this.name=name;this.age=age;}//实例对象varp=newPerson('zhangsan',23);上面的代码通过JS构造函数生成了一个实例对象。但与此同时,一个新的问题出现了。this在构造函数中赋值的属性和方法是各个实例对象的属性和方法,不能共享。因此,需要使用一个原型对象来存储构造函数的公共属性和方法。tips:创建实例对象的过程1.新建一个实例对象2.在构造函数中给实例对象赋值域(this也指向实例对象)3.执行构造函数中的代码(添加到实例中object实例属性和实例方法)4.返回实例对象原型对象JS每次创建新函数都会生成一个属性prototype,这个属性指向一个对象,这个对象就是原型对象,原型对象有一个属性构造函数指向函数。这样,函数就与原型对象相关联了。JS原型链理解了原型对象,那么完善上面的构造函数(构造函数+原型对象:常用)//constructorfunctionPerson(name,age){this.name=name;this.age=age;}//一个方法所有实例对象共享Person.prototype.say=function(word){console.log(`${this.name}say:${word}`);}varp1=newPerson('张三',23);//创建一个Person实例对象p1.hasOwnProperty('say')//false表示它本身没有定义p1.say('helloworld');//调用public方法打印:张三说:helloworld从上面的代码可以看出,实例对象p1可以访问构造函数原型对象上的方法。显然,实例对象只能继承构造函数中的属性和方法。为什么构造函数的原型对象中的say方法可以被调用呢?这就引出了原型链的概念。_proto_。构造函数创建的每个实例对象都会有一个属性_proto_,它会指向构造函数的原型对象。_proto_。不是语言本身的特征。是各大厂商在实现时加入的私有属性。不建议在生产过程中使用该属性。您可以使用Object.getPrototypeOf方法获取实例对象的原型,然后为原型添加方法/属性。当访问对象的属性时,它会首先搜索对象本身的属性。如果没有找到,它将通过其__proto__隐式属性查找其构造函数的原型对象。如果还没有找到,它就会接着在其构造函数原型的__proto__中查找,这样一层层查找就会形成一个链式结构,我们称之为原型链。//构造函数Person(name,age){this.name=name;this.age=age;}//所有实例对象共享的方法Person.prototype.say=function(word){console.log(`${this.name}说:${word}`);}constp1=newPreson('张三',18);//创建一个Person实例对象constp2=newPreson('李四',20);//创建一个新的Proson实例对象p1.say('helloworld');//调用公共方法p1.hasOwnProperty('say')//false表示它没有定义在它自己上p1.__proto__.do=function(){console.log('Addamethodtotheprototypeobject');}p2.do();//打印出来——给原型对象添加一个方法所以,我们在开发的时候,要注意不要通过实例对象改变它的构造函数的原型对象,会影响通过这个构造函数生成的其他实例对象。