原型链是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); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__ === null); // true在这个例子中：
john
对象的__proto__
指向Person.prototype
。Person.prototype
对象的__proto__
指向Object.prototype
。Object.prototype
对象的__proto__
指向null
。
所以，当
john对象调用
greet()方法时，它首先在自身查找，没有找到，然后沿着原型链向上查找，在
Person.prototype中找到了
greet()方法，于是执行该方法。
原型链的查找过程
本系统使用的是XDcms内核，在原来基础上做来相应修改 前台修改调用数据，可以使用{loop catid=栏目ID}{/loop}方式调用 主要功能： A、内容管理模型，自定义字段，更方便扩展功能。自带模型：单页模型、新闻模型、产品模型、招聘模型 B、栏目自定义，便于内容管理 C、内容模块化，二次开发更便捷。自带模块：幻灯片、QQ客服、友情链接、自定义表单(在线留言、简历管理) D、模板管理，后台
当访问一个对象的属性时，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语法糖是 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); // true
console.log(Dog.prototype.__proto__ === Animal.prototype); // true在这个例子中，
Dog类继承自
Animal类。 虽然我们使用了
class语法，但实际上
Dog.prototype的
__proto__仍然指向
Animal.prototype，这体现了原型链的继承关系。
super()方法实际上调用了父类的构造函数，并在子类的构造函数中设置了
this上下文。
