Object.create(..)和new(..)的内部实现-CSDN博客

Object.create()

经常会有这样的疑问？Object.create()到底做了什么工作？像这样两行代码有什么不同？

var obj ={a: 1}
var b = obj
var c = Object.create(obj)
复制代码

我们来做一点事情，

var obj ={a: 1}
var b = obj
console.log(obj.a) // 1
console.log(b.a) // 1
b.a = 2
console.log(obj.a) //2
复制代码

var obj ={a: 1}
var b = Object.create(obj)
console.log(obj.a) // 1
console.log(b.a) // 1
b.a = 2
console.log(obj.a) //1
复制代码

所以我们立马可以想到Object.create貌似创建了一个新的对象，这个对象继承（关联）了obj的属性，改变新对象的同名属性并不会影响原对象。

如果直接用“=”来赋值，只是一个对象的引用。

那么，为什么会这样呢？是因为Object.create()复制了一个新对象么？实际上并不是，只是Object.create()返回了一个新的空对象，并且这个空对象的构造函数的原型（prototype）是指向obj的。所以当我们访问新对象b.a的时候实际上是通过原型链访问的obj中的a。

当我们试图修改b.a的时候，这里有一个知识点（对象的遮蔽效应，如果修改对象的一个与原型链同名属性，那么会在当前对象中新建一个改属性，这个属性拥有更高级的访问优先级，所以就会遮蔽原型链中的同名属性）

所以Object.create的具体内部实现模拟

_create = function (o) {
    let F = function () {}
    F.prototype = o
    return new F()
}
复制代码

再来看这个例子

var person = {
	friends : ["Van","Louis","Nick"]
};
var anotherPerson = _create(person);
anotherPerson.friends.push("Rob");
var yetAnotherPerson = _create(person);
yetAnotherPerson.friends.push("Style");
alert(person.friends);//"Van,Louis,Nick,Rob,Style"

复制代码

相当于做了一次浅复制，新创建的各个对象实际上是会共享原始对象中的引用类型的值，这意味着person.friends不仅属于person所有,而且也会被anotherPerson以及yetAnotherPerson共享

实际上真正的Object.create()还可以传入第二个参数，这个参数与Object.defineProperties方法的第二个参数格式相同, 通过第二个参数是会在新对象中重新创建一个属性的，然后通过属性遮蔽原理避免修改原对象。

var person = {
	name : "Van"
};
var anotherPerson = Object.create(person, {
	name : {
		value : "Louis"
	}
});
alert(anotherPerson.name);//"Louis"
复制代码

Object.create(null) 会创建一个真正的空对象，并没有继承Object原型链上的方法

var a = {} 这并不是一个纯粹的空对象，它会继承原型链上的很多方法

new()

关于new的内部实现模拟

function _new () {
  // arguments实际上是一个类数组对象，需要转成数组
  let args = [].slice.call(arguments)
  // 第一个参数是构造函数，把它拿出来
  let constructor = args.shift()
  // Object.create()返回一个新对象，这个对象的构造函数的原型指向Foo
  let context = Object.create(constructor.prototype)
  // 在返回的context对象环境中执行构造函数，为新的context添加属性
  let result = constructor.apply(context, args)
  // 如果Foo显示的返回了一个对象，那么应该直接返回这个对象，而不用理会以上所有的操作，一般不会发生这种情况，但是new的实现的确是这样的逻辑
  // 这里之所以判断类型是否为object还要添加 != null 的判断，是因为null的typeof结果也是‘object’
  // 不同的对象在底层都表示为二进制，在Javascript中二进制前三位都为0的话会被判断为Object类型，null的二进制表示全为0，自然前三位也是0，所以执行typeof时会返回"object"
  return (typeof result === 'object' && result != null) ? result : context
}

function Foo (name) {
  this.name = name
}

Foo.prototype.getName = function() {
  console.log(this.name)
}

var a = _new(Foo, 'tom')
a.getName()

复制代码