JavaScript原型|极客笔记

JavaScript原型

JavaScript是一种面向对象的编程语言，它的原型链是一种非常重要的概念。理解原型链可以帮助我们更加深入地了解JavaScript的继承和对象之间的关系。在本文中，我们将详细介绍JavaScript的原型以及如何使用原型链来实现对象之间的继承。

1. 什么是原型？

在JavaScript中，每个对象都有一个指向另一个对象的引用，这个对象就是原型（prototype）。原型是一个普通对象，它包含可以被继承的属性和方法。当我们访问一个对象的属性或方法时，JavaScript引擎会先查找这个对象本身是否有这个属性或方法，如果没有，就会去它的原型中查找，如果原型中也没有，则继续沿着原型链向上查找，直到找到为止。

2. 创建对象的方法

在JavaScript中，有多种方法可以创建对象。

2.1 使用字面量方式创建对象

我们可以使用字面量方式创建对象，示例代码如下：

let person = {
    name: 'Alice',
    age: 30,
    greet() {
        console.log(`Hello, my name is ${this.name}.`);
    }
};

person.greet(); // 输出：Hello, my name is Alice.

2.2 使用构造函数创建对象

我们也可以使用构造函数来创建对象，示例代码如下：

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

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

let person = new Person('Bob', 25);
person.greet(); // 输出：Hello, my name is Bob.

3. 原型链

每个JavaScript对象都有一个原型，而原型本身也是一个对象，因此它也有自己的原型，以此类推，就形成了一个原型链。通过原型链，JavaScript实现了对象之间的继承。

3.1 `proto` 属性

在JavaScript中，每个对象都有一个 __proto__ 属性，它指向该对象的原型。我们可以通过这个属性来访问对象的原型。示例代码如下：

let person = {
    name: 'Alice',
    age: 30,
    greet() {
        console.log(`Hello, my name is ${this.name}.`);
    }
};

let student = {
    grade: 90
};

student.__proto__ = person;

student.greet(); // 输出：Hello, my name is Alice.

3.2 `prototype` 属性

在JavaScript中，每个函数都有一个 prototype 属性，它指向一个对象，这个对象就是函数的原型。当我们使用 new 关键字来创建一个实例时，这个实例的原型会指向这个函数的 prototype 属性。示例代码如下：

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

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

let person = new Person('Bob', 25);
person.greet(); // 输出：Hello, my name is Bob.

在上面的示例中，person 对象的原型指向了 Person.prototype。

4. 继承

通过原型链，我们可以实现对象之间的继承。子对象可以继承父对象的属性和方法。

4.1 原型继承

我们可以通过设置子对象的原型为父对象来实现原型继承。示例代码如下：

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

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

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

Student.prototype = new Person();

let student = new Student('Alice', 20, 90);
student.greet(); // 输出：Hello, my name is Alice.

在上面的示例中，Student 对象继承了 Person 对象的 greet 方法。

4.2 原型链继承

原型链继承是通过设置子对象的原型为父对象的实例来实现的。示例代码如下：

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

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

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

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

let student = new Student('Bob', 25, 80);
student.greet(); // 输出：Hello, my name is Bob.

通过原型链继承，Student 对象继承了 Person 对象的 greet 方法。