JavaScript 面向对象

JavaScript 是一门面向对象的编程语言，支持创建对象、继承和多态等特性。

1.对象基础

首先我们需要了解 JavaScript 中的对象。在 JavaScript 中，几乎所有东西都是对象。对象是一组无序的属性集合，每个属性都具有键和值。例如：

1
2
3
4
5
6
7
8
9
10
var obj = {
	name: "张三",
	age: 20,
	sayHello: function () {
		console.log("Hello!");
	}
};

console.log(obj.name); // 输出 "张三"
obj.sayHello(); // 调用 sayHello 方法，输出 "Hello!"

上述代码定义了一个对象 obj，包含了名字、年龄和方法 sayHello。我们可以使用 . 运算符获取对象的属性值，或者直接调用对象方法。

2.对象构造函数

通过构造函数创建对象是一种常见的面向对象方式，在 JavaScript 中也可以类比 Java 中的类。

1
2
3
4
5
6
7
8
9
10
11
function Person(name, age) {
	this.name = name;
	this.age = age;

	this.sayHello = function () {
		return "Hello, I'm " + this.name;
	};
}

var p1 = new Person("张三", 20);
console.log(p1.sayHello()); // 输出 "Hello, I'm 张三"

上述代码定义了一个 Person 构造函数，构造函数有两个参数： name 和 age。在构造函数中，通过 this 关键字来指代类似于 Java 中的 this，使用 . 运算符给对象添加成员属性和方法。最后通过 new 操作符创建一个 Person 类的实例对象。

3.原型链

在 JavaScript 中，每个对象都有一个内部私有属性 [[prototype]]，指向其原型。原型本质上也是一个对象，如果在原型中定义了某个方法或属性，则所有实例对象都可以继承它并调用它。

1
2
3
4
5
6
7
8
9
10
11
function Person(name, age) {
	this.name = name;
	this.age = age;
}

Person.prototype.sayHello = function () {
	return "Hello, I'm " + this.name;
};

var p1 = new Person("张三", 20);
console.log(p1.sayHello()); // 输出 "Hello, I'm 张三"

上述代码通过在 Person 构造函数的原型对象上定义了成员方法 sayHello。这样，所有使用 new 操作符创建出来的 Person 实例对象都可以通过原型链访问到这个方法，并调用它。

4.类继承

子类可以继承父类的属性和方法，并且还可以重写父类的方法从而实现多态。在 JavaScript 中，我们可以通过以下方式实现继承：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 定义一个人类 Person
function Person(name, age) {
	this.name = name;
	this.age = age;
}
Person.prototype.sayHello = function () {
	console.log("名字是：" + this.name + " 年龄是：" + this.age);
};

// 定义一个学生类 Student，继承 Person
function Student(name, age, grade) {
	Person.call(this, name, age); // 调用父类构造函数
	this.grade = grade;
}
Student.prototype = Object.create(Person.prototype); // 继承 Person 原型对象
Student.prototype.constructor = Student; // 设置构造函数为 Student

Student.prototype.sayHello = function () {
	// 重写父类的 sayHello 方法
	console.log("名字是：" + this.name + " 年龄是：" + this.age + ", 班级是:" + this.grade);
};

// 实例化一个学生对象
var stu1 = new Student("小明", 18, "一年级");
stu1.sayHello(); // 输出 "名字是：小明 年龄是：18, 班级是:一年级"

上述代码中，通过在子类 Student 的构造函数中，使用 call() 调用父类 Person 中被继承的属性和方法。然后再通过 Object.create() 继承父类的原型对象，并将子类 Student 的原型对象的构造函数指向自身。最后就可以重写父类的方法，在子类中实现多态了。

结论：

到这里我们已经对 JavaScript 面向对象编程有了一个初步印象：对象基础、构造函数、原型链和类继承等。需要注意的是，JavaScript 面向对象方式非常灵活且易用，而且不同于其他面向对象语言。