Javascript 原型链的理解: 封装、继承、多态

原型链有三个特点:封装、继承、多态;接下来是我的一些理解。

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

你可能感兴趣的:(Javascript 原型链的理解: 封装、继承、多态)