深入理解JavaScript原型与原型链(GIF预警)

发布网友发布时间：2024-09-17 08:41

我来回答

共1个回答

热心网友时间：2024-10-30 03:37

前言

本文主要围绕下述代码进行讲解，Person是构造函数，p是Person实例化的对象。

functionPerson(name){this.name=name}letp=newPerson('瑾行')

动图预警

下面一起来逐步拆解GIF动画，完成最后的连线。?

显示原型

prototype称作显式原型，每一个函数（除箭头函数）在创建后都拥有prototype的属性，指向函数的原型对象。

prototype的设计之初是为了实现继承，让构造函数创建的实例共享共有的属性和方法，无需重复创建。

functionPerson(name){this.name=name}Person.prototype.getName=function(){console.log(this.name)}letp=newPerson('瑾行')letp1=newPerson('七金')p.getName()//瑾行p1.getName()//七金

理解了，就把prototype相关的线先连起来。Object与Function均是Javascript内置的对象，后面细讲。

constructor属性

存在每个函数（除箭头函数）显示原型中，是当前函数的引用。

打印下对象p的constructor属性。

console.log(p.constructor)//fPerson(){}

意料之中，是Person构造函数。但注意p本身没有constructor属性，是从原型上继承的，所以不需画线。我们都知道Javascript中函数也是对象，那么打印下Person的constructor属性。

console.log(Person.constructor)//?Function(){[nativecode]}

从打印结果可以知道Person函数的构造函数是Function。敲黑板！知识点：我们所有的函数都是根据newFunction()生成的。

newFunction([arg1[,arg2[,...argN]],]functionBody)

functionPerson(name){this.name=name}//等价于letPerson=newFunction(name,'this.name=name')

根据知识点，打印Object、Function的constructor属性。

console.log(Object.constructor,Function.constructor)//?Function(){[nativecode]}?Function(){[nativecode]}

根据打印结果：Function是所有函数的构造函数（包括自己），且所有函数的constructor均继承于Function.prototype，同样无需画线。还有一种情况，函数的显式原型。根据定义，毋庸置疑，constructor指向自身函数。

console.log(Person.prototype.constructor)//?Person(){}

同理可得出Object.prototype.constructor与Function.prototype.constructor

懂了的话，按讲解顺序连上与constructor相关的线。

隐式原型

__proto__称作隐式原型，所有的对象都具有__proto__属性。对象的隐式原型指向了该对象构造函数的原型对象，保证对象能访问挂载在原型链上定义的属性和方法。

p是Person构造函数实例化的对象，所以p.__proto__===Person.prototype为true，保证p可访问Person原型上定义的属性和方法。

console.log(p.__proto__===Person.prototype)//true

函数也是对象，上1小节了解到Function是所有函数的构造函数

console.log(Person.__proto__===Function.prototype)//trueconsole.log(Object.__proto__===Function.prototype)//trueconsole.log(Function.__proto__===Function.prototype)//true

函数的显示原型也是对象，是Object构造函数产生。

console.log(Person.prototype.__proto__===Object.prototype)//trueconsole.log(Function.prototype.__proto__===Object.prototype)//true

构造函数Person的显式原型也是对象，所以我们尝试打印下它的隐式原型。现在，我们可以得出结论：所有的对象都继承于Object.prototype。不信的话，打印下Object.prototype.__proto__

functionPerson(name){this.name=name}Person.prototype.getName=function(){console.log(this.name)}letp=newPerson('瑾行')letp1=newPerson('七金')p.getName()//瑾行p1.getName()//七金0

现在，让我们把剩下关于__proto__的线连好，*完成！！！

原型链

如果看到这里，你应该知道原型链由__proto__将对象和原型连接起来组成原型链?。

面试高频问题

题目：instanceof与isPrototypeOf有何区别？

instanceOf:检测构造函数的prototype是否出现在某个实例对象的原型链上。isPrototypeOf:检查原型对象是否存在于某个实例对象的原型链上。

functionPerson(name){this.name=name}Person.prototype.getName=function(){console.log(this.name)}letp=newPerson('瑾行')letp1=newPerson('七金')p.getName()//瑾行p1.getName()//七金1

根据定义和代码可以的得出结论：两者具备相同的作用，但主要目标对象不同，instanceOf目标对象是构造函数，isPrototypeof则是原型对象。

总结

如果读到这里，我相信你至少会用画图地形式去描述原型与原型链，那就毫不吝啬地点个赞吧?。

作者：瑾行著作权归作者所有。