2

我玩下面的 JS 代码。我有两个问题。

1）为什么User不是author_1的原型？

2) 为什么在Author.prototype 重置后author_1 变成了不是Author 的instance？

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"}

谢谢！

更新

感谢帮助！但是现在我不明白 author_1 怎么知道它是 Author

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?
4

2 回答 2

4

  1. 对象“用户”是构造函数。“用户”的每个实例都是一个不同的对象。因此，User.isPrototypeOf(author_1)是false因为对象“用户”根本不是原型；您创建的那个实例就是原型。

  2. 当您更改原型时，先前创建的对象将保留其原始原型链，因此在运行时系统看来它不再是“作者”的实例。

于 2013-10-23T14:03:42.997 回答
3

1) new 运算符的行为如下：

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

于 2013-10-23T14:13:39.477 回答