原型链是javascript实现继承的核心机制，当对象查找属性时会沿原型链向上查找直至找到或到达null。1. 每个对象的__proto__指向其构造函数的prototype；2. 构造函数的prototype也是对象，其__proto__指向父类原型，最终指向object.prototype；3. object.prototype.__proto__为null，标志链的结束；4. class语法糖本质仍基于原型链，extends实现继承关系，super调用父类构造函数；5. 避免原型链污染应不修改object.prototype、使用object.create(null)创建无原型对象、用object.freeze()冻结对象及严格验证输入。理解原型链有助于掌握继承、避免bug并提升代码安全性，该机制贯穿于js对象属性查找全过程，是面向对象编程的基础。
JS原型链，简单来说，就是对象查找属性时的一条向上查找的路径。当一个对象自身没有某个属性时，它会沿着原型链向上查找，直到找到该属性或者到达原型链的顶端（
null
）。
解决方案
原型链是 JavaScript 实现继承的核心机制。每个 JavaScript 对象都有一个指向其原型（prototype）的内部链接，这个原型对象也有自己的原型，以此类推，形成一个链条，这就是原型链。
具体来说：
__proto__
和
prototype
: 每个 JavaScript 对象（除了
null
）都有一个
__proto__
属性，指向创建它的构造函数的
prototype
属性指向的对象。 而函数对象比较特殊，它除了拥有
__proto__
属性之外，还拥有
prototype
属性。构造函数: 当使用
new
关键字调用一个函数时，这个函数就成为了构造函数。 构造函数的作用是创建新的对象，并且会将新对象的
__proto__
属性指向构造函数的
prototype
属性指向的对象。
Object.prototype
: 所有对象的原型链最终都会指向
Object.prototype
，它是所有对象的基类。
Object.prototype
的
__proto__
指向
null
，标志着原型链的终结。
举个例子：
function Person(name) { this.name = name;}Person.prototype.greet = function() { console.log('Hello, my name is ' + this.name);};const john = new Person('John');john.greet(); // 输出 "Hello, my name is John"console.log(john.__proto__ === Person.prototype); // trueconsole.log(Person.prototype.__proto__ === Object.prototype); // trueconsole.log(Object.prototype.__proto__ === null); // true
在这个例子中：
john
对象的
__proto__
指向
Person.prototype
。
Person.prototype
对象的
__proto__
指向
Object.prototype
。
Object.prototype
对象的
__proto__
指向
null
。
所以，当
john
对象调用
greet()
方法时，它首先在自身查找，没有找到，然后沿着原型链向上查找，在
Person.prototype
中找到了
greet()
方法，于是执行该方法。
原型链的查找过程
当访问一个对象的属性时，JavaScript 引擎会按照以下步骤查找：
先在对象自身查找该属性。如果对象自身没有该属性，则沿着
__proto__
向上查找，即在其原型对象中查找。如果原型对象中仍然没有该属性，则继续沿着原型对象的
__proto__
向上查找，直到找到该属性或者到达原型链的顶端（
null
）。如果在原型链的顶端仍然没有找到该属性，则返回
undefined
。
为什么理解原型链对 JavaScript 开发至关重要？
理解原型链是深入理解 JavaScript 继承机制的关键。 它直接影响着我们如何组织和复用代码。如果不理解原型链，可能会导致一些意想不到的 bug，例如属性查找错误或者原型污染。 此外，掌握原型链有助于我们更好地理解 JavaScript 中的面向对象编程思想，并能更灵活地运用各种设计模式。
如何避免原型链污染？
原型链污染指的是恶意修改对象的原型，从而影响到所有基于该原型创建的对象。 这可能导致安全漏洞。 避免原型链污染的方法包括：
避免直接修改
Object.prototype
: 尽量不要直接修改
Object.prototype
，因为这会影响到所有对象。使用
Object.create(null)
创建对象: 使用
Object.create(null)
创建的对象没有原型，因此不会受到原型链污染的影响。使用
Object.freeze()
冻结对象: 使用
Object.freeze()
可以冻结对象，使其属性不可修改。进行输入验证: 对用户输入进行严格的验证，防止恶意代码注入。
一个简单的例子，展示了如何使用
Object.create(null)
来创建一个没有原型的对象，避免原型链污染：
const obj = Object.create(null);obj.hasOwnProperty = function() { return false; // 尝试覆盖 hasOwnProperty};console.log(obj.hasOwnProperty('name')); // 报错，因为 hasOwnProperty 不是一个函数// 正常情况下，我们应该这样使用 hasOwnProperty：const normalObj = {};console.log(Object.prototype.hasOwnProperty.call(normalObj, 'name')); // false
在这个例子中，由于
obj
没有原型，所以尝试访问
obj.hasOwnProperty
会报错。 这避免了恶意代码覆盖
hasOwnProperty
方法，从而防止原型链污染。
原型链和
class
class
语法糖有什么关系？
class
语法糖是 ES6 引入的，它提供了一种更简洁的语法来定义类。 但本质上，
class
仍然是基于原型链实现的。
class
只是一个语法糖，它隐藏了原型链的细节，让代码更易读易写。
例如：
class Animal { constructor(name) { this.name = name; } speak() { console.log(this.name + ' makes a sound.'); }}class Dog extends Animal { constructor(name) { super(name); } speak() { console.log(this.name + ' barks.'); }}const dog = new Dog('Buddy');dog.speak(); // 输出 "Buddy barks."console.log(dog.__proto__ === Dog.prototype); // trueconsole.log(Dog.prototype.__proto__ === Animal.prototype); // true
在这个例子中，
Dog
类继承自
Animal
类。 虽然我们使用了
class
语法，但实际上
Dog.prototype
的
__proto__
仍然指向
Animal.prototype
，这体现了原型链的继承关系。
super()
方法实际上调用了父类的构造函数，并在子类的构造函数中设置了
this
上下文。
以上就是JS原型链是什么原理的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1515578.html
微信扫一扫 
支付宝扫一扫 
