🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

引言

在 JavaScript 中，prototype 属性是一个核心概念，它与 JavaScript 的继承机制、原型链密切相关。JavaScript 是一种基于原型的语言，与传统的基于类的面向对象语言有所不同，prototype 属性在实现对象之间的继承和共享属性、方法方面发挥着至关重要的作用。本文将深入探讨函数的 prototype 属性，包括其基本概念、工作原理、实际应用以及与继承的关系。

prototype 属性的基本概念

在 JavaScript 中，每个函数都有一个 prototype 属性，这个属性是一个对象，被称为该函数的原型对象。当使用 new 关键字调用一个函数（即作为构造函数）创建对象时，新创建的对象会继承构造函数 prototype 属性上的所有属性和方法。

示例代码

// 定义一个构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 在 Person 函数的 prototype 属性上添加方法
Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
};

// 使用构造函数创建对象
const person1 = new Person('John', 30);
const person2 = new Person('Jane', 25);

// 调用继承的方法
person1.sayHello(); // 输出: Hello, my name is John and I'm 30 years old.
person2.sayHello(); // 输出: Hello, my name is Jane and I'm 25 years old.

在上述代码中，Person 是一个构造函数，通过 Person.prototype.sayHello 为其原型对象添加了一个 sayHello 方法。当使用 new Person() 创建 person1 和 person2 对象时，这两个对象都继承了 sayHello 方法。

prototype 属性的工作原理

原型链

当访问一个对象的属性或方法时，JavaScript 引擎首先会在该对象本身查找，如果找不到，就会沿着该对象的原型链向上查找。每个对象都有一个内部属性 [[Prototype]]（在浏览器中可以通过 __proto__ 属性访问），它指向该对象的原型对象。而原型对象也有自己的原型对象，以此类推，直到找到该属性或方法，或者到达原型链的末尾（即 Object.prototype）。

示例代码

function Animal() {
    this.type = 'Animal';
}

Animal.prototype.getInfo = function() {
    console.log(`This is a ${this.type}.`);
};

function Dog() {
    this.breed = 'Labrador';
}

// 设置 Dog 的原型为 Animal 的实例
Dog.prototype = new Animal();

const dog = new Dog();

// 访问 Dog 实例本身的属性
console.log(dog.breed); // 输出: Labrador

// 访问继承自 Animal 原型的属性和方法
console.log(dog.type); // 输出: Animal
dog.getInfo(); // 输出: This is a Animal.

在这个例子中，Dog 函数的原型被设置为 Animal 的一个实例，因此 dog 对象可以通过原型链访问到 Animal 原型上的 getInfo 方法和 type 属性。

prototype 属性的实际应用

实现继承

通过修改函数的 prototype 属性，可以实现对象之间的继承。如上述 Animal 和 Dog 的例子，Dog 对象继承了 Animal 对象的属性和方法。这种继承方式被称为原型继承，是 JavaScript 中实现继承的一种常见方式。

共享属性和方法

使用 prototype 属性可以让多个对象共享相同的属性和方法，避免在每个对象中重复定义相同的代码，从而节省内存。例如，在 Person 构造函数的原型上定义 sayHello 方法，所有通过 Person 构造函数创建的对象都可以共享这个方法。

扩展内置对象

可以通过修改内置对象（如 Array、String 等）的 prototype 属性来扩展其功能。例如：

// 为 Array 原型添加一个新方法
Array.prototype.sum = function() {
    return this.reduce((acc, val) => acc + val, 0);
};

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.sum()); // 输出: 15

在这个例子中，为 Array 原型添加了一个 sum 方法，所有的数组对象都可以使用这个方法。

prototype 属性与 class 关键字

ES6 引入了 class 关键字，使得 JavaScript 中的类和继承的语法更加接近传统的面向对象语言。但实际上，class 只是一个语法糖，底层仍然是基于原型的实现。

示例代码

// 使用 class 关键字定义类
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}

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

上述代码使用 class 关键字定义了一个 Person 类，实际上 Person 仍然是一个函数，其 prototype 属性包含了 sayHello 方法。

总结

函数的 prototype 属性是 JavaScript 中实现继承和共享属性、方法的核心机制。通过原型链，对象可以继承其原型对象上的属性和方法，从而实现代码的复用和扩展。理解 prototype 属性的工作原理和应用场景，对于编写高效、可维护的 JavaScript 代码至关重要。同时，虽然 ES6 引入了 class 关键字，但 prototype 属性仍然是 JavaScript 面向对象编程的基础。