js new keyword under the hood All In One

js new 实现原理剖析

js custom new keyword

// 1. create object, allocate memory

// 2. bind this

// 3. bind prototype

// 4. return object

function CustomNew (Func, args) {
   // const obj = Object.create(func);
   const obj = {};
   // const obj = Object.assign({});
   Func.call(obj, args);
   // Func.call(obj, ...args);
   // Func.apply(obj, [...args]);
   obj.__proto__ = Func.prototype;
   return obj;
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new

multi arguments & dynamic arguments ✅

function CustomNew (Func, ...args) {
   // const obj = Object.create(func);
   const obj = {};
   // const obj = Object.assign({});
   // Func.call(obj, args);
    console.log('args', args);
    console.log('...args', ...args);
   Func.call(obj, ...args);
   // Func.apply(obj, [...args]);
   obj.__proto__ = Func.prototype;
   return obj;
}

function CustomNew (Func, ...args) {
   // const obj = Object.create(func);
   const obj = {};
   // const obj = Object.assign({});
   // Func.call(obj, args);
    console.log('args', args);
    console.log('...args', ...args);
   // Func.call(obj, ...args);
   Func.apply(obj, [...args]);
   obj.__proto__ = Func.prototype;
   return obj;
}

function CustomNew (Func, ...args) {
   // auto bind prototype
   const obj = Object.create(Func);
   Func.call(obj, ...args);
   // Func.apply(obj, [...args]);
   // obj.__proto__ = Func.prototype;
   return obj;
}

demo

function Car (name, year) {
  this.name = name;
  this.getName = function () {
    console.log('car\'s name =', this.name);
  };
  this.year = year;
  this.getYear = function () {
    console.log('car\'s year =', this.year);
  };
}

const BMW = new Car('BMW', 2012);
BMW.getName();
BMW.getYear();


function CustomNew (Func, ...args) {
   const obj = {};
   Func.call(obj, ...args);
   // Func.apply(obj, [...args]);
   obj.__proto__ = Func.prototype;
   return obj;
}

const Tesla = CustomNew(Car, 'Tesla', 2022);
Tesla.getName();
Tesla.getYear();