深度解读 JS 构造函数、原型、类与继承

// 定义个构造函数
function Person(name) {
    this.name = name;
}
// new构造函数，创建对象
let person = new Person("张三");

小Q：看吧 person 就是对象，Person 就是构造函数，清晰明了！

老白：那我要是单纯写这个方法算不算构造函数？

function add(a, b) {
    return a + b;
}

小Q：这不是吧，这明显就是个普通函数啊？

老白：可是它也可以 new 对象哦！

function add(a, b) {
    return a + b;
}
let a = new add(1, 2);
// add {}
console.log(a);
// true
console.log(a instanceof add);
// object
console.log(typeof a);

小Q：诶?

function Person(name) {
    this.name = name;
}
Person("张三");

小Q：哦，我懂了，所有函数都可以被 new，都可以作为构造函数咯，所谓构造函数只是一种使用场景。

老白：嗯嗯，总结得很好，但也不全对，比如箭头函数就不能被 new，因为它没有自己的 this 指向，所以不能作为构造函数。比如下面这样就会报错。

let Person = (name) => {
    this.name = name;
};
// Uncaught TypeError: Person is not a constuctor
let person = new Person("张三");

小Q：原来如此，那你刚刚 Person("张三"); ，既然没有创建新对象，那里面的 this 又指向谁了？

老白：这就涉及到函数内 this 指向问题了，可以简单总结以下 5 种场景。

1. 通过 new 调用，this 指向创建的新对象；

2. 直接当做函数调用，this 指向 window（严格模式下为 undefined）；

function Person(name) {
    this.name = name;
}
// this 指向 window
Person("张三");
// 张三
console.log(window.name);

function Person(name) {
    this.name = name;
}
let obj = {
    Person,
};
// this 指向 obj
obj.Person("张三");
// { "name": "张三", Person: f }
console.log(obj);

function Person(name) {
    this.name = name;
}
// this 指向 call 的第一个参数
Person.call(Math, "张三");
// 张三
console.log(Math.name);

function Person(name) {
    this.name = name;
    
    // 普通函数，this 取决于调用者，即上述的 4 种情况
    setTimeout(function() {
        console.log(this);
    }, 0)
    
    // 箭头函数，this 取决于上下文，我们可以忽略箭头函数的存在
    // 即同上面 this.name = name 中的 this 指向一样
    setTimeout(() => {
        console.log(this);
    }, 0)
}

小Q：原来 this 指向都有这么多种情况，好的，小本本记下了，等下就去试验下。

小Q：等下，我重新看了你的 new add(1, 2)，那 a + b = 3 还被 return 了呢，这 3 return 到哪去了？

function add(a, b) {
    return a + b;
}
let a = new add(1, 2);

老白：没错，你注意到了，构造函数是不需要 return 的，函数中的 this 就是创建并返回的新对象了。

但当 new 一个有 return 的构造函数时，如果 return 的是基本类型，则 return 的数据直接被抛弃。

如果 return 一个对象，则最终返回的新对象就是 return 的这个对象，这时原本 this 指向的对象就会被抛弃。

function Person(name) {
    this.name = name;
    // 返回的是对象类型
    return new Date();
}
let person = new Person("张三");
// 返回的是 Date 对象
// Sat Jul 29 2023 16:13:01 GMT+0800 (中国标准时间)
console.log(person);

小Q：新知识get√

小Q：都说原型原型，可看了这么久，这代码里也没出现原型呀？

老白：没错，原型是个隐藏的家伙，我们可以通过对象或者构造函数去拿到它。

// 构造函数
function Person(name) {
    this.name = name;
}
// 对象
let person = new Person("张三");

// 通过对象拿到原型（2种方法）
let proto1 = Object.getPrototypeOf(person);
let proto2 = person.__proto__;

// 通过构造函数拿到原型
let proto3 = Person.prototype;

// 验证一下
// true
console.log(proto1 == proto2);
// true
console.log(proto1 == proto3);

小Q：可是这个原型是哪来的呀，我代码里也没创建它呀？

