JavaScript 原型(prototype)-对象 - 如何访问继承

Question

目前，我尝试了解 Javascript 原型(prototype)对象。以下情况:

// new Person object
function Person () {
    this.greeth = function() {
        console.log("Good morning, " + this.name);
    };
};

// add new function to Person.prototype for inheritance
Person.prototype.sayWeight = function() {
    console.log(this.weight);
};

// create new friend object
var friend = {
    forename: "Bill",
    lastname: "Gates",
    weight: 78,
    sayhello: function() {
        console.dir("Hello " + this.forename + ' ' + this.lastname);
    }
};

// assign Person.prototype to friend.prototye (inheritance)
friend.prototype = Person;

console.dir(friend);

现在我的问题是:我将 Person 对象分配给我的 friend.prototype 。据我理解，“friend”应该具有Person.prototype的所有功能。 (即 sayWeight() friend.prototype = Person; 的原因)。但我唯一可以调用的函数是friend.sayhello。在我的输出( console.dir(friend); )中，我可以看到 sayWeight()函数，但是当我调用它时，出现错误 ( TypeError: Object #<Object> has no method 'sayWeight' )

你能解释一下这种行为吗？为什么我无法访问sayWeight()功能？

================================================== =========

另一个问题:

function Person() {
    this.name = "Bill Gates";
    this.weight = 78;
    this.sayHello = function() {
        console.log("Hello " + this.name);
    }
}

Person.prototype.sayWeight = function() {
    console.log(this.weight);
}

var friend = new Person();

sayWeight 之间有什么区别？和 sayHello功能？ sayWeight函数位于 Person 的原型(prototype)对象中 - 好吧，但是在这种情况下，原型(prototype)有什么优势？

Answer 1

Can you explain this behavior? Why can't I access the sayWeight() function?

因为创建对象后就无法更改其原型(prototype)。您正在设置原型(prototype)属性，但 javascript 解释器使用的内部原型(prototype)引用，即 __proto__ 仍然是有效使用的原型(prototype)，当前 __proto__ 正在引用Object.prototype.

如果您将这一行 friend.prototype = Person; 更改为 friend.__proto__ = Person.prototype; 那么一切都会正常。

如果您的浏览器支持 ES5，那么您可以使用 Object.create() 创建从给定原型(prototype)继承的对象，或者您可以使用《Javascript:The Good Parts》一书中采用的解决方法， David Flanagan 在他的书《Javascript 权威指南》中对此进行了一些扭曲:

// inherit() returns a newly created object that inherits properties from the
// prototype object p. It uses the ECMAScript 5 function Object.create() if
// it is defined, and otherwise falls back to an older technique.
function inherit(p) {
    if (p == null) throw TypeError(); // p must be a non-null object
    if (Object.create) // If Object.create() is defined...
        return Object.create(p); // then just use it.
    var t = typeof p; // Otherwise do some more type checking
    if (t !== "object" && t !== "function") throw TypeError();
    function f() {}; // Define a dummy constructor function.
    f.prototype = p; // Set its prototype property to p.
    return new f(); // Use f() to create an "heir" of p.
}

注意 __proto__ 不是标准化属性，不应在生产代码中使用，或者正如 @alex 在他的评论中指出的那样，它正在标准化.

注 2: 正如 @thg435 在评论中提到的，使用 __proto__ 属性的替代方法是使用 Object.setPrototypeOf()这是在 ES6 中标准化的。

编辑以解决最后一个问题

What is the difference between the sayWeight and the sayHello function ?

区别在于，现在 Person 的每个新实例(例如 new Person()) 将具有不同的 sayHello () 函数，而是一个共享的 sayWeight() 函数。

var friend = new Person();
var anotherFriend = new Person();

console.log(friend.sayHello === anotherFriend.sayHello); // OUTPUTS FALSE
console.log(friend.sayWeight === anotherFriend.sayWeight); // OUTPUTS TRUE

what advantages do I have from prototype in this case?

内存更少，代码在 person 的所有实例中重用，如果您已经有一个或多个 person 对象，并且您想向所有对象添加一个新方法而不依次修改每个对象，那么您可以将该方法添加到原型(prototype)，它们都将从它继承。