JS|new

142 阅读2分钟

JavaScript这门语言生于乱世之中,常言道:乱世出英雄,越乱就越容易成功,JavaScript就是这乱世中的一匹黑马,最初的网景挖墙脚把Brendan Eich老爷子以可以任由老爷子(当年还是个大叔)创建一门独特的语言为由挖了过来。这门语言的目的就是让浏览器动起来。为了抗衡当时的巨无霸微软,联合SUN公司一起做了这个事情,刚开始是叫mocha,后来真正推出的时候改名为了JavaScript。可能是商业目的吧或者什么,反正最后就这样确定了。但是这两门语言其实是没什么太大的关系的,就算一些关键字,表现形式有些相似,但是底层的实现原理也是千差万别的。

其中就有今天要说的new关键字,熟悉java的同学都知道,在java中万物皆为对象,万物皆可new。也就有了那个段子:身为JAVA程序猿,整天创造对象,自己却还没对象。

好了,扯远了,对于函数我们已经知道了会为我们添加👆的两个属性code&name,还会有一个公开的prototype属性。那么在JavaScript中的new到底都做了什么呢?

那可都是王八屁股-规定,具体是什么,举个例子:

const obj = new MyObj()
  1. 创建一个emtry object
  2. 新创建的对象的[[prototype]]属性指向MyObj.prototype
  3. 将使用this声明的属性或者函数绑定到新对象上,这样我们才可以读取到属性值
  4. 构造函数如果不包含return语句,编译器会插入一个return this;,于是根据返回值返回对应的值

当我们都知道new做了什么操作的时候我们就可以自己实现一个myNew操作符了:

function myNew(construct, ...args) {
  // 1: create an emtry object
  // 2: 将obj的[[prototype]]属性指向construct.prototype
  const obj = Object.create(construct.prototype)
  // 3: 将construct内部的this指向obj,并执行
  const res = construct.apply(obj, args)
  // 4: 返回构造函数的返回值
  return res instanceof Object? res: obj
}

function Person(name, age) {
  this.name = name;
  this.age = age
}

const p1 = myNew(Person, 'lily', 18)
console.log(p1)
// Person {name: "lily", age: 18}