JavaScript prototype 属性

在 JavaScript 中，每个函数都有一个 prototype 属性，这个属性是一个指向原型对象的指针。原型对象是一个普通的对象，包含可以被特定类型的所有实例共享的属性和方法。

为什么要使用 prototype 属性

使用 prototype 属性可以节省内存，因为所有实例对象共享原型对象的属性和方法，而不是每个实例对象都复制一份。这样可以使代码更加高效，同时也方便对原型对象进行统一的修改和扩展。

如何使用 prototype 属性

1. 在构造函数中定义原型方法

// www.javascriptcn.com code example
function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const john = new Person('John', 30);
john.sayHello(); // 输出：Hello, my name is John and I am 30 years old.

在上面的例子中，我们在 Person 构造函数的原型对象上定义了一个 sayHello 方法，所有通过 Person 构造函数创建的实例对象都可以访问并调用这个方法。

2. 继承属性和方法

// www.javascriptcn.com code example
function Student(name, age, grade) {
    Person.call(this, name, age);
    this.grade = grade;
}

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

Student.prototype.sayGrade = function() {
    console.log(`I am in grade ${this.grade}.`);
};

const jane = new Student('Jane', 25, 10);
jane.sayHello(); // 输出：Hello, my name is Jane and I am 25 years old.
jane.sayGrade(); // 输出：I am in grade 10.

在上面的例子中，我们定义了一个 Student 构造函数，它继承了 Person 构造函数的属性和方法，并且在原型对象上定义了一个 sayGrade 方法。

3. 原型链

在 JavaScript 中，每个对象都有一个 __proto__ 属性，指向它的原型对象。如果一个对象的原型对象还有自己的原型对象，那么这个对象就可以访问链上所有原型对象的属性和方法。

const obj = {};
console.log(obj.__proto__ === Object.prototype); // 输出：true
console.log(Object.prototype.__proto__ === null); // 输出：true

在上面的例子中，obj 对象的原型对象是 Object.prototype，而 Object.prototype 的原型对象是 null，这样就形成了一个原型链。

总结

JavaScript 的 prototype 属性是实现继承和共享属性和方法的重要机制。通过合理地使用原型对象，我们可以写出更加高效和灵活的代码。希望本文对你有所帮助，谢谢阅读！