JavaScript构造函数的理解

前言

本篇为JavaScript中构造函数理解，以巩固自身基础为主

构造函数是什么

JavaScript构造函数（Constructor）也称为构造器、类型函数，功能类似对象模板，一个构造函数可以生成任意多个实例，实例对象具有相同的属性、行为特征，但不相等

如何定义

语法和用法上，构造函数与普通函数没有任何区别。（为了更好的区分两者，构造函数的名称首字母建议大写）

代码实例：

function Fun(a,b){
    this.a = a
    this.b = b
    this.c = function(){
        //处理代码
    }
    ...
    //其他代码，可以包含return语句
}

如何使用

1. 函数体内使用this,引用将要生成的实例对象

2. 必须使用new 命令调用函数，生成实例对象

   let fun = new Fun() // 如不需要传参数，可以省略小括号 let fun = new Fun
   

构造函数的返回值

构造函数允许使用return 语句。如果返回值为简单值则将被忽略，直接返回this指代对象；如果返回值为对象则将覆盖this指代的实例，返回return后面跟随的对象。

代码示例：

function Fun(a,b){
    this.a = a
    this.b = b
    return {c:3,d:4}
}
let fun = new Fun(1,2)
console.log('a的值为:',fun.a);
console.log('b的值为:',fun.b);

如图：

出现的原因：

这与new命令解析过程有关，使用new命令调用函数的解析过程如下：
第1步，当使用new命令调用函数时，先创建一个空对象,作为实例返回
第2步，设置实例的原型，指向构造函数的prototype属性
第3步，设置构造函数的体内的this值，让他指向实例。
第4步，开始执行构造函数内部的代码
第5步，如果构造函数内部有return语句，而且return后为一个对象，会返回return语句指定的对象;否则会忽略return的返回值，直接返回this对象

延伸：手写new命令

function Fun(a, b) {
    this.a = a;
    this.b = b;
    // return { c: 3, d: 4 };
}
function myNew() {
        let obj = {}; // 创建对象
        console.log(arguments);
        let constructor = [].shift.call(arguments); // 获取构造函数
        console.log(arguments);
        if (constructor.prototype !== null) {
          obj.__proto__ = constructor.prototype; // 构造函数链接到新对象
        }
        let ret = constructor.apply(obj, [].slice.call(arguments)); // 改变this指向
        console.log(arguments);
        console.log(typeof ret);
        if (
          (typeof ret === "object" || typeof ret === "function") &&
          ret !== null
        ) {
          return ret;
        }
        return obj; // 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)，那么new表达式中的函数调用将返回该对象引用。
}
​
      let fun =  myNew(Fun,1,2);
      console.log(fun)

如图：

最后

构造函数在面试过程中被问到概率挺大的，多了解一点没什么坏处