当通过 Object.setPrototypeOf() 向函数原型添加属性时，对象为空

Question

让我们考虑下面的代码，

let f = function () {
   this.a = 1;
   this.b = 2;
}

let o = new f(); 
f.prototype.c = 3;
console.log(Object.getPrototypeOf(o)); 

打印

[对象对象] { c: 3 }

但如果我使用 setPrototypeOf 而不是 f.prototype.c，则对象为空。

let f = function () {
   this.a = 1;
   this.b = 2;
}

let o = new f();   
Object.setPrototypeOf(f, {c: 3}); 
console.log(Object.getPrototypeOf(o));

打印

[对象对象] { ... }

但是如果我使用

let f = function () {
   this.a = 1;
   this.b = 2;
}

let o = new f(); 
Object.setPrototypeOf(f, {c: 3}); 
console.log(Object.getPrototypeOf(f)); 

打印

[对象对象] { c: 3 }

简而言之，问题是，当使用 Object.setPrototypeOf(o) 时，对象打印为空， 并且当使用 Object.setPrototypeOf(f) 时，对象会打印添加的属性。 在使用 f.prototype.c = 3 设置原型时，两个对象都可以访问它 原型和函数原型。

Answer 1

当你Object.setPrototypeOf(f, ... )时，链条实际上是3长：

o的原型是f。 f的原型是{c:3}。

所以你的例子并不等同：

1) 在第一个示例中，您将属性c 直接添加到f 的实例将使用的原型中，因此o 的原型包含c，因为f 是o 的构造函数。

在最后两个示例中，您将c 添加到f 的原型中，因此原型f 是使用创建的。请记住，函数也只是对象，并且您正在设置用作构造函数的函数的原型。所以o 的原型包含f 的原型，其中包含c。

2) 在第二个例子中，你得到PrototypeOf() o。 在第三个中，你得到PrototypeOf() f。因此只有第三个示例再次显示c。

3) 如果您检查 chrome 中的元素，您会看到第二个示例的构造函数是 f，因为您询问了 o 的原型。

在第三个示例中，您将看到构造函数是 Object，因为您询问 f 的原型，它已设置为对象 {c}，并从 o 跳过原型到 @987654348 @。

PS：我知道这可能是一个令人困惑的解释。

PPS：如果你想要继承，坚持 child.prototype = Object.create( parent.prototype ); child.constructor = child; 或 ES6 类 class child extends parent 可以使用对我个人而言不会造成混淆。

var first = function first() {
  this.value = 'first function';
};
// before .prototype.extra, first inherist from Function.
console.log( 'constructor of first before:', first.constructor );
first.prototype.extra = 'implemented with .prototype.extra';
// after .prototype.extra, first still inherits from Function, we did not change anything to first itself.
console.log( 'constructor of first after:', first.constructor );
// When first is used as a prototype, the instances will get "extra".
// Aka, everything that inherist from first.
var first_instance = new first();
console.log( 'extra on instance of first:', first_instance.extra );
// f itself does NOT have the extra property, only instances of first do.
console.log( 'extra on first itself:', first.extra );
console.log( '------' );
var second = function second() {
  this.value = 'second function';
};
// before setPrototypeOf, second inherist from Function, like above.
console.log( 'constructor of second before:', second.constructor );
Object.setPrototypeOf( second, { extra: 'implemented with .setPrototypeOf()' });
// after setPrototypeOf, second inherist from Object, we broke the default inheritance chain.
console.log( 'constructor of second after:', second.constructor );
// BY doing this, we effectively turned second into an object.
// It no longer is a function, so we cannot use function methods like .call() or .apply()
console.log( 'second is object, not function: function.apply', second.apply );
console.log( 'second is object, not function: object.hasOwnProperty', second.hasOwnProperty );
// When second is used as a prototype, the instances will not get "extra".
var second_instance = new second();
console.log( 'extra on instance of second:', second_instance.extra );
// second itself Does have the extra property, sine we assigned it on the prototype used by second. not when second is used as the prototype.
console.log( 'extra on second itself:', second.extra );