字节：模拟实现 new 操作符 #71

sisterAn · 2020-06-27T13:54:02Z

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new 关键字会进行如下的操作：

创建一个空的简单JavaScript对象（即{}）；
链接该对象（即设置该对象的构造函数）到另一个对象；
将步骤1新创建的对象作为this的上下文；
如果该函数没有返回对象，则返回this。

代码实现：

function new_object() {
  // 创建一个空的对象
  let obj = new Object()
  // 获得构造函数
  let Con = [].shift.call(arguments)
  // 链接到原型 （不推荐使用）
  obj.__proto__ = Con.prototype
  // 绑定 this，执行构造函数
  let result = Con.apply(obj, arguments)
  // 确保 new 出来的是个对象
  return typeof result === 'object' ? result : obj
}

警告: 通过现代浏览器的操作属性的便利性，可以改变一个对象的 [[Prototype]] 属性, 这种行为在每一个JavaScript引擎和浏览器中都是一个非常慢且影响性能的操作，使用这种方式来改变和继承属性是对性能影响非常严重的，并且性能消耗的时间也不是简单的花费在 obj.__proto__ = ... 语句上, 它还会影响到所有继承来自该 [[Prototype]] 的对象，如果你关心性能，你就不应该在一个对象中修改它的 [[Prototype]]。相反, 创建一个新的且可以继承 [[Prototype]] 的对象，推荐使用 Object.create()

—MDN

所以进一步优化 new 实现:

// 优化后 new 实现
function create() {
  // 1、获得构造函数，同时删除 arguments 中第一个参数
  Con = [].shift.call(arguments);
  // 2、创建一个空的对象并链接到原型，obj 可以访问构造函数原型中的属性
  let obj = Object.create(Con.prototype);
  // 3、绑定 this 实现继承，obj 可以访问到构造函数中的属性
  let ret = Con.apply(obj, arguments);
  // 4、优先返回构造函数返回的对象
  return ret instanceof Object ? ret : obj;
};

The text was updated successfully, but these errors were encountered:

vivimee · 2020-06-28T01:20:07Z

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new 关键字会进行如下的操作：

创建一个空的简单JavaScript对象（即{}）；
链接该对象（即设置该对象的构造函数）到另一个对象；
将步骤1新创建的对象作为this的上下文；
如果该函数没有返回对象，则返回this。

function myNew(fn, ...args) {
  const obj = {};
  obj.__proto__ = fn.prototype;
  const res = fn.call(obj, ...args);
  return typeof res === 'object' ? res : obj;
}

Leecason · 2020-06-28T01:26:52Z

function myNew(fn, ...args) {
  let obj = Object.create(fn.prototype); // 相当于 obj.__proto__ = fn.prototype
  
  let result = fn.apply(obj, args); // 执行构造方法, 绑定新 this
  
  // 如果构造方法 return 了一个对象，那么就返回该对象，否则返回创建的新对象
  return Object.prototype.toString.call(result) === '[object Object]' ? result : obj;
}

ningtiao · 2020-06-28T02:14:27Z

function myNew() {
  // 创建一个空对象
  let obj = {};
  //获取构造函数
  let Con = [].shift.call(arguments);
  // 设置对象的原型
  obj.__proto__ = Con.prototype;
  // 绑定this
  let result  = Con.apply(obj, arguments);
 // 判断返回值是不是一个对象,如果是,那么返回这个对象,否则返回新创建的对象
  return typeof result === 'object'  ? result  : obj;
}

CreatorMr · 2020-06-28T02:43:32Z

