原型链有三个特点:封装、继承、多态;接下来是我的一些理解。
1. 对象的丰富性
在 Js 中,对象是包含信息最丰富、同时最富有语义的一种数据格式;基本类型能承载一个值;数组能承载一组无内在联系的值; 而对象可以是一组属性,和相关操作函数的集合,于是它方便用于模拟现实世界。这也是面向对象思想的体现。
// 基本类型
let type = 'cat'
// 数组类型
let types = ['cat', 'dog', 'cow']
// 对象, \可以非常直观地模拟一只能跑的猫、它的名字叫汤姆
let Tom = {
// 这被称为属性
type: 'cat',
name: 'Tom',
// 这被称为方法
run: () => {
console.log('running)
}
}
2. 封装
可是,当我通过手动写对象的方式、创造很多只名字不同的猫时,麻烦随之而来: 需要写非常多的重复代码。自然而然的,我们想到可以通过函数来解决这个问题:
function Cat(name) {
return {
type: 'cat',
name: name,
run: () => {
console.log('running')
}
}
}
// 生成不同名字, 但其他属性和方法相同的猫, 非常轻松而直观
let Tom = Cat('Tom')
let Jamie = Cat('Jamie')
3. 继承
新的问题又来了,创建的过程轻松了, 但内存上却仍有浪费的成分:不同的猫尽管 type 属性和 run 方法完全相同,但创造一个猫时,却被重复创建了,验证如下:
// 修改了 Tom 的 type 时;Jamie 却没有改变;
Tom.type = 'baby cat'
console.log(Jamie.type) // cat
于是,js 引入了原型的概念;通过构造函数产生差异性的属性值;通过原型保存公用的属性和方法。而不同的实例(比如 Tom)本身只需要生成差异性的部分,并不需要真的拥有共有部分; 而是通过继承关系、调用原型上存有的。如此,重复的内容仅产生一次。具体操作如下
// 构造函数仅产生不同的 name 属性
function Cat(name) {
// this 指当前产生实例
this.name = name
}
// 实例 Tom 和 Jamie 并不真正拥有 type 属性和 run 方法; 可以通过 hasOwnProperty 方法验证;
// 公用的属性和方法, 仅存在于原型上
Cat.prototype.type = 'cat'
Cat.prototype.run = function() {
console.log('running')
}
let Tom = new Cat('Tom')
let Jamie = new Cat('Jamie')
// 当实例读取、调用自身不存在的属性或方法时
Tom.run() // running
// 通过隐形的属性 __proto__ 指向原型 Cat.prototype 进行调用, 验证如下
console.log( Tom.__proto__ === Cat.prototype ) // true
可以发现, 构造函数 + new 方法 做了如下的事情:
3-1 创建一个空对象, 将 this 指向这个空对象;
3-2 执行了构造函数, 让该空对象拥有非公有的属性(上例中的 name 属性);
3-3 隐形创造了一个 __proto__
属性,指向原型; 使实例可以调用公用的方法和属性();
4. 原型链
同样的道理, 当一个原型(比如 Cat)和另一个原型(比如 Dog)拥有相同的属性的方法时(比如 Dog 也有相同的 run 方法),可以让原型(比如 Pet)产生 run 方法, 然后让 Cat 和 Dog 都继承 Pet 即可。
原型链的继承
function Pet(type) {
this.type = type;
}
Pet.prototype.run = function(){
console.log(`${this.type} ${this.name} running`);
}
function Cat(name) {
this.name = name;
}
// 将 Cat 的原型指向 Pet 的实例 __proto__ ; 指向 Pet.prototype;
Cat.prototype = new Pet('cat');
// 此时原型上的构造函数也改成 Pet 了
// 重新指回构造函数 Cat
Cat.prototype.constructor = Cat;
function Dog(name) {
this.name = name;
}
Dog.prototype = new Pet('dog', name);
Dog.prototype.constructor = Dog;
const Tom = new Cat('tom');
Tom.run(); // cat tom running
const John= new Dog('john');
John.run(); // dog john running
5. 多态
仍有一个问题:当部分原型或实例需要针对原型链上的公有属性、方法进行修改时,如何操作呢,是否因此不得不、把共有的部分,放到构造函数中?这里就需要用到多态,即原型链下游,可以通过复写的方式,覆盖掉继承的共有属性和方法。
原理是,当调用某一个属性和方法时,会优先查找自身,当自身不存在时,才会向原型链上游追溯,直至查到 Object 再到 null (null 往上再无原型) ;如果仍查不到, 即为 undefined。
// 在上面的基础上, 仅在 Cat 原型上重写 run 方法; 再调用时;
Cat.prototype.run = function() {
console.log(`${this.name} running on trees`)
}
// Cat 实例: 会调用自身原型链 Cat.prototype.run 方法
Tom.run(); // tom running on trees
// Dog 实例, 在Dog.prototype 上找不到 run 方法; 向原型链上游追溯; 最终调用 Pet.prototype.run 方法
John.run(); // dog john running