JavaScript中new实现原理

1,823 阅读1分钟

(1)创建一个新对象;

(2)将构造函数的作用域赋给新对象(因此this就指向了这个新对象);

(3)执行构造函数中的代码(为这个对象添加属性和方法)

(4)返回新对象

构造函数创建对象代码如下:

function Person(name, age, job) {  

  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function () {
      alert(this.name)
  }
}
var person = new Person('xiaoMing', 26, 'kaifa')
console.log('构造函数创建对象', person)

new方法的实现原理的js代码如下:

 function _new() {
   var o = new Object() // 创建一个新的对象
   let [constructor, ...oArgs] = [...arguments] // 传入参数第一个是构造函数,后面的是构造函数的参数
   o.__proto__ = constructor.prototype   // 执行构造函数 将构造函数的原型赋给 实例对象的__proto__
    这样构造函数的属性就全都给实例了
   let resultObject = constructor.apply(o,oArgs) // 将构造函数的this指向创建的对象
   if (resultObject && typeof resultObject == Object || typeof resultObject == "function") {
       // 如果构造函数的执行结果返回的是一个 对象 那么就返回这个对象
       return resultObject
  }
   // 如果构造函数返回的是正常我们常见的那种(不是对象), 那么返回这个新创建的对象
   return o
 }

发现一个好方法:

function _new(fn, ...arg) {
    const obj = Object.create(fn.prototype);
    const ret = fn.apply(obj, arg);
    return ret instanceof Object ? ret : obj;
}