function _new(Fn, ...args) {
let obj = Object.create(Fn.prototype);
let res = Func.call(obj, ...args);
if(res !== null && /^(object|function)$/.test(typeof res) return res;
return obj;
}

xyj626553989 · 2020-06-28T03:07:26Z

function myNew(fn, ...args) {
  let _this = {}
  let result = fn.apply(_this, args)
  _this.__proto__ = fn.prototype
  return typeof (result === 'object' || typeof result === 'function') &&
    result != null
    ? result
    : _this
}

mrandpz · 2020-06-28T07:34:00Z

function _new(){
  const Constructor = Array.prototype.shift.call(arguments)
  const obj = {}
  obj.__proto__ = Constructor.prototype
  const ret = Constructor.apply(obj,arguments)
  return typeof ret === 'object' ? ret : obj
}

lxhguard · 2020-06-29T01:33:41Z

步骤：创建，执行，原型链，判断。

创建：创建一个新的空对象（对象字面量{}或者借用构造函数new Object）
执行：this指向新对象，执行构造函数，故应先获取构造函数。
原型链：设置原型链，新对象的__proto__指向构造函数的prototype
判断：判断传入对象的类型，是对象，则返回新对象；不是对象，则直接返回。

/**
 * @file 模拟new
 * @author 阿吉
 * @returns {object} 新对象
 */
function lxhNew(){
    // 1. 创建
    let obj = new Object();
    // 2.执行
    let Constructor = [].shift.call(arguments);
    let result = Constructor.apply(obj, arguments);
    // 3.原型链
    result.__proto__ = Constructor.prototype;
    // 4.判断
    return result instanceof Object? result: obj;
}

meta07 · 2020-06-29T13:36:03Z

function _new(fn, ...args) {
  const obj = Object.create(fn.prototype);
  const res = fn.apply(obj, args);
  const type = typeof res;
  if((type === "object" || type === "function") && res !== null) {
    return res;
  }
  return obj;
}

AsimoLoveGym · 2020-11-03T14:52:13Z

所以进一步优化 new 实现:

// 优化后 new 实现
function create() {
  // 1、获得构造函数，同时删除 arguments 中第一个参数
  Con = [].shift.call(arguments);
  // 2、创建一个空的对象并链接到原型，obj 可以访问构造函数原型中的属性
  let obj = Object.create(Con.prototype);
  // 3、绑定 this 实现继承，obj 可以访问到构造函数中的属性
  let ret = Con.apply(obj, arguments);
  // 4、优先返回构造函数返回的对象
  return ret instanceof Object ? ret : obj;
};

@sisterAn 最后优化的版本变量 Con的声明漏掉了let关键词

function create() {
  ....
  let Con = [].shift.call(arguments);
  ....
};

lixingyang-lxy · 2021-05-10T07:12:51Z

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new 关键字会进行如下的操作：

创建一个空的简单JavaScript对象（即{}）；

链接该对象（即设置该对象的构造函数）到另一个对象；

将步骤1新创建的对象作为this的上下文；

如果该函数没有返回对象，则返回this。

代码实现：
function new_object() {
  // 创建一个空的对象
  let obj = new Object()
  // 获得构造函数
  let Con = [].shift.call(arguments)
  // 链接到原型 （不推荐使用）
  obj.__proto__ = Con.prototype
  // 绑定 this，执行构造函数
  let result = Con.apply(obj, arguments)
  // 确保 new 出来的是个对象
  return typeof result === 'object' ? result : obj
}
警告: 通过现代浏览器的操作属性的便利性，可以改变一个对象的 [[Prototype]] 属性, 这种行为在每一个JavaScript引擎和浏览器中都是一个非常慢且影响性能的操作，使用这种方式来改变和继承属性是对性能影响非常严重的，并且性能消耗的时间也不是简单的花费在 obj.__proto__ = ... 语句上, 它还会影响到所有继承来自该 [[Prototype]] 的对象，如果你关心性能，你就不应该在一个对象中修改它的 [[Prototype]]。相反, 创建一个新的且可以继承 [[Prototype]] 的对象，推荐使用 Object.create()
—MDN

所以进一步优化 new 实现:
// 优化后 new 实现
function create() {
  // 1、获得构造函数，同时删除 arguments 中第一个参数
  Con = [].shift.call(arguments);
  // 2、创建一个空的对象并链接到原型，obj 可以访问构造函数原型中的属性
  let obj = Object.create(Con.prototype);
  // 3、绑定 this 实现继承，obj 可以访问到构造函数中的属性
  let ret = Con.apply(obj, arguments);
  // 4、优先返回构造函数返回的对象
  return ret instanceof Object ? ret : obj;
};

Con.apply(obj, arguments); 这一步是什么意思呀？

xllpiupiu · 2021-10-06T13:42:10Z

/**
 * new 使用Js原生实现
 */
function Parent(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        console.log(this.name);
    }
}
const _new = function (Parent, ...rest) {
    //1.以构造器Parent的prototype为原型创建新对象
    const child = Object.create(Parent.prototype);
    //2. 将this和调用参数传给构造器执行
    const result = Parent.apply(child, rest);
    return typeof result === 'object' ? result : child;
}
const p1 = _new(Parent,'www','23');
console.log(p1);
p1.sayName();

