面向对象编程

在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。

面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。

面向对象的特性：

  • 封装性
  • 继承性
  • 多态性

image.png

构造函数

封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装。

同样的将变量和函数组合到了一起并能通过 this 实现数据的共享，所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 创建对象
function Person() {
	this.name = '无名氏'
	this.age = '0'
	this.set = function(name, age) {
		this.name = name
		this.age = age
	}
	this.get = () => {
		console.log(`${this.name}今年${this.age}岁了`)
	}
}
// 创建实例
let p1 = new Person()
let p2 = new Person()
p1.set('kenan', 12)
p1.get() // kenan今年12岁了
p2.get() // 无名氏今年0岁了
console.log(p1.set === p2.set) // false，表示两个函数不一样

注意：构造函数存在一个问题，同一个对象，不同实例的函数，在堆当中会重复存储，造成内存浪费的问题

原型对象

构造函数通过原型分配的函数是所有对象所共享的。

  • JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象，所以我们也称为原型对象
  • 这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存
  • 我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。
  • 构造函数和原型对象中的this都指向实例化的对象
1
2
3
4
5
6
7
8
9
10
11
function Person() {

}
// 每个函数都有 prototype 属性
console.log(Person.prototype) // 返回一个对象称为原型对象
Person.prototype.sing = function() {
	console.log('唱歌')
}
let p1 = new Person()
let p2 = new Person()
console.log(p1.sing === p2.sing) // true，说明两个函数一样，共享

构造函数 Person 中定义与原型对象中相同名称的方法，这时实例对象调用则是构造函中的方法 sayHi。

1
2
3
4
5
6
7
8
9
10
11
12
function Person() {
	// 此处定义同名方法 sayHi
	this.sayHi = function () {
		console.log('嗨!');
	}
}
// 为构造函数的原型对象添加方法
Person.prototype.sayHi = function () {
	console.log('Hi~');
}
let p1 = new Person();
p1.sayHi(); // 输出结果为 嗨!

通过以上两个简单示例不难发现 JavaScript 中对象的工作机制：当访问对象的属性或方法时，先在当前实例对象是查找，然后再去原型对象查找，并且原型对象被所有实例共享。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Person() {
	// 此处定义同名方法 sayHi
	this.sayHi = function () {
		console.log('嗨!' + this.name)
	}
}
// 为构造函数的原型对象添加方法
Person.prototype.sayHi = function () {
	console.log('Hi~' + this.name)
}
// 在构造函数的原型对象上添加属性
Person.prototype.name = '小明'

let p1 = new Person()
p1.sayHi(); // 输出结果为 嗨!

let p2 = new Person()
p2.sayHi()

总结：结合构造函数原型的特征，实际开发重往往会将封装的功能函数添加到原型对象中。

constructor属性

每个原型对象里面都有个constructor属性（constructor 构造函数）

作用：该属性指向该原型对象的构造函数， 简单理解，就是指向我的爸爸，我是有爸爸的孩子

使用场景：

  1. 如果有多个对象的方法，我们可以给原型对象采取对象形式赋值.
  2. 但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了
  3. 此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。
1
2
3
4
5
6
7
8
9
10
11
12
13
function Star() {
}
console.log(Star.prototype)
Star.prototype = {
	// constructor: Star,  // 重新指向Star构造函数
	sing: () => {
		console.log('唱歌')
	},
	dance: () => {
		console.log('跳舞')
	}
}
console.log(Star.prototype) // constructor属性被覆盖了，需要主动添加

image.png

对象原型

对象都会有一个属性__proto__指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在。

注意：

  • __proto__是JS非标准属性
  • prototype和__proto__意义相同
  • 用来表明当前实例对象指向哪个原型对象prototype
  • __proto__对象原型里面也有一个 constructor属性，指向创建该实例对象的构造函数

image.png

原型继承

继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，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
26
// 创建构造函数
function Person() {
	this.eyes = 2
	this.head = 1
}
// 创建女人构造函数
function Women() {
}
Women.prototype = new Person() // 继承Person
Women.prototype.constructor = Women // 指向回Women
Women.prototype.baby = () => {
	console.log('生小孩')
}
// 创建男人构造函数
function Man() {
}
Man.prototype = new Person()
Man.prototype.constructor = Man
Man.prototype.smoke = () => {
	console.log('吸烟')
}
// 实例化
const li = new Women()
console.log(li)
const wang = new Man()
console.log(wang)

image.png

这样是现实不同的构造函数继承相同的函数

原型链

基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对象的链状结构关系称为原型链

image.png

1
2
3
4
5
6
7
8
function Person() {
}
const p1 = new Person()
console.log(p1 instanceof Person) // true
console.log(p1 instanceof Object) // true
console.log(p1 instanceof Array) // false
console.log([1, 2, 3] instanceof Array) // true
console.log(Array instanceof Object) // true
  1. 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。
  2. 如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）
  3. 如果还没有就查找原型对象的原型（Object的原型对象）
  4. 依此类推一直找到 Object 为止（null）
  5. __proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线
  6. 可以使用 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上