当你用构造函数创建对象时，系统又帮你把对象的 __proto__ 属性指向原型。

// 构造函数
function Person(name) {
    this.name = name;
}
// 可以理解为：声明函数时，系统自动执行了下面代码
Person.prototype = {
    // 指向构造函数
    constructor: Person 
}

// 对象
let person = new Person("张三");
// 可以理解为：创建对象时，系统自动执行了下面代码
person.__proto__ == Person.prototype;

小Q：它们的引用关系，稍微有点绕啊~

老白：没事，我画两个图来表示，更加清晰点。

（备注：proto 只是单纯用来表示原型的一个代名而已，代码中并不存在）

图1

小Q：懂了！

老白：那你说说 {}.__proto__ 和 {}.consrtuctor 分别是什么？

小Q：让我分析下，{} 其实就是 new Object() 的一种字面量写法，本质上就是 Object 对象，那 {}.__proto__ 就是原型 Object.prototype，{}.constructor 就是构造函数 Object，对吧？

老白：没错，只要能熟练掌握上面这个图，构造函数，原型和对象这三者的引用关系基本很清晰了。一开始提的1、2 题基本也迎刃而解了！

小Q：那这个原型有什么用呢？

老白：一句话总结：当访问对象的属性不存在时，就会去访问原型的属性。

图3

function Person(name) {
    this.name = name;
}
// 给原型增加age属性
Person.prototype.age = 18;

// 对象
let person = new Person("张三");
// 18
console.log(person.age);
// 修改原型的age属性
Person.prototype.age++;
// 19
console.log(person.age);

图4

function Person(name) {
    this.name = name;
}
// 原型的info属性是对象
Person.prototype.info = {
    age: 18,
};
let person = new Person("张三");

person.info.age++;

function Person(name) {
    this.name = name;
}
Person.prototype.info = {
    age: 18,
};
let person1 = new Person("张三");
let person2 = new Person("李四");

// person1修改info
person1.info.age = 19;
// person2也会被影响，打印：19
console.log(person2.info.age);

老白：这对我们代码的设计并不好，所以我们一般不在原型上定义数据，而是定义函数，这样对象就可以直接使用挂载在原型上的这些函数了。

function Person(name) {
    this.name = name;
}
Person.prototype.sayHello = function() {
    console.log("hello");
}
let person = new Person("张三");
// hello
person.sayHello();

小Q：我理解了，数据确实不应该被共享，每个对象都应该有自己的数据好点，但是函数无所谓，多个对象可以共享同一个原型函数。

老白：所以你知道为啥 {} 这个对象本身没有任何属性，却可以执行 toString() 方法吗？

小Q：【恍然大悟】来自它的原型 Object.prototype ！

老白：不仅如此，很多系统自带的构造函数产生的对象，其方法都是挂载在原型上的。比如我们经常用的数组方法，你以为是数组对象自己的方法吗？不，是数组原型 Array.prototype 的方法，我们可以验证下。

let array = [];
// array对象的push和原型上的push是同一个
// 打印：true
console.log(array.push == Array.prototype.push);
// array对象本身没有自己的push属性
// 打印：false
console.log(array.hasOwnProperty("push"));

图5

小Q：【若有所思】

老白：再比如，你随便定义一个函数 function fn() {}，为啥它就能 fn.call() 这样执行呢，它的 call 属性是哪来的？

小Q：来自它的原型？函数其实是 Function 的对象，那它的原型就是 Function.prototype，试验一下。

function fn() {}
// true
console.log(fn.constructor == Function);
// true
console.log(fn.call == Function.prototype.call);

图6

Array.prototype.push = (function (push) {
    // 闭包，push是原始的那个push方法
    return function (...items) {
        
        // 执行push要指定this
        push.call(this, ...items);
        
        console.log("监听push完成，执行一些操作");
    };
})(Array.prototype.push);

let array = [];
// 打印：监听push完成，执行一些操作
array.push(1, 2);
// 打印：[1, 2]
console.log(array);