GreatAuk · 2021-10-14T10:41:58Z

/**
 * new 使用Js原生实现
 */
function Parent(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        console.log(this.name);
    }
}
const _new = function (Parent, ...rest) {
    //1.以构造器Parent的prototype为原型创建新对象
    const child = Object.create(Parent.prototype);
    //2. 将this和调用参数传给构造器执行
    const result = Parent.apply(child, rest);
    return typeof result === 'object' ? result : child;
}
const p1 = _new(Parent,'www','23');
console.log(p1);
p1.sayName();

因为 Parent 没有返回值，所以const result = Parent.apply(child, rest); 的 result 永远是 undefined

everthis · 2021-11-08T03:29:19Z

function newFn(f) {
  let obj, ret, proto;
  proto = Object(f.prototype) === f.prototype ? f.prototype : Object.prototype;
  obj = Object.create(proto);
  ret = f.apply(obj, Array.prototype.slice.call(arguments, 1));
  return Object(ret) === ret ? ret : obj
}

huangyingjie · 2022-12-10T06:15:33Z

不相信有人不查阅资料一次能写出来，目前来看最后一步这个写法最科学。

  if((type === "object" || type === "function") && res !== null) {
    return res;
  }

有同学使用Object.prototype.toString.call，但是忽略了，它的返回值不一定是[object Object]，比如Array，比如更改了Symbol.toStringTag的对象。总之还是太卷了

sisterAn added 字节手写源码 labels Jun 27, 2020

yang1212 mentioned this issue Feb 26, 2022

【手写系列】实现New操作符 yang1212/collection-about#31

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

字节：模拟实现 new 操作符 #71

字节：模拟实现 new 操作符 #71

sisterAn commented Jun 27, 2020 •

edited

Loading

vivimee commented Jun 28, 2020 •

edited

Loading

Leecason commented Jun 28, 2020 •

edited

Loading

ningtiao commented Jun 28, 2020 •

edited

Loading

CreatorMr commented Jun 28, 2020

xyj626553989 commented Jun 28, 2020

mrandpz commented Jun 28, 2020

lxhguard commented Jun 29, 2020

meta07 commented Jun 29, 2020

AsimoLoveGym commented Nov 3, 2020

lixingyang-lxy commented May 10, 2021

xllpiupiu commented Oct 6, 2021

GreatAuk commented Oct 14, 2021

everthis commented Nov 8, 2021

huangyingjie commented Dec 10, 2022

字节：模拟实现 new 操作符 #71

字节：模拟实现 new 操作符 #71

Comments

sisterAn commented Jun 27, 2020 • edited Loading

vivimee commented Jun 28, 2020 • edited Loading

Leecason commented Jun 28, 2020 • edited Loading

ningtiao commented Jun 28, 2020 • edited Loading

CreatorMr commented Jun 28, 2020

xyj626553989 commented Jun 28, 2020

mrandpz commented Jun 28, 2020

lxhguard commented Jun 29, 2020

meta07 commented Jun 29, 2020

AsimoLoveGym commented Nov 3, 2020

lixingyang-lxy commented May 10, 2021

xllpiupiu commented Oct 6, 2021

GreatAuk commented Oct 14, 2021

everthis commented Nov 8, 2021

huangyingjie commented Dec 10, 2022

sisterAn commented Jun 27, 2020 •

edited

Loading

vivimee commented Jun 28, 2020 •

edited

Loading

Leecason commented Jun 28, 2020 •

edited

Loading

ningtiao commented Jun 28, 2020 •

edited

Loading