Javascript原型和原型链如何实现

目录

1. 引言
2. 原型的概念
3. 原型链的概念
4. 原型链的实现
5. 原型链的继承
6. 原型链的应用
7. 总结

引言

JavaScript 是一种基于原型的语言，这意味着它没有类的概念，而是通过原型链来实现继承和共享属性。理解原型和原型链是掌握 JavaScript 的关键之一。本文将深入探讨 JavaScript 中的原型和原型链，以及它们是如何实现的。

原型的概念

在 JavaScript 中，每个对象都有一个原型（prototype），原型是一个对象，它包含了一些属性和方法，这些属性和方法可以被其他对象继承。当我们访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或方法为止。

原型的创建

在 JavaScript 中，每个函数都有一个 prototype 属性，这个属性指向一个对象，这个对象就是该函数的原型。当我们使用 new 关键字创建一个实例时，这个实例的原型就是该函数的 prototype 属性所指向的对象。

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

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person('Alice');
person1.sayHello(); // 输出: Hello, my name is Alice

在上面的例子中，Person 函数的 prototype 属性指向一个对象，这个对象包含了一个 sayHello 方法。当我们创建一个 Person 的实例 person1 时，person1 的原型就是 Person.prototype，因此 person1 可以访问 sayHello 方法。

原型的继承

在 JavaScript 中，对象的原型可以通过 Object.create() 方法来指定。这个方法会创建一个新对象，并将这个新对象的原型设置为传入的对象。

