new操作符

2019-02-27 本文已影响0人 Camilia_yang

最近在掘金上看到大佬 yck 的文章重学 JS 系列：聊聊 new 操作符
把new操作符的作用，如何自己实现new操作符写得很清晰，遂把核心思想整理过来，加强理解。
先通过下面的代码，了解一下new的作用：

/* 选自 yck 文章 */
function Test(name) {
  this.name = name
}
Test.prototype.sayName = function () {
    console.log(this.name)
}
const t = new Test('yck')
console.log(t.name) // 'yck'
t.sayName() // 'yck'

总结一下new的作用

new 通过构造函数 Test 创建出来的实例可以访问到构造函数中的属性
new 通过构造函数 Test 创建出来的实例可以访问到构造函数原型链中的属性，也就是说通过 new 操作符，实例与构造函数通过原型链连接了起来

自己实现new操作符

首先我们再来回顾下 new 操作符的几个作用：

new 操作符会返回一个对象，所以我们需要在内部创建一个对象
这个对象，也就是构造函数中的 this，可以访问到挂载在 this 上的任意属性
这个对象可以访问到构造函数原型上的属性，所以需要将对象与构造函数链接起来
返回原始值需要忽略，返回对象需要正常处理

function create(Con, ...args) {
  let obj = {}
  Object.setPrototypeOf(obj, Con.prototype)
  let result = Con.apply(obj, args)
  return result instanceof Object ? result : obj
}

这就是一个完整的实现代码，我们通过以下几个步骤实现了它：

1.首先函数接受不定量的参数，第一个参数为构造函数，接下来的参数被构造函数使用
2.然后内部创建一个空对象 obj
3.因为 obj 对象需要访问到构造函数原型链上的属性，所以我们通过 setPrototypeOf 将两者联系起来。这段代码等同于 obj.proto = Con.prototype
4.将 obj 绑定到构造函数上，并且传入剩余的参数
5.判断构造函数返回值是否为对象，如果为对象就使用构造函数返回的值，否则使用 obj，这样就实现了忽略构造函数返回的原始值

接下来我们来使用下该函数，看看行为是否和 new 操作符一致

function Test(name, age) {
  this.name = name
  this.age = age
}
Test.prototype.sayName = function () {
    console.log(this.name)
}
const a = create(Test, 'yck', 26)
console.log(a.name) // 'yck'
console.log(a.age) // 26
a.sayName() // 'yck'

原文：
new一般后面跟着一个构造函数，比如我们熟悉的new Object(),new Array()...
我们知道 new会创造出一个实例，这个实例（对象）会有一个__proto__属性，这个属性指向了这个构造函数的共有属性。那么,new 构造函数时发生了什么呢？我们看一下：

如何编写一个构造函数
我们自己写一个构造函数create士兵(),它的结果是返回一个具有自有属性和共有属性的对象，自有属性是由用户传进来的，所有的共有属性作为一个对象，士兵的__proto__会指向这个对象。但如果按照上面的函数，每次new一个对象的时候，就会在内存里产生一个共有属性，这是很浪费内存的；如果把红色方框的共有属性对象移到函数外面，再把它的赋给this.__proto__，构造函数和其共有属性联系就会变得不那么紧密，一旦原型受到影响，构造函数create士兵()相当于就没有用了。

构造函数的原理
JS之父最后想到的办法是：把共有属性对象存到构造函数create士兵()的prototype属性中。

当new Function()时，其实发生了：创建一个临时对象{}，将{}赋给this，把Function.prototype赋给this.__proto__，上面几步是不用我们自己写的，我们只需在new的时候，把自有属性的值传进去，就可以了。

为Function.prototype赋值
另外，Function.prototype最初是存有constructor: Function这个属性的，表示其构造函数是Function。我们在编写一个构造函数的共有属性时，要注意不能把它覆盖掉。要么采用Function.prototype.xxx=XXX的形式赋值，要么当把共有属性的集合作为一个对象赋给Function.prototype时，要把constructor: Function也写进去。

构造函数Object()、Array()

总结

new操作符创建对象可以分为四个步骤：
1、创建一个空对象，这个对象的类型是object
2、将所创建的对象的proto属性值设为prototype属性值（关系：instance.constructor.prototype=instance.proto）
3、执行构造函数中的代码，构造函数中的this指向该对象
4、返回该对象

new操作符

自己实现new操作符

总结

猜你喜欢

热点阅读