明确函数的双重用途

JavaScript 中的函数一般有两种使用方式:

• 当作构造函数使用: new Func()
• 当作普通函数使用: Func()

但 JavaScript 内部并没有区分两者的方式，我们人为规定构造函数名首字母要大写作为区分。也就是说，构造函数被当成普通函数调用不会有报错提示。

下面来举个栗子:

复制
1// 定义构造函数 Person
2function Person(firstName, lastName) {
3    this.firstName = firstName;
4    this.lastName = lastName;
5    this.fullName = this.firstName + this.lastName;
6}
7// 使用 new 调用
8console.log(new Person("战场", "小包"));
9// 当作普通函数调用
10console.log(Person("战场", "小包"))

输出结果:

通过输出结果可以发现，定义的构造函数被当作普通函数来调用，没有任何错误提示。

使用 instanceof 实现

instanceof 基础知识

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

使用语法:

复制
1object instanceof constructor

我们可以使用 instanceof 检测某个对象是不是另一个对象的实例，例如 new Person() instanceof Person --> true

new 绑定/ 默认绑定

• 通过 new 来调用构造函数，会生成一个新对象，并且把这个新对象绑定为调用函数的 this 。
• 如果普通调用函数，非严格模式 this 指向 window，严格模式指向 undefined

复制
1function Test() {
2    console.log(this)
3}
4// Window {...}
5console.log(Test())
6// Test {}
7console.log(new Test())

使用 new 调用函数和普通调用函数最大的区别在于函数内部 this 指向不同: new 调用后 this 指向实例，普通调用则会指向 window。

instanceof 可以检测某个对象是不是另一个对象的实例。如果为 new 调用， this 指向实例，this instanceof 构造函数 返回值为 true ，普通调用返回值为 false。

代码实现

复制
1function Person(firstName, lastName) {
2    // this instanceof Person
3    // 如果返回值为 false，说明为普通调用
4    // 返回类型错误信息——当前构造函数需要使用 new 调用
5    if (!(this instanceof Person)) {
6        throw new TypeError('Function constructor A cannot be invoked without "new"')
7    }
8    this.firstName = firstName;
9    this.lastName = lastName;
10    this.fullName = this.firstName + this.lastName;
11}
12// 当作普通函数调用
13// Uncaught TypeError: Function constructor A cannot be invoked without "new"
14console.log(Person("战场", "小包"));

通过输出结果，我们可以发现，定义的 Person 构造函数已经无法被普通调用了。撒花~~~

但这种方案并不是完美的，存在一点小小的瑕疵。我们可以通过伪造实例的方法骗过构造函数里的判断。

具体实现: JavaScript 提供的 apply/call 方法可以修改 this 指向，如果调用时将 this 指向修改为 Person 实例，就可以成功骗过上面的语法。

复制
1// 输出结果 undefined
2console.log(Person.call(new Person(), "战场", "小包"));

这点瑕疵虽说无伤大雅，但经过小包的学习，ES6 中提供了更好的方案。

new.target

JavaScript 官方也发现了这个让人棘手的问题，因此 ES6 中提供了 new.target 属性。

《ECMAScript 6 入门》中讲到: ES6 为 new 命令引入了一个 new.target 属性，该属性一般用在构造函数之中，返回 new 命令作用于的那个构造函数。如果构造函数不是通过 new 命令或 Reflect.construct() 调用的，new.target 会返回 undefined ，因此这个属性可以用来确定构造函数是怎么调用的。

new.target 就是为确定构造函数的调用方式而生的，太符合这个场景了，我们来试一下 new.target 的用法。

复制
1function Person() {
2    console.log(new.target);
3}
4// new: Person {}
5console.log("new: ",new Person())
6// not new: undefined
7console.log("not new:", Person())

所以我们就可以使用 new.target 来非常简单的实现对构造函数的限制。

复制
1function Person() {
2    if (!(new.target)) {
3        throw new TypeError('Function constructor A cannot be invoked without "new"')
4    }
5}
6// Uncaught TypeError: Function constructor A cannot be invoked without "new"
7console.log("not new:", Person())

使用ES6 Class

类也具备限制构造函数只能用 new 调用的作用。

ES6 提供 Class 作为构造函数的语法糖，来实现语义化更好的面向对象编程，并且对 Class 进行了规定：类的构造器必须使用 new 来调用。

因此后续在进行面向对象编程时，强烈推荐使用 ES6 的 Class。 Class 修复了很多 ES5 面向对象编程的缺陷，例如类中的所有方法都是不可枚举的；类的所有方法都无法被当作构造函数使用等。

复制
1class Person {
2    constructor (name) {
3        this.name = name;
4    }
5}
6// Uncaught TypeError: Class constructor Person cannot be invoked without 'new'
7console.log(Person())

学到这里我就不由得好奇了，既然 Class 必须使用 new 来调用，那提供 new.target 属性的意义在哪里？

new.target 实现抽象类

首先来看一下 new.target 在类中使用会返回什么？

复制
1class Person {
2    constructor (name) {
3        this.name = name;
4        console.log(new.target)
5    }
6}
7new Person()

输出结果:

Class 内部调用 new.target，会返回当前 Class。

《ECMAScript 6 入门》中又讲到: 需要注意的是，子类继承父类时，new.target会返回子类。继承中的 new.target 好像有不一样的花样，我们来试一下。

复制
1class Animal {
2    constructor (type, name, age) {
3        this.type = type;
4        this.name = name;
5        this.age = age;
6        console.log(new.target)
7    }
8}
9// extends 是 Class 中实现继承的关键字
10class Dog extends Animal {
11    constructor(name, age) {
12        super("dog", "baobao", "1")
13    }
14}
15const dog = new Dog()

输出结果:

通过上面案例，我们可以发现子类调用和父类调用的返回结果是不同的，我们利用这个特性，就可以实现父类不可调用而子类可以调用的情况——面向对象中的抽象类

抽象类实现

什么是抽象类那？我们以动物世界为例。

我们定义了一个动物类 Animal，并且通过这个类来创建动物，动物是个抽象概念，当你提到动物类时，你并不知道我会创建什么动物。只有将动物实体化，比如说猫，狗，猪啊，这才是具体的动物，并且每个动物的行为都会有所不同。因此我们不应该通过创建 Animal 实例来生成动物，Animal 只是动物抽象概念的集合。

Animal 就是一个抽象类，我们不应该通过它来生成动物，而是通过它的子类，例如 Dog、Cat 等来生成对应的 dog/cat 实例。

new.target 子类调用和父类调用的返回值是不同的，所以我们可以借助 new.target 实现抽象类

抽象类也可以理解为不能独立使用、必须继承后才能使用的类。

复制
1class Animal {
2    constructor (type, name, age) {
3        if (new.target === Animal) {
4            throw new TypeError("abstract class cannot new")
5        }
6        this.type = type;
7        this.name = name;
8        this.age = age;
9    }
10}
11// extends 是 Class 中实现继承的关键字
12class Dog extends Animal {
13    constructor(name, age) {
14        super("dog", "baobao", "1")
15    }
16}
17// Uncaught TypeError: abstract class cannot new
18const dog = new Animal("dog", "baobao", 18)

总结

本文介绍了三种限制构造函数只能被 new 调用的方案

• 借助 instanceof 和 new 绑定的原理，适用于低版本浏览器
• 借助 new.target 属性，可与 class 配合定义抽象类
• 面向对象编程使用 ES6 class——最佳方案