javascript 面向对象的经典实例代码

作为一个网站的作者，我很高兴地分享并讲解“JavaScript 面向对象的经典实例代码”的攻略。在本篇攻略中，我将重点讲解 JavaScript 面向对象编程中的几个关键概念、JavaScript 中的类、对象创建、继承等主题，并且会结合实例代码进行说明。

面向对象编程的关键概念

面向对象编程的一个关键概念是“类”，类是一组具有相同特性和行为的对象的抽象描述，它描述的是具有相同特征和行为的一类对象。例如，有一个类叫“狗”，它描述的是所有狗具有的特征（比如颜色、体型、品种等）和行为（比如吠叫、跑步、嗅探等）。

另外一个关键概念是“对象”，对象是类的一个实例，一个类可以创建多个对象。例如，一个“狗”类可以创建多个“狗”对象，每个对象具有自己的特征和行为。例如，有一只狗叫“汪汪”，它的颜色是黄色，品种是金毛犬，它可以吠叫、游泳、跑步等行为。

面向对象编程的另一个关键概念是“继承”，继承指的是一个类可以从另一个类继承特性和行为。例如，一个“金毛犬”类可以继承“狗”类的特性和行为，但是金毛犬同时还具有自己的特性和行为。

JavaScript 中的类

JavaScript 中没有类似于 Java 或 C++ 中的类的概念，但是可以使用构造函数和原型来实现类似的功能。

构造函数是一个 JavaScript 函数，用于创建对象时进行初始化操作，我们可以在构造函数中定义属性和方法，以及通过“this”关键字来指定属性和方法从哪个对象中调用。

原型是一个 JavaScript 对象，它定义了对象的共享属性和方法，原型上的属性和方法会被构造函数创建的所有对象共享。

例如，以下是一个构造函数和它的原型的示例代码：

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

Dog.prototype.bark = function() {
  console.log('汪汪！');
};

Dog.prototype.run = function() {
  console.log('狗狗正在奔跑！');
};

在这个例子中，我们定义了一个“Dog”构造函数，它接受三个参数（名字、品种和年龄），并且在构造函数中使用“this”关键字定义了对象的属性。另外，我们定义了“bark”和“run”两个方法，并且将它们添加到原型上。这意味着，通过“Dog”构造函数创建的所有对象都可以访问“bark”和“run”方法。

对象创建

我们可以使用“new”关键字和构造函数来创建一个对象，在创建对象时，我们可以向构造函数传递参数，以初始化对象的属性。

例如，以下是使用“Dog”构造函数创建一个对象的示例代码：

var myDog = new Dog('汪汪', '金毛犬', 5);

在这个例子中，我们使用“Dog”构造函数创建了一个名为“myDog”的对象，它有一个名字叫“汪汪”，品种是“金毛犬”，年龄是“5”。

我们可以通过点号（“.”）或方括号（“[]”）语法来访问对象的属性和方法。例如：

console.log(myDog.name); // 输出：汪汪
console.log(myDog.breed); // 输出：金毛犬
myDog.bark(); // 输出：汪汪！
myDog.run(); // 输出：狗狗正在奔跑！

在这个例子中，我们使用点号和方括号语法来访问对象“myDog”的属性和方法。

继承

在 JavaScript 中实现继承的一种方式是通过原型链实现。通过将一个类的原型设置为另一个类的实例，我们可以使一个类继承另一个类的所有特性和方法。

例如，以下是一个“Husky（哈士奇）”类继承自“Dog”类的示例代码：

function Husky(name, age) {
  this.name = name;
  this.age = age;
  this.breed = '哈士奇';
}

Husky.prototype = new Dog();

Husky.prototype.mush = function() {
  console.log('Husky正在拉雪橇！');
};

在这个例子中，我们定义了一个“Husky”构造函数，并且在构造函数中设置了特有的属性。另外，我们将“Husky”类的原型设置为“Dog”类的实例，这意味着“Husky”类继承了“Dog”类的所有特性和方法。最后，我们定义了“mush”方法，并添加到“Husky”类的原型上。

现在，我们可以使用“Husky”构造函数创建“Husky”对象，并且调用“Husky”和从“Dog”类继承的方法：

var myHusky = new Husky('达达', 3);
myHusky.bark(); // 输出：汪汪！
myHusky.run(); // 输出：狗狗正在奔跑！
myHusky.mush(); // 输出：Husky正在拉雪橇！
console.log(myHusky.breed); // 输出：哈士奇
console.log(myHusky.name); // 输出：达达
console.log(myHusky.age); // 输出：3

在这个例子中，我们创建了一个名为“myHusky”的对象，它是通过“Husky”构造函数创建的。我们调用了“bark”和“run”方法，这两个方法是从“Dog”类继承过来的。另外，我们调用了“mush”方法，这个方法是“Husky”类特有的。最后，我们访问了对象的属性：“breed”是“Husky”类的特有属性，“name”和“age”是从“Dog”类继承过来的。

示例说明

以下是使用上述代码创建对象的两个示例说明。

示例 1

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

Dog.prototype.bark = function() {
  console.log('汪汪！');
};

Dog.prototype.run = function() {
  console.log('狗狗正在奔跑！');
};

var myDog = new Dog('汪汪', '金毛犬', 5);
console.log(myDog.name); // 输出：汪汪
console.log(myDog.breed); // 输出：金毛犬
myDog.bark(); // 输出：汪汪！
myDog.run(); // 输出：狗狗正在奔跑！

这个示例创建了一个“Dog”对象，对象的属性是“name”、“breed”和“age”，并且有两个方法：“bark”和“run”。

示例 2

function Husky(name, age) {
  this.name = name;
  this.age = age;
  this.breed = '哈士奇';
}

Husky.prototype = new Dog();

Husky.prototype.mush = function() {
  console.log('Husky正在拉雪橇！');
};

var myHusky = new Husky('达达', 3);
myHusky.bark(); // 输出：汪汪！
myHusky.run(); // 输出：狗狗正在奔跑！
myHusky.mush(); // 输出：Husky正在拉雪橇！
console.log(myHusky.breed); // 输出：哈士奇
console.log(myHusky.name); // 输出：达达
console.log(myHusky.age); // 输出：3

这个示例使用“Husky”构造函数创建了一个“Husky”对象，对象的属性是“name”、“age”和“breed”，并且有三个方法：“bark”、“run”和“mush”。在创建对象时，我们设置了“Husky”类的原型为“Dog”类的实例，这意味着我们可以从“Dog”类继承方法和属性。最后，我们输出了“Husky”对象的属性和方法。