JS一些特殊知识点(七)--构造函数及面向对象模式

素颜马尾好姑娘i 2022-05-26 06:35 221阅读 0赞

# 构造函数与 new 命令 #

### new 命令的原理 ###

使用`new`命令时，它后面的函数依次执行下面的步骤。

1.  创建一个空对象，作为将要返回的对象实例。
2.  将这个空对象的原型，指向构造函数的`prototype`属性。
3.  将这个空对象赋值给函数内部的`this`关键字。
4.  开始执行构造函数内部的代码。

### new.target ###

函数内部可以使用`new.target`属性。如果当前函数是`new`命令调用，`new.target`指向当前函数，否则为`undefined`。

function f() { 
      console.log(new.target === f);
    }
    
    f() // false
    new f() // true

使用这个属性，可以判断函数调用的时候，是否使用`new`命令。

function f() { 
      if (!new.target) { 
        throw new Error('请使用 new 命令调用！');
      }
      // ...
    }
    
    f() // Uncaught Error: 请使用 new 命令调用！

本节介绍 JavaScript 语言实际编程中，涉及面向对象编程的一些模式。

## 构造函数的继承 ##

让一个构造函数继承另一个构造函数，是非常常见的需求。

这可以分成两步实现。第一步是在子类的构造函数中，调用父类的构造函数。

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;

采用这样的写法以后，`instanceof`运算符会对子类和父类的构造函数，都返回`true`。

var rect = new Rectangle();
    rect.move(1, 1) // 'Shape moved.'
    
    rect instanceof Rectangle  // true
    rect instanceof Shape  // true

上面代码中，子类是整体继承父类。有时只需要单个方法的继承，这时可以采用下面的写法。

ClassB.prototype.print = function() { 
      ClassA.prototype.print.call(this);
      // some code
    }

上面代码中，子类`B`的`print`方法先调用父类`A`的`print`方法，再部署自己的代码。这就等于继承了父类`A`的`print`方法。

## 多重继承 ##

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

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

## 模块 ##

随着网站逐渐变成”互联网应用程序”，嵌入网页的JavaScript代码越来越庞大，越来越复杂。网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等……开发者不得不使用软件工程的方法，管理网页的业务逻辑。

JavaScript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。

但是，JavaScript不是一种模块化编程语言，ES5不支持”类”（class），更遑论”模块”（module）了。ES6正式支持”类”和”模块”，但还没有成为主流。JavaScript社区做了很多努力，在现有的运行环境中，实现模块的效果。

### 基本的实现方法 ###

模块是实现特定功能的一组属性和方法的封装。

只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。

function m1() { 
      //...
    }
    
    function m2() { 
      //...
    }

上面的函数m1()和m2()，组成一个模块。使用的时候，直接调用就行了。

这种做法的缺点很明显：”污染”了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。

为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。

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

上面的函数`m1`和`m2`，都封装在`module1`对象里。使用的时候，就是调用这个对象的属性。

module1.m1();

但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。

module1._count = 5;

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

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

这种方法将私有变量封装在构造函数中，违反了构造函数与实例对象相分离的原则。并且，非常耗费内存。

这种方法将私有变量放入实例对象中，好处是看上去更自然，但是它的私有变量可以从外部读写，不是很安全。

### 封装私有变量：立即执行函数的写法 ###

使用“立即执行函数”（Immediately-Invoked Function Expression，IIFE），将相关的属性和方法封装在一个函数作用域里面，可以达到不暴露私有成员的目的。

使用上面的写法，外部代码无法读取内部的`_count`变量。

console.info(module1._count); //undefined

上面的`module1`就是JavaScript模块的基本写法。下面，再对这种写法进行加工。

### 模块的放大模式 ###

如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用“放大模式”（augmentation）。

var module1 = (function (mod){ 
    　mod.m3 = function () { 
    　　//...
    　};
    　return mod;
    })(module1);

上面的代码为`module1`模块添加了一个新方法`m3()`，然后返回新的`module1`模块。

在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上面的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用”宽放大模式”（Loose augmentation）。

var module1 = ( function (mod){ 
    　//...
    　return mod;
    })(window.module1 || {});

与”放大模式”相比，“宽放大模式”就是“立即执行函数”的参数可以是空对象。

### 输入全局变量 ###

独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。

为了在模块内部调用全局变量，必须显式地将其他变量输入模块。

var module1 = (function ($, YAHOO) { 
    　//...
    })(jQuery, YAHOO);

上面的`module1`模块需要使用jQuery库和YUI库，就把这两个库（其实是两个模块）当作参数输入`module1`。这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显。

立即执行函数还可以起到命名空间的作用。

(function($, window, document) { 
    
      function go(num) { 
      }
    
      function handleEvents() { 
      }
    
      function initialize() { 
      }
    
      function dieCarouselDie() { 
      }
    
      //attach to the global scope
      window.finalCarousel = { 
        init : initialize,
        destroy : dieCouraselDie
      }
    
    })( jQuery, window, document );

上面代码中，`finalCarousel`对象输出到全局，对外暴露`init`和`destroy`接口，内部方法`go`、`handleEvents`、`initialize`、`dieCarouselDie`都是外部无法调用的。

## 参考链接 ##

*  [JavaScript Modules: A Beginner’s Guide][JavaScript Modules_ A Beginner_s Guide], by Preethi Kasireddy

[JavaScript Modules_ A Beginner_s Guide]: https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc