1. 引入对象的概念
首先,用生活中的实例来解释什么是对象。比如,把 “汽车” 当作一个对象,它有颜色、品牌、型号等属性,还有启动、停止等功能。在 JavaScript 里,也可以创建这样的对象,像下面的代码:
let car = {
color: "红色",
brand: "比亚迪",
start: function() {
console.log("汽车启动了");
}
};
这里,car 就是一个对象,它有 color、brand 属性和 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 原型对象有一个初步的理解。