JavaScript原型的理解

Question

我使用下面的JS代碼玩。我有兩個問題。

1）爲什麼用戶不是author_1的原型？

2）爲什麼在Author.prototype author_1的重置變爲不是Authorof的Authorof後？

function User(_fname){ 
    this.fname = _fname; 
    return this; 
} 

function Author(){ 
    this.book = "Magick of JS"; 
    return this; 
} 

Author.prototype = new User('John'); 
author_1 = new Author; 

console.log("======================="); 
console.log(author_1 instanceof Author);  // true 
console.log(author_1 instanceof User);  // true 
console.log(User.isPrototypeOf(author_1)); // false (>>>> 1) WHY? <<<<) 
console.log(author_1.constructor);   // User(_fname) 
console.log(author_1.__proto__);    // User { fname="John"} 
console.log(Object.getPrototypeOf(author_1)); // User { fname="John"} 
console.log(author_1.constructor.prototype); // User {} 

Author.prototype = new User('Alex'); 
author_2 = new Author; 

console.log("======================="); 
console.log(author_1 instanceof Author);  // false (>>>> 2) WHY? <<<<) 
console.log(author_1 instanceof User);  // true 
console.log(User.isPrototypeOf(author_1)); // false 
console.log(author_1.constructor);   // User(_fname) 
console.log(author_1.__proto__);    // User { fname="John"} 
console.log(Object.getPrototypeOf(author_1)); // User { fname="John"} 
console.log(author_1.constructor.prototype); // User {} 

console.log("======================="); 
console.log(author_2 instanceof Author);  // true 
console.log(author_2 instanceof User);  // true 
console.log(User.isPrototypeOf(author_2)); // false 
console.log(author_2.constructor);   // User(_fname) 
console.log(author_2.__proto__);    // User { fname="Alex"} 
console.log(Object.getPrototypeOf(author_2)); // User { fname="John"} 
console.log(author_2.constructor.prototype); // User {} 

console.log("======================="); 
console.log(author_1); // User {book: "Magick of JS", fname: "John"} 
console.log(author_2); // User {book: "Magick of JS", fname: "Alex"} 

謝謝！

UPDATE

感謝您的幫助！但現在我無法理解AUTHOR_1如何能知道，這是一個作者

function log(){ console.log.apply(console, arguments) } 

function User(_fname){ 
    this.fname = _fname; 
    return this; 
} 

function Author(){ 
    this.book = "Magick of JS"; 
    return this; 
} 

Author.prototype = new User('John'); 
author_1 = new Author; 

log(author_1);    // User { book="Magick of JS", fname="John"} 
log(author_1.__proto__); // User { fname="John"} 
log(author_1.constructor); // User(_fname) 

log(author_1 instanceof Author); // true 

// How author_1 kowns that it's an Author? Where is property? 
// Can I find it in web inspector? Or it's hidden value? 

Answer 1

1. 對象「用戶」是構造函數。 「用戶」的每個實例是不同的對象。因此，User.isPrototypeOf(author_1)是false，因爲對象「用戶」根本不是原型;您創建的實例就是原型。

2. 當您更改原型時，先前創建的對象會保留其原始原型鏈，因此運行系統似乎不再是「作者」的實例。

Answer 2

1） 新操作者的行爲是這樣的：

var x = new F() 
// approximately the same as this: 
x = Object.create(F.prototype); // x inherits from the prototype of F 
F.call(x); // F is called with x as 'this' 

出於這個原因：

User.isPrototypeOf(author_1) // false because 
User.prototype.isPrototypeOf(author_1) // true 

資源： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new

2） INSTANCEOF作用就像這：

x instanceof F 
// aproximately the same as this: 
Object.getPrototypeOf(x) === F.prototype 

當你做F.prototype = {}，你改變F的屬性，但並沒有改變已創建的對象x的原型鏈。

var initialProto = {id:1}; 
F.prototype = initialProto; 
var x = new F(); 

var anotherProto = {id:2}; 
F.prototype = anotherProto ; 

Object.getPrototypeOf(x) === initialProto // true; 
initialProto === anotherProto // obviously false 

資源： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof