如何给小学生讲明白 js 原型对象

80 阅读2分钟

1. 引入对象的概念

首先,用生活中的实例来解释什么是对象。比如,把 “汽车” 当作一个对象,它有颜色、品牌、型号等属性,还有启动、停止等功能。在 JavaScript 里,也可以创建这样的对象,像下面的代码:

let car = {
    color: "红色",
    brand: "比亚迪",
    start: function() {
        console.log("汽车启动了");
    }
};

这里,car 就是一个对象,它有 colorbrand 属性和 start 方法。

2. 介绍模板和实例

可以把对象的创建想象成制作蛋糕。蛋糕店有一个蛋糕模具,这个模具就是模板,按照这个模具做出来的一个个蛋糕就是实例。在 JavaScript 中,构造函数就像是模具,通过构造函数创建的对象就是实例。

function Car(color, brand) {
    this.color = color;
    this.brand = brand;
    this.start = function() {
        console.log("汽车启动了");
    };
}

let myCar = new Car("蓝色", "吉利");

这里,Car 是构造函数,就像蛋糕模具;myCar 是通过 Car 构造函数创建的对象,就像用模具做出来的蛋糕。

3. 引出原型对象

现在,每个用 Car 构造函数创建的汽车对象都有自己的 start 方法。如果有很多汽车对象,就会占用很多内存,就像每个蛋糕都自带一个制作说明一样,有些浪费。

JavaScript 提供了一种办法,把公共的属性和方法放在一个地方,这个地方就是原型对象。可以想象原型对象是一个共享的仓库,所有通过同一个构造函数创建的对象都可以从这个仓库里拿东西。

function Car(color, brand) {
    this.color = color;
    this.brand = brand;
}

Car.prototype.start = function() {
    console.log("汽车启动了");
};

let myCar = new Car("蓝色", "吉利");
myCar.start();

在这个例子中,Car.prototype 就是原型对象,把 start 方法放到了原型对象中。当调用 myCar.start() 时,JavaScript 会先在 myCar 对象本身找 start 方法,如果没找到,就会去它的原型对象里找。

4. 原型链

可以进一步说明,原型对象本身也是一个对象,它也有自己的原型对象,以此类推,形成了一个链条,这就是原型链。当访问一个对象的属性或方法时,JavaScript 会先在对象本身找,如果没找到,就会沿着原型链一直往上找,直到找到或者到了原型链的尽头。

通过这些形象的比喻和简单的代码示例,小学生应该能对 JavaScript 原型对象有一个初步的理解。