JavaScript中new一个对象到底是怎么new的？

最新推荐文章于 2024-01-18 11:00:43 发布

敲代码有瘾

最新推荐文章于 2024-01-18 11:00:43 发布

阅读量338

点赞数 1

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_45786214/article/details/119394419

版权

在JavaScript中，new是一个很常见的操作符，我们写代码的过程中经常会通过new一个构造函数或者类来创建出一个实例，那么为什么new一个构造函数或者类就可以创建出一个实例并且这个实例上还会有构造器的构造属性和构造器原型上的方法呢？js中new一个对象实例到底发生了什么？下面我们一起来探讨下

先通过一个例子看一下js中怎么通过new一个构造函数创建一个新的对象：

function Person(name, age) {
  this.name = name;
  this.age = age;
}
let jack = new Person('jack', 12);
console.log(jack); // {name:'jack',age:12}

在这个例子中，函数Person就是一个构造函数，然后我们通过new Person这个构造函数创建出了一个Person实例jack。

new的过程中到底发生了什么？

创建一个空的JavaScript对象（即 { } ），构造函数中的this指向这个空对象
使这个空对象的__proto__属性等于构造函数的原型对象
执行构造函数方法
如果该构造函数没有返回其他对象，则返回this

手动实现一个new方法

function _new(constructor, ...rest) {
    let target = {}; // 创建一个新的对象
    target.__proto__ = constructor.prototype; // 使这个空对象的__proto__属性等于构造函数的原型对象
    let result = constructor.apply(target, rest); // 执行构造函数方法
    if (result && (typeof (result) == "object" || typeof (result) == "function")) {
          return result; // 如果构造函数执行的结果返回的是一个对象，那么返回这个对象
      }
      return target; // 如果构造函数返回的不是一个对象，返回创建的新对象
}

在上面的方法中，_new方法接收的第一个参数是构造函数，后面的参数是要传给构造函数的参数，方法中首先创建了一个空的对象，然后将这个空对象的__proto__属性指向了构造函数的原型对象，接着使用apply方法执行了构造函数，并将创建的空对象绑定为构造函数中的this，最后判断构造函数的执行结果返回的是不是一个对象，如果是则返回构造函数中的返回的对象，否则返回方法中创建的那个对象。

然后我们再使用自己实现的new方法创建一个Person实例jack试试：

function Person(name, age) {
    this.name = name;
    this.age = age;
}
let a = new Person('jack', 12);
console.log(a); // {name:'jack',age:12}

function _new(constructor, ...rest) {
    let target = {}; // 创建一个新的对象
    target.__proto__ = constructor.prototype; // 使这个空对象的__proto__属性等于构造函数的原型对象
    let result = constructor.apply(target, rest); // 执行构造函数方法
    if (result && (typeof (result) == "object" || typeof (result) == "function")) {
          return result; // 如果构造函数执行的结果返回的是一个对象，那么返回这个对象
      }
      return target; // 如果构造函数返回的不是一个对象，返回创建的新对象
}
let b = _new(Person, 'jack', 12);
console.log(b); // {name:'jack',age:12}

console.log(a instanceof Person); // true
console.log(b instanceof Person); // true

我们可以看到，使用new操作符和我们自己实现的_new方法创建的结果是一样的。