Object.create()

MDN参考地址
啰嗦并有错误的参考, 尤其是那张原型链图

一、基本点

Object.create(proto, [propertiesObject]) // 主要使用第一个参数。

概念:Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__(实例化对象的__proto__ 相当于他所属的类的prototype)。

原理:

Object.create = function (obj) {
    var F = function () {};
    F.prototype = obj;
    return new F();
}

二、使用的坑

从原理可知道至少3个坑:

  1. 第一个参数尽量是实例对象,(但总有人传个函数)
  2. 返回对象是{}
  3. 如果用在原型继承上,会修改constuctor属性。
function B () {
    this.type = 'B';
};
B.prototype.say = function () { alert('hi'); };

// 第一种情况
const b = Object.create(B);
b.say(); // 报错
// 实际上变成下面的转换
b.__proto__ === B; // true
b.__proto__.portotype.say(); // hi
const b1 = b.__proto__(); // 等同于 b1 = new B();
b1 instanceof B; // true

// 第二种情况
b2 = Object.create(new B());
// 用in或者可Object.keys()实力属性检测
'type' in b2; // false
Object.keys(b); // []

// 第三种情况
b3 = Object.create(B.prototype);
b3 instanceof B; // false

三、使用场景基本上是es5的继承

function Parent () {
    // 实例属性
    this.money = '好多钱啊!';
}
Parent.prototype =  { 
    // todo 
};
function Child () {
    Parent.call(this);
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.contructor = Child;

总体来说,了解create方法,是检验你是否对原型链的了解。

猜你喜欢

转载自www.cnblogs.com/liangcheng11/p/9191014.html