JS原型链机制解析与应用

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《JS原型链工作原理详解》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

原型链是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）的内部链接，这个原型对象也有自己的原型，以此类推，形成一个链条，这就是原型链。

具体来说：

1. __proto__ 和 prototype: 每个 JavaScript 对象（除了 null）都有一个 __proto__ 属性，指向创建它的构造函数的 prototype 属性指向的对象。 而函数对象比较特殊，它除了拥有 __proto__ 属性之外，还拥有 prototype 属性。
2. 构造函数: 当使用 new 关键字调用一个函数时，这个函数就成为了构造函数。 构造函数的作用是创建新的对象，并且会将新对象的 __proto__ 属性指向构造函数的 prototype 属性指向的对象。
3. 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() 方法，于是执行该方法。

原型链的查找过程

当访问一个对象的属性时，JavaScript 引擎会按照以下步骤查找：

1. 先在对象自身查找该属性。
2. 如果对象自身没有该属性，则沿着 __proto__ 向上查找，即在其原型对象中查找。
3. 如果原型对象中仍然没有该属性，则继续沿着原型对象的 __proto__ 向上查找，直到找到该属性或者到达原型链的顶端（null）。
4. 如果在原型链的顶端仍然没有找到该属性，则返回 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 上下文。

今天关于《JS原型链机制解析与应用》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于继承,JS原型链,prototype,__proto__,原型链污染的内容请关注golang学习网公众号！