扎实基础篇-----js如何实现一个new

这是我参与8月更文挑战的第18天，活动详情查看：8月更文挑战；

前言

关于new的实现，在面试的时候经常会碰到，尤其是手写题会让你手动实现一个new，今天我们一起来聊一聊new是如何实现的呢？

new是什么

new的作用就是通过构造函数来创建一个实例对象。来看下边的例子：

function Func(name) { 
    this.name = name; 
} 

console.log("new Func('mm')的类型：",typeof new Func('mm'));
//上面输出： new Func('mm')的类型： object

console.log("Func：",typeof Func); // 输出：function

那在真实业务场景里，又是哪里用到的呢？

接下来我们想象一下，比如你要创建一个有2只猫的数组，其中每个猫都有自己的姓名、性别、年龄，我们可以这样写。

const catList = [{
    name: 'zhangsan',
    gender: 'm',
    age: 8,
},{
    name: 'lisi',
    gender: 'f',
    age: 12,
}]

是不是还挺简单的，但是，如果我们创建100只猫，并将它们组成数组，是不是就不能这样枚举了，这就要用到构造函数了，只要写好一个通用函数，然后调用这个函数，将每只猫的的必要信息传入，就能得到这个猫的信息了，举例如下：

function Cat(name, gender, year) {
  this.name = name;
  this.gender = gender;
  this.age = age;
}
const catList = [new Cat('zhangsan', 'm', 8),new Cat('lisi', 'f', 12)];

new构造函数时，发生了些什么？

规整了一下，大致为下面几步：

1. 首先创建一个新对象，这个新对象的__proto__属性指向构造函数的prototype属性
2. 此时构造函数执行环境的this就指向了这个新对象
3. 执行构造函数中的代码，一般是通过this给新对象添加新的属性或方法。
4. 最后返回这个新对象。

代码实现

根据new构造函数发生的时，我们如何模拟实现一个new呢？

function myNew(func, args){
    const newObj = Object.create(func.prototype);
    var res = ctor.apply(newObj, args);
    var isObject = typeof res === 'object' && res !== null;
    var isFunction = typeof res === 'function';
    if(isObject || isFunction){
        return ctorReturnResult;
    }
    return newObj;
}

总结

前端漫漫长途，我们都在路上，希望可以和小伙伴们一起交流，一起进步。持续更新ing.....