const personPrototype = {
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const person1 = Object.create(personPrototype);
person1.name = 'Alice';
person1.sayHello(); // 输出: Hello, my name is Alice

在这个例子中，person1 的原型是 personPrototype，因此 person1 可以访问 personPrototype 中的 sayHello 方法。

原型链的概念

原型链是 JavaScript 中实现继承的机制。每个对象都有一个原型，而这个原型本身也是一个对象，因此它也有自己的原型。这样一层一层地向上追溯，就形成了一个链式结构，这就是原型链。

当我们访问一个对象的属性或方法时，JavaScript 引擎会首先在该对象本身查找，如果找不到，就会沿着原型链向上查找，直到找到该属性或方法为止，或者直到原型链的顶端（null）。

原型链的顶端

在 JavaScript 中，所有对象的原型链最终都会指向 Object.prototype，而 Object.prototype 的原型是 null。这意味着，如果我们访问一个对象的属性或方法，而该对象本身及其原型链上都没有这个属性或方法，那么最终会返回 undefined。

const obj = {};
console.log(obj.toString); // 输出: [Function: toString]
console.log(obj.nonExistentProperty); // 输出: undefined

在这个例子中，obj 本身没有 toString 方法，但它的原型 Object.prototype 有 toString 方法，因此 obj.toString 返回 [Function: toString]。而 obj.nonExistentProperty 在 obj 及其原型链上都找不到，因此返回 undefined。

原型链的实现

在 JavaScript 中，原型链的实现主要依赖于 __proto__ 属性和 Object.getPrototypeOf() 方法。

__proto__ 属性

__proto__ 是一个非标准的属性，但它被大多数现代浏览器支持。它指向对象的原型。我们可以通过 __proto__ 属性来访问或修改对象的原型。

const personPrototype = {
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const person1 = { name: 'Alice' };
person1.__proto__ = personPrototype;
person1.sayHello(); // 输出: Hello, my name is Alice

在这个例子中，我们通过 person1.__proto__ = personPrototype 将 person1 的原型设置为 personPrototype，因此 person1 可以访问 personPrototype 中的 sayHello 方法。

Object.getPrototypeOf() 方法

Object.getPrototypeOf() 是一个标准的方法，用于获取对象的原型。我们可以使用这个方法来获取对象的原型。

const personPrototype = {
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const person1 = Object.create(personPrototype);
person1.name = 'Alice';
console.log(Object.getPrototypeOf(person1) === personPrototype); // 输出: true

在这个例子中，我们使用 Object.create() 方法创建了一个新对象 person1，并将它的原型设置为 personPrototype。然后我们使用 Object.getPrototypeOf() 方法获取 person1 的原型，并验证它是否等于 personPrototype。

原型链的继承

在 JavaScript 中，原型链是实现继承的主要机制。通过原型链，我们可以让一个对象继承另一个对象的属性和方法。

构造函数继承

在 JavaScript 中，我们可以通过构造函数来实现继承。构造函数是一个普通的函数，当我们使用 new 关键字调用它时，它会创建一个新对象，并将这个新对象的原型设置为构造函数的 prototype 属性所指向的对象。

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

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

function Student(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

Student.prototype.sayGrade = function() {
  console.log(`My grade is ${this.grade}`);
};

const student1 = new Student('Alice', 'A');
student1.sayHello(); // 输出: Hello, my name is Alice
student1.sayGrade(); // 输出: My grade is A

在这个例子中，我们定义了一个 Person 构造函数和一个 Student 构造函数。Student 构造函数通过 Person.call(this, name) 调用了 Person 构造函数，从而继承了 Person 的属性。然后我们使用 Object.create(Person.prototype) 将 Student.prototype 的原型设置为 Person.prototype，从而继承了 Person 的方法。最后，我们为 Student.prototype 添加了一个新的方法 sayGrade。

类继承

在 ES6 中，JavaScript 引入了 class 关键字，使得继承的实现更加简洁和直观。class 关键字实际上是基于原型链的语法糖。

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }

  sayGrade() {
    console.log(`My grade is ${this.grade}`);
  }
}

const student1 = new Student('Alice', 'A');
student1.sayHello(); // 输出: Hello, my name is Alice
student1.sayGrade(); // 输出: My grade is A

在这个例子中，我们使用 class 关键字定义了 Person 类和 Student 类。Student 类通过 extends 关键字继承了 Person 类，并通过 super(name) 调用了 Person 类的构造函数。这样，Student 类就继承了 Person 类的属性和方法，并且可以添加自己的属性和方法。

原型链的应用

原型链在 JavaScript 中有广泛的应用，特别是在实现继承和共享属性方面。以下是一些常见的应用场景。

共享方法

通过原型链，我们可以将方法定义在原型上，从而让所有实例共享这些方法，而不是在每个实例中都创建一份方法的副本。这样可以节省内存，并提高性能。

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

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person('Alice');
const person2 = new Person('Bob');

person1.sayHello(); // 输出: Hello, my name is Alice
person2.sayHello(); // 输出: Hello, my name is Bob

console.log(person1.sayHello === person2.sayHello); // 输出: true

在这个例子中，sayHello 方法定义在 Person.prototype 上，因此 person1 和 person2 共享同一个 sayHello 方法。

动态添加方法

通过原型链，我们可以在运行时动态地添加方法，这些方法会立即对所有实例生效。

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

const person1 = new Person('Alice');
const person2 = new Person('Bob');

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

person1.sayHello(); // 输出: Hello, my name is Alice
person2.sayHello(); // 输出: Hello, my name is Bob

在这个例子中，我们在创建 person1 和 person2 之后，才为 Person.prototype 添加了 sayHello 方法。由于 person1 和 person2 的原型是 Person.prototype，因此它们可以立即访问 sayHello 方法。

修改原型链

通过修改原型链，我们可以改变对象的继承关系，从而实现动态继承。

const personPrototype = {
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const studentPrototype = {
  sayGrade() {
    console.log(`My grade is ${this.grade}`);
  }
};

const person1 = { name: 'Alice' };
person1.__proto__ = personPrototype;
person1.sayHello(); // 输出: Hello, my name is Alice

person1.__proto__ = studentPrototype;
person1.grade = 'A';
person1.sayGrade(); // 输出: My grade is A

在这个例子中，我们首先将 person1 的原型设置为 personPrototype，因此 person1 可以访问 sayHello 方法。然后我们将 person1 的原型修改为 studentPrototype，并为其添加了 grade 属性，因此 person1 可以访问 sayGrade 方法。

总结

JavaScript 中的原型和原型链是实现继承和共享属性的核心机制。通过原型链，我们可以让对象继承其他对象的属性和方法，并且可以在运行时动态地修改原型链。理解原型和原型链的工作原理，对于掌握 JavaScript 的面向对象编程至关重要。

在实际开发中，我们可以通过构造函数、Object.create() 方法、class 关键字等方式来实现原型链的继承。通过合理地使用原型链，我们可以编写出更加高效、灵活的代码。

希望本文能够帮助你更好地理解 JavaScript 中的原型和原型链，并在实际开发中灵活运用这些概念。