JS构造函数共享原型的三种方法

从现在开始，努力学习吧！本文《JS构造函数共享原型的方法》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

让JavaScript构造函数共享原型的关键是将多个构造函数的prototype属性指向同一对象，从而实现方法和属性的共享，节省内存；2. 可通过直接赋值sharedPrototype或让一个构造函数的prototype指向另一个构造函数的prototype来实现，但需注意实例不会继承构造函数内部的属性；3. 判断对象是否为某构造函数实例可用instanceof或Object.getPrototypeOf()，但instanceof在跨window或frame时可能失效；4. 原型链污染指恶意修改原型导致所有继承对象受影响，可通过避免修改全局原型、使用Object.create(null)、Object.freeze()、输入验证等方式防范；5. 原型链通过对象的__proto__或Object.getPrototypeOf()向上查找属性，实现继承，使用Object.create(Animal.prototype)可安全继承并需修正constructor指向。

让JavaScript构造函数共享原型，关键在于理解原型链的运作方式。简单来说，就是让多个构造函数的 prototype 属性指向同一个对象，这样它们创建的实例就能共享这个对象上的属性和方法。

解决方案：

直接将多个构造函数的 prototype 属性设置为同一个对象。这个对象可以是一个预先定义好的空对象，也可以是其中一个构造函数的实例。

function ConstructorA() {}
function ConstructorB() {}

// 创建一个共享的原型对象
const sharedPrototype = {};

ConstructorA.prototype = sharedPrototype;
ConstructorB.prototype = sharedPrototype;

// 现在 ConstructorA 和 ConstructorB 的实例共享同一个原型
const instanceA = new ConstructorA();
const instanceB = new ConstructorB();

instanceA.__proto__ === instanceB.__proto__ // true

如果已经有一个构造函数，并且你想让其他构造函数共享它的原型，你可以这样做：

function ConstructorA() {
  this.propertyA = 'A';
}

ConstructorA.prototype.methodA = function() {
  return 'Method A';
};

function ConstructorB() {}

// 让 ConstructorB 的原型指向 ConstructorA 的原型
ConstructorB.prototype = ConstructorA.prototype;

const instanceB = new ConstructorB();
instanceB.methodA(); // "Method A"
instanceB.propertyA; // undefined

// 注意：这样 ConstructorB 的实例也可以访问 ConstructorA 原型上的方法，
// 但 ConstructorB 的实例不会继承 ConstructorA 构造函数内部的属性。

这样做的好处是节省内存，避免在每个实例上都创建相同的方法。缺点是如果修改了共享原型上的属性或方法，所有共享该原型的实例都会受到影响。

如何判断一个对象是否是某个构造函数的实例？

使用 instanceof 操作符或者 Object.getPrototypeOf() 方法。instanceof 检查对象是否在其原型链上存在构造函数的 prototype 属性。Object.getPrototypeOf() 返回对象的原型对象，可以用来比较原型对象是否相同。

function MyConstructor() {}
const myInstance = new MyConstructor();

myInstance instanceof MyConstructor; // true
Object.getPrototypeOf(myInstance) === MyConstructor.prototype; // true

但要注意，instanceof 在跨 frame 或跨 window 的情况下可能会失效，因为不同的 frame 或 window 有不同的全局环境和构造函数。

原型链污染是什么？如何避免？

原型链污染是指恶意修改对象的原型，导致所有继承该原型的对象都受到影响。这可能导致安全漏洞，例如攻击者可以修改 Object.prototype，从而影响所有 JavaScript 对象。

避免原型链污染的方法：

1. 避免直接修改 Object.prototype 或其他全局对象的原型。 尽量使用局部变量或对象来存储数据。
2. 使用 Object.create(null) 创建没有原型的对象。 这样创建的对象不会继承任何属性或方法，从而避免原型链污染。
3. 使用 Object.freeze() 或 Object.seal() 冻结或密封对象。 冻结的对象不能修改，密封的对象不能添加或删除属性。
4. 对用户输入进行验证和过滤。 避免用户输入的数据被用于修改原型。
5. 使用最新的 JavaScript 引擎和库。 较新的引擎和库通常会修复已知的原型链污染漏洞。

例如，假设有一个对象 user，你想确保它的属性不会被修改：

const user = {
  name: 'Alice',
  age: 30
};

Object.freeze(user);

user.age = 31; // 严格模式下会抛出错误，非严格模式下修改无效

原型链是如何工作的？

原型链是 JavaScript 中实现继承的一种机制。每个对象都有一个原型对象，可以通过 __proto__ 属性（或者 Object.getPrototypeOf() 方法）访问。当访问一个对象的属性时，如果该对象本身没有这个属性，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或者到达原型链的顶端（null）。

举个例子：

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayHello = function() {
  return `Hello, I'm ${this.name}`;
};

function Dog(name, breed) {
  Animal.call(this, name); // 调用 Animal 构造函数，继承 name 属性
  this.breed = breed;
}

// 设置 Dog 的原型为 Animal 的实例
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 修正 constructor 属性

Dog.prototype.bark = function() {
  return 'Woof!';
};

const myDog = new Dog('Buddy', 'Golden Retriever');

myDog.bark(); // "Woof!"
myDog.sayHello(); // "Hello, I'm Buddy"
myDog.name; // "Buddy"

在这个例子中，Dog 的实例 myDog 可以访问 Dog 自身定义的 bark 方法，以及 Animal 原型上的 sayHello 方法和 name 属性。这就是原型链的作用。Object.create(Animal.prototype) 的作用是创建一个新的对象，并将它的原型设置为 Animal.prototype，这样可以避免直接修改 Animal.prototype。同时，需要修正 Dog.prototype.constructor 属性，使其指向 Dog 构造函数。如果不修正，Dog.prototype.constructor 会指向 Animal 构造函数，这可能会导致一些问题。

今天关于《JS构造函数共享原型的三种方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于原型链,原型,原型链污染,JS构造函数,共享原型的内容请关注golang学习网公众号！