JS函数进阶之prototy用法实例分析

2023年5月28日上午9:44 • JavaScript

下面我详细讲解一下 "JS函数进阶之prototype用法实例分析" 的完整攻略。

1. 什么是JS中的prototype

在JavaScript中，每个函数都有一个prototype属性，它是函数构造器的原型对象，也是通过构造器创建的对象的原型。这个原型对象是一个普通对象，其中包含一些方法和属性，它们可以被构造器所创建的所有实例对象所共享。

2. prototype的作用

a. 模拟类的概念

在JS中没有“类”的概念，但是我们可以使用prototype来实现类似的功能。例如，我们可以定义一个Person构造函数，然后通过Person的prototype属性为该构造函数添加公共方法和属性，这样在创建Person的实例时，这些公共方法和属性会被继承到它们的实例中。

示例代码：

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

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

var p1 = new Person("Tom", 18);
p1.sayHello(); // 输出 "Hi, my name is Tom, I'm 18 years old."

上面的代码中，我们为Person构造函数的prototype属性添加了一个方法sayHello，这个方法可以在Person创建的所有实例中都可以访问到。

b. 减少内存占用

由于JS中每个实例对象都会保存一份自己的属性和方法的副本，所以如果某个对象的方法或属性是可以被所有实例共享的，那么就可以将这些方法和属性放到该对象的原型中，也就是prototype中。这样一来，所有实例都可以访问到这些公共方法和属性，从而减少了内存占用。

示例代码：

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

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

var p1 = new Person("Tom", 18);
var p2 = new Person("Jerry", 20);

console.log(p1.sayHello === p2.sayHello); // 输出 "true"

上面的代码中，p1和p2都是Person的实例，它们共享了Person的prototype中的sayHello方法，所以这个方法只会存在于内存中的一个副本。

3. 实例分析

下面我们通过一个例子来证明prototype的优势：

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

var p1 = new Person("Tom");
var p2 = new Person("Jerry");

console.log(p1.sayHello === p2.sayHello); // 输出 "false"

上面的例子中，我们给Person构造函数定义了一个sayHello方法，用于输出该Person对象的name属性。但是，在创建p1和p2的过程中，sayHello方法是两个独立的副本，每个实例都会保存一份，这样就会占用大量的内存，导致代码的性能不佳。

现在我们使用prototype来定义sayHello方法：

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

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

var p1 = new Person("Tom");
var p2 = new Person("Jerry");

console.log(p1.sayHello === p2.sayHello); // 输出 "true"

上面的代码中，我们把sayHello方法定义到了Person的prototype中，这样它就会被所有Person实例所共享。这样不仅减少了内存的占用，还提高了代码的执行效率。