一文详解JavaScript原型&原型链

2023-12-31 22:09:46

前言

在JavaScript中，原型和原型链是一个非常重要的概念。理解了原型和原型链，我们才能更好地理解JavaScript面向对象编程的实现方式。

什么是原型

在JavaScript中，每个对象都有一个原型，原型是一个特殊的对象，它包含了该对象的所有属性和方法。当我们访问一个对象的属性或方法时，JavaScript会首先在该对象中查找，如果没有找到，则会沿着原型链向上查找，直到找到该属性或方法为止。

原型链是如何工作的

原型链是一个从子对象指向父对象的对象链。当我们访问一个对象的属性或方法时，JavaScript会首先在该对象中查找，如果没有找到，则会沿着原型链向上查找，直到找到该属性或方法为止。这个过程称为原型链查找。

原型链的查找顺序如下：

在对象自身中查找。
在对象的原型中查找。
在对象的原型的原型中查找。
以此类推，直到找到该属性或方法为止。

如果在原型链中找不到该属性或方法，则会返回undefined。

原型继承

在JavaScript中，原型继承是一种通过原型链来实现继承的方式。当一个子对象继承父对象时，子对象的原型会被设置为父对象的实例。这样，子对象就可以访问父对象的所有属性和方法。

原型继承的语法如下：

function Parent() {
  this.name = "父对象";
}

Parent.prototype.sayHello = function() {
  console.log("我是父对象，我的名字是" + this.name);
};

function Child() {
  this.name = "子对象";
}

Child.prototype = new Parent();

const child = new Child();

child.sayHello(); // 输出：我是父对象，我的名字是子对象

在上面的例子中，Child继承了Parent，所以Child对象的原型被设置为Parent对象的实例。这样，Child对象就可以访问Parent对象的所有属性和方法。

原型污染

原型污染是指修改对象的原型，从而影响所有继承该对象的子对象。原型污染可能导致安全问题，因此在使用原型继承时需要注意。

原型污染的例子如下：

function Person() {
  this.name = "张三";
}

Person.prototype.sayHello = function() {
  console.log("我是" + this.name);
};

const attacker = {
  constructor: Person,
  name: "攻击者",
  sayHello: function() {
    console.log("我是攻击者，我的名字是" + this.name);
  }
};

Person.prototype = attacker;

const victim = new Person();

victim.sayHello(); // 输出：我是攻击者，我的名字是攻击者

在上面的例子中，攻击者对象修改了Person对象的原型，从而影响了所有继承Person对象的子对象。当victim对象调用sayHello方法时，输出的是攻击者的名字，而不是自己的名字。

原型委托

原型委托是指子对象将属性和方法的查找委托给原型对象。原型委托可以提高代码的复用性，并减少内存消耗。

原型委托的例子如下：

function Person() {
  this.name = "张三";
}

Person.prototype.sayHello = function() {
  console.log("我是" + this.name);
};

function Student() {
  this.school = "清华大学";
}

Student.prototype = new Person();

const student = new Student();

student.sayHello(); // 输出：我是张三

console.log(student.school); // 输出：清华大学