入门前端-《JavaScript 语言入门教程-对象继承》

Love The Way You Lie 2022-10-11 13:30 193阅读 0赞

# 原型对象概述 #

## 构造函数的缺点 ##

> `JavaScript` 通过构造函数生成新对象，因此构造函数可以视为对象的模板。实例对象的属性和方法，可以定义在构造函数内部。

function Cat (name, color) { 
      this.name = name;
      this.color = color;
    }
    
    var cat1 = new Cat('大毛', '白色');
    
    cat1.name // '大毛'
    cat1.color // '白色'

通过构造函数为实例对象定义属性，虽然很方便，但是有一个缺点。同一个构造函数的多个实例之间，无法共享属性，从而造成对系统资源的浪费。

function Cat(name, color) { 
      this.name = name;
      this.color = color;
      this.meow = function () { 
        console.log('喵喵');
      };
    }
    
    var cat1 = new Cat('大毛', '白色');
    var cat2 = new Cat('二毛', '黑色');
    
    cat1.meow === cat2.meow
    // false

这个问题的解决方法，就是 `JavaScript` 的原型对象（`prototype`）。

## prototype 属性的作用 ##

> `JavaScript` 规定，每个函数都有一个`prototype`属性，指向一个对象。

function f() { }
    typeof f.prototype // "object"

上面代码中，函数`f`默认具有`prototype`属性，指向一个对象。

对于普通函数来说，该属性基本无用。但是，对于构造函数来说，生成实例的时候，该属性会自动成为实例对象的原型。

function Animal(name) { 
      this.name = name;
    }
    Animal.prototype.color = 'white';
    
    var cat1 = new Animal('大毛');
    var cat2 = new Animal('二毛');
    
    cat1.color // 'white'
    cat2.color // 'white'

上面代码中，原型对象的`color`属性的值变为`yellow`，两个实例对象的`color`属性立刻跟着变了。  
这是因为实例对象其实没有`color`属性，都是读取原型对象的`color`属性。  
也就是说，当实例对象本身没有某个属性或方法的时候，它会到原型对象去寻找该属性或方法。  
这就是原型对象的特殊之处。

## 原型链 ##

> `JavaScript` 规定，所有对象都有自己的原型对象（`prototype`）。一方面，任何一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。因此，就会形成一个“原型链”（`prototype chain`）：对象到原型，再到原型的原型……

如果一层层地上溯，所有对象的原型最终都可以上溯到`Object.prototype`

那么，`Object.prototype`对象有没有它的原型呢？  
回答是`Object.prototype`的原型是`null`。`null`没有任何属性和方法，也没有自己的原型。  
因此，原型链的尽头就是`null`。

举例来说，如果让构造函数的`prototype`属性指向一个数组，就意味着实例对象可以调用数组方法。

var MyArray = function () { };
    
    MyArray.prototype = new Array();
    MyArray.prototype.constructor = MyArray;
    
    var mine = new MyArray();
    mine.push(1, 2, 3);
    mine.length // 3
    mine instanceof Array // true

修改原型对象时，一般要同时修改`constructor`属性的指向。

// 坏的写法
    C.prototype = { 
      method1: function (...) {  ... },
      // ...
    };
    
    // 好的写法
    C.prototype = { 
      constructor: C,
      method1: function (...) {  ... },
      // ...
    };
    
    // 更好的写法
    C.prototype.method1 = function (...) {  ... };

# instanceof 运算符 #

> `instanceof`运算符返回一个布尔值，表示对象是否为某个构造函数的实例。

由于`instanceof`检查整个原型链，因此同一个实例对象，可能会对多个构造函数都返回`true`。

var d = new Date();
    d instanceof Date // true
    d instanceof Object // true

注意，`instanceof`运算符只能用于对象，不适用原始类型的值。

var s = 'hello';
    s instanceof String // false

上面代码中，字符串不是`String`对象的实例（因为字符串不是对象），所以返回`false`。

此外，对于`undefined`和`null`，`instanceof`运算符总是返回`false`。

undefined instanceof Object // false
    null instanceof Object // false

利用`instanceof`运算符，还可以巧妙地解决，调用构造函数时，忘了加`new`命令的问题。

function Fubar (foo, bar) { 
      if (this instanceof Fubar) { 
        this._foo = foo;
        this._bar = bar;
      } else { 
        return new Fubar(foo, bar);
      }
    }

上面代码使用`instanceof`运算符，在函数体内部判断`this`关键字是否为构造函数`Fubar`的实例。如果不是，就表明忘了加`new`命令。

# 构造函数的继承 #

> 让一个构造函数继承另一个构造函数，是非常常见的需求。这可以分成两步实现。

第一步是在子类的构造函数中，调用父类的构造函数。

function Sub(value) { 
      Super.call(this);
      this.prop = value;
    }

上面代码中，`Sub`是子类的构造函数，`this`是子类的实例。在实例上调用父类的构造函数`Super`，就会让子类实例具有父类实例的属性。

第二步，是让子类的原型指向父类的原型，这样子类就可以继承父类原型。

Sub.prototype = Object.create(Super.prototype);
    Sub.prototype.constructor = Sub;
    Sub.prototype.method = '...';

面代码中，`Sub.prototype`是子类的原型，要将它赋值为`Object.create(Super.prototype)`，而不是直接等于`Super.prototype`。否则后面两行对`Sub.prototype`的操作，会连父类的原型`Super.prototype`一起修改掉。

另外一种写法是`Sub.prototype`等于一个父类实例。

Sub.prototype = new Super();

> 上面这种写法也有继承的效果，但是 **子类会具有父类实例的方法**。有时，这可能不是我们需要的，所以不推荐使用这种写法。

举例来说，下面是一个Shape构造函数。
    
    function Shape() { 
      this.x = 0;
      this.y = 0;
    }
    
    Shape.prototype.move = function (x, y) { 
      this.x += x;
      this.y += y;
      console.info('Shape moved.');
    };
    我们需要让`Rectangle`构造函数继承`Shape`。
    
    // 第一步，子类继承父类的实例
    function Rectangle() { 
      Shape.call(this); // 调用父类构造函数
    }
    // 另一种写法
    function Rectangle() { 
      this.base = Shape;
      this.base();
    }
    
    // 第二步，子类继承父类的原型
    Rectangle.prototype = Object.create(Shape.prototype);
    Rectangle.prototype.constructor = Rectangle;

# 多重继承(混入 Mixin) #

> `JavaScript`不提供多重继承功能，即不允许一个对象同时继承多个对象。但是，可以通过变通方法，实现这个功能。

上面代码中，子类`S`同时继承了父类`M1`和`M2`。这种模式又称为`Mixin`（混入）。

# 模块 #

> `JavaScript`不是一种模块化编程语言，`ES6` 才开始支持`“类”和“模块”`。下面介绍传统的做法，如何利用对象实现模块的效果。

## 基本的实现方法 ##

> 简单的做法是把模块写成一个对象，所有的模块成员都放到这个对象里面。

var module1 = new Object({ 
    　_count : 0,
    　m1 : function (){ 
    　　//...
    　},
    　m2 : function (){ 
      　//...
    　}
    });

但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。

## 封装私有变量：构造函数的写法 ##

> 我们可以利用构造函数，封装私有变量。

上面代码中，`buffer`是模块的私有变量。一旦生成实例对象，外部是无法直接访问`buffer`的。  
但是，这种方法将私有变量封装在构造函数中，导致构造函数与实例对象是一体的，总是存在于内存之中，无法在使用完成后清除。