举例说明JavaScript中的实例对象与原型对象

让我来详细讲解一下JavaScript中的实例对象与原型对象。

什么是实例对象？

在JavaScript中，每当我们使用构造函数创建一个新对象时，就会创建一个实例对象。实例对象是该构造函数的一个新实例，它将继承构造函数的所有属性和方法，并且可以根据需要添加新的属性和方法。

以下是创建一个实例对象的示例代码：

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

// 新实例对象
var person1 = new Person("张三", 18);

在上面的代码中，我们首先定义了一个构造函数Person，然后使用new关键字创建了一个名为person1的实例对象。现在，person1对象具有 name和age属性及与其相对应的值。

什么是原型对象？

原型对象是用来存储构造函数的属性和方法，并且每个实例对象都可以访问原型对象上的属性和方法。通过原型对象，我们可以将相同的属性和方法添加到所有实例对象中，从而节省内存空间。可以将原型对象看作是一个公共的存储区域，所有同一类型的实例对象都可以在这里获取所需的属性和方法。

以下是原型对象的示例代码：

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

// 添加原型对象属性和方法
Person.prototype.sayHello = function() {
  console.log("我的名字是 " + this.name + "，今年 " + this.age + " 岁。");
};

// 创建实例对象
var person1 = new Person("张三", 18);
var person2 = new Person("李四", 20);

// 调用原型对象方法
person1.sayHello(); //输出：我的名字是 张三，今年 18 岁。
person2.sayHello(); //输出：我的名字是 李四，今年 20 岁。

在上面的代码中，我们通过将方法添加到构造函数的原型对象中，实现了将相同的方法添加到所有实例对象中的目的。当我们调用实例对象中不存在的方法时，JavaScript会自动查找原型对象并调用其方法。

示例说明

为了更好地理解实例对象和原型对象的作用，我们来看两个常用的示例。

示例一：使用原型对象共享方法

我们创建一个Animal类，该类具有name属性和一个返回该属性值的getName()方法。我们将getName()方法添加到构造函数的原型对象中，以便将其共享给所有Animal类的实例对象。

// 构造函数
function Animal(name) {
  this.name = name;
}

// 添加原型对象属性和方法
Animal.prototype.getName = function() {
  return this.name;
}

// 创建实例对象
var dog = new Animal("旺财");
var cat = new Animal("小猫");

// 调用实例方法
console.log(dog.getName()); // 输出：旺财
console.log(cat.getName()); // 输出：小猫

示例二：动态添加原型对象方法

我们创建一个Shape类，该类具有color属性和一个返回该属性值的getColor()方法。在这个示例中，我们将向构造函数的原型对象中动态添加新的方法，以便在使用Shape类时根据需要添加新的方法。

// 构造函数
function Shape(color) {
  this.color = color;
}

// 动态添加原型对象方法
Shape.prototype.showColor = function() {
  console.log("这个图形的颜色是 " + this.color);
};

// 创建实例对象
var circle = new Shape("red");
var rectangle = new Shape("blue");

// 调用实例方法
circle.showColor(); // 输出：这个图形的颜色是 red
rectangle.showColor(); // 输出：这个图形的颜色是 blue

在上面的示例中，我们创建了一个Shape类，并将方法showColor()添加到构造函数的原型对象中。通过这种方式，我们可以动态添加新的方法，而不需要修改构造函数中的代码。

这就是实例对象和原型对象的完整攻略，希望能对你有所帮助。