// 没有includes
if(!Array.prototype.includes) {
    Array.prototype.includes = function() {
        // 自己实现includes
    }
}

小Q：又又涨知识了~

老白：原型相关的也说的差不多了，结合刚刚讨论的构造函数，考你一个：手写一个 new 函数。

小Q：啊啊，提示一下？

老白：好，我们简单分析一下 new 都做了什么

小Q：我试试~

function myNew(Fn, ...args) {
    var obj = {
        __proto__: Fn.prototype,
    };
    Fn.apply(obj, args);
    return obj;
}

小Q：试验通过！

// 构造函数
function Person(name) {
    this.name = name;
}
// 原型
Person.prototype.age = 18;
// 创建对象
let person = myNew(Person, "张三");

// Person {name: "张三"}
console.log(person);
// 18
console.log(person.age);

老白：不错不错，让我帮你再稍微完善一下嘿嘿~

function myNew(Fn, ...args) {
    // 通过Object.create指定原型，更加符合规范
    var obj = Object.create(Fn.prototype);
    
    // 指定this为obj对象，执行构造函数
    let result = Fn.apply(obj, args);
    
    // 判断构造函数的返回值是否是对象
    return result instanceof Object ? result : obj;
}

老白：刚刚我们说当访问对象的属性不存在时，就会去访问原型的属性，那假如原型上的属性也不存在呢？

小Q：返回 undefined？

小Q：原来如此，所以说所有的对象都可以使用根原型 Object.prototype 上定义的方法咯。

老白：没错，不过有一些原型会重写根原型上的方法，就比如 toString()，在 Date.prototype，Array.prototype 中都会有它们自己的定义。

// [object Object]
console.log({}.toString())

// 1,2,3
console.log([1,2,3].toString())

// Tue Aug 01 2023 17:58:05 GMT+0800 (中国标准时间)
console.log(new Date().toString())

小Q：理解了原型链，看回开始的3~6题，好像也不难了。

Date、Function 的原型是 Function.prototype，第 3、4 题就解了。

Function.prototype 的原型是 Object.prototype，第 5 题也解了。

Object.prototype 是根原型，所以它的 __proto__ 属性就为 null，第 6 题也解了。

老白：完全正确。最后再考你一道和原型链相关的题，手写 instanceOf 函数。提示一下，instanceOf 的原理是判断构造函数的 prototype 属性是否在对象的原型链上。

// array的原型链：Array.prototype → Object.prototype
let array = [];
// true
console.log(array instanceof Array);
// true
console.log(array instanceof Object);
// false
console.log(array instanceof Function);

小Q：好了嘞~

function myInstanceof(obj, Fn) {
    while (true) {
        obj = obj.__proto__; 
        // 匹配上了
        if (obj == Fn.prototype) {
            return true;
        }
        // 到达原型链的尽头了
        if (obj == null) {
            return false;
        }
    }
}

检测一下：

let array = [];
// true
console.log(myInstanceof(array, Array));
// true
console.log(myInstanceof(array, Object));
// false
console.log(myInstanceof(array, Function));

老白：Good！

小Q：好不容易把构造函数和原型都弄懂，怎么 ES6 又推出类呀，学不动了 T_T。

老白：不慌，类其实只是种语法糖，本质上还是”构造函数+原型“。

我们先看一下类的语法，类中可以包含有以下4种写法不同的元素。

class Person {
    // 对象属性
    a = "a";
    b = function () {
        console.log("b");
    };
    // 原型属性
    c() {
        console.log("c");
    }
    // 构造器
    constructor() {
        // 修改对象属性
        this.a = "A";
        // 新增对象属性
        this.d = "d";
    }
    // 静态属性
    static e = "e";
    static f() {
        console.log("f");
    }
}

我们再将这种 class 语法糖写法还原成构造函数写法。

function Person() {
    // 对象属性
    this.a = "a";
    this.b = function () {
        console.log("b");
    };
    // 构造器
    this.a = "A";
    this.d = "d";
}

// 原型属性
Person.prototype.c = function () {
    console.log("c");
};

// 静态属性
Person.e = "e";
Person.f = function () {
    console.log("f");
};

通过下面一些方法检测，上面的2种写法会得到同样的结果。

// Person类本质是个构造函数，打印：function
console.log(typeof Person);

// Person的静态属性，打印：e
console.log(Person.e);

// 可以看到原型属性c，打印：{constructor: ƒ, c: ƒ}
console.log(Person.prototype);

let person = new Person();

// 可以看到对象属性a b d，打印：Person {a: 'A', d: 'd', b: ƒ}
console.log(person);
// 对象的构造函数就是Person，打印：true
console.log(person.constructor == Person);

小Q：所以类只不过是将本来比较繁琐的构造函数的写法给简化了而已，这语法糖果然甜~

小Q：不过我发现一个问题，在 class 写法中的原型属性只能是函数，不能是数据？

老白：没错，这也呼应了前面说的，原型上只推荐定义函数，不推荐定义数据，避免不同对象共享同一个数据。

小Q：我又又发现了一个问题，ES6 的 class 还可以 extends 另一个类呢，这也是语法糖？

// 父类
function Animal() {
    this.type = "动物";
}
// 子类
function Cat() {
    this.name = "猫";
}

小Q：让 Animal 对象充当 Cat 的原型！

function Animal() {
    this.type = "动物";
}
function Cat() {
    this.name = "猫";
}
// 指定Cat的原型
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

let cat = new Cat();
// Cat对象拥有了Animal的属性
console.log(cat.type);

老白：没错，这是我们学完原型之后，最直观的一种继承实现方式，这种继承又叫原型链式继承。但是这种继承方式存在 2 个缺点：

function Animal(type) {
    this.type = type;
}
function Cat(type) {
    this.name = "猫";
}
// 在这里就已经创建了Animal对象
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

// 创建子类对象时无法向父类构造函数传参
let cat = new Cat("哺乳动物");

// type属性来自原型，被所有Cat对象共享，打印：undefined
console.log(cat.type);

小Q：我想到个办法，可以一举解决上面2个缺点。

function Animal(type) {
    this.type = type;
}
function Cat(type) {
    // 执行父类，显式指定this就是子类的对象
    Animal.call(this, type);
    this.name = "猫";
}
let cat = new Cat("哺乳动物");

// Cat {type: '哺乳动物', name: '猫'}
console.log(cat);

老白：这种继承方式叫 构造函数式继承，确实解决了 原型链式继承 带来的问题，不过这种继承方式因为没有用到原型，又有产生了2个新的问题：

function Animal(type) {
    this.type = type;
}
// 父类的原型方法
Animal.prototype.eat = function () {
    console.log("吃");
};
function Cat(type) {
    Animal.call(this, type);
    this.name = "猫";
}
let cat = new Cat("哺乳动物");

// 没有继承父类原型的属性方法，打印：undefined
console.log(cat.eat);
// 子类对象不是父类的实例，打印：false
console.log(cat instanceof Animal);

小Q：看来还要再改进，不如我把 原型链式 和 构造函数式 这 2 种继承方式都用上，让它们互补。

function Animal(type) {
    this.type = type;
}
Animal.prototype.eat = function () {
    console.log("吃");
};
// 子类构造函数
function Cat(type) {
    Animal.call(this, type);
    this.name = "猫";
}
// 父类对象充当子类原型
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

试验一下，果然所有问题都解决了。

// 可以给父类构造函数传参
let cat = new Cat("哺乳动物");

// 子类对象拥用自己属性，而非来自原型，避免数据共享
// 打印：Cat {type: '哺乳动物', name: '猫'}
console.log(cat);

// 子类对象可以继承到父类原型的方法，打印：吃
cat.eat();

// 子类对象属于父类的实例，打印：true
console.log(cat instanceof Animal);

老白：非常聪明，你又道出了第三种继承方式，组合式继承。即 原型链式 + 构造函数式 = 组合式。问题确实都解决了，但是有没有发现，这种方式执行了 2 遍父类构造函数。

function Animal(type) {
    this.type = type;
}
Animal.prototype.eat = function () {
    console.log("吃");
};
function Cat(type) {
    // 第二次执行父类构造函数
    Animal.call(this, type);
    this.name = "猫";
}
// 第一次执行父类构造函数
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

小Q：多执行了一遍，确实不够完美，这怎么搞？

老白：其实关键在 Cat.prototype = new Animal()，你只不过想让子类对象也能继承到父类的原型，而这里创建了一个父类对象，为啥？说到底还是利用原型链： 子类对象 → 父类对象 → 父类原型。

如果我们不要中间那个"父类对象"，而是用一个“空对象x”替换，让原型链变成：子类对象 → 空对象x → 父类原型，这样也能达到目的，就不用执行那遍没必要的父类构造函数了。

// 组合式继承：创建父类对象做子类原型
let animal = new Animal();
Cat.prototype = animal;

// 改进：创建一个空对象做子类原型，并且这个空对象的原型是父类原型
let x = Object.create(Animal.prototype);
Cat.prototype = x;

小Q：妙啊，这回完美了。

function Animal(type) {
    this.type = type;
}
Animal.prototype.eat = function () {
    console.log("吃");
};
function Cat(type) {
    Animal.call(this, type);
    this.name = "猫";
}
// 寄生组合式，改进了组合式，少执行了一遍没必要的父类构造函数
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

老白：这种继承方式又叫 寄生组合式继承，相当于在组合式继承的基础上进一步优化。回顾上面的几种继承方式的演变过程，原型链式 → 构造函数式 → 组合式 → 寄生组合式， 其实就是不断优化的过程，最终我们才推理出比较完美的继承方式。

小Q：那 ES6 class 的 extends 继承 又是怎样呢？

老白：说到底就是 寄生组合式继承 的语法糖。我们先看看它的语法。

class Animal {
    eat() {
        console.log("吃");
    }
    constructor(type) {
        this.type = type;
    }
}
// Cat继承Animal
class Cat extends Animal {
    constructor(type) {
        // 执行父类构造函数，相当于 Animal.call(this, type);
        super(type);
        
        // 执行完super()，子类对象就有父类属性了，打印：哺乳动物
        console.log(this.type);
        
        this.name = "猫";
    }
}

创建对象试验一下：

let cat = new Cat("哺乳动物");

// 子类原型的原型就是父类原型，打印：true
console.log(Cat.prototype.__proto__ == Animal.prototype);

// 子类本身拥有父类的属性，打印：Cat {type: '哺乳动物', name: '猫'}
console.log(cat);

打印的结果展示的特性和 寄生组合式 是一样的：

特性1 可以理解为 extends 背地里执行了：

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

class Animal {
    constructor() {
        // 假如不报错，this.name = "猫" 就被 this.name= "狗" 覆盖了
        this.name = "狗";
    }
}
class Cat extends Animal {
    constructor(type) {
        this.name = "猫";
        // 没有在this使用前调用，报错
        super();
    }
}

小Q：看懂 寄生组合式继承， extends 继承 就是小菜一碟呀~

老白：最后再补充一下 super 的语法，可以子类的静态属性方法中通过 super.xx 访问父类静态属性方法。

class Animal {
    constructor() {}
    static num = 1;
    static say() {
        console.log("hello");
    }
}
class Cat extends Animal {
    constructor() {
        super();
    }
    // super.num 相当于 Animal.num
    static count = super.num + 1;
    
    static talk() {
        // super.say() 相当于 Animal.say()
        super.say();
    }
}
// 2
console.log(Cat.count);
// hello
Cat.talk();

 super 是一个语法糖的特殊关键词，特殊用法，并不指向某个对象，不能单独使用，以下情况都是不允许的。

class Animal {}
class Cat extends Animal {
    constructor() {
        // 报错
        let _super = super;
        // 报错
        console.log(super);
    }
    static talk() {
        // 报错
        console.log(super);
    }
}