javascript - JS 类变量更改出现在原型(prototype)之外

Question

我目前正在通过使用我的函数/变量对象扩展函数原型(prototype)来设置 JavaScript 类，如下所示......

//class shorthand
var clss = function(args){
    var c = function() {};
    _.extend(c.prototype, args); //using underscore.js
    return c;
};

//class definition
var ThisIsMyClass = clss({
    varExample: 5,
    test: function() {
        console.log(this.varExample);
    },
    alter: function(){
        this.varExample = 8;
    }
});

//class initialisers
var hello = new ThisIsMyClass();
var hi = new ThisIsMyClass();
var ayup = new ThisIsMyClass();

我的问题是，所有内容都驻留在 ThisIsMyClass.prototype 中，可以调用函数并读取变量，但是当值更改时，它们会出现在该对象的原型(prototype)之外(并且还以其原始值保留在原型(prototype)中)？

运行此代码后

//class initialisers
hello.varExample = 6;
hi.alter();
//look at object structure
console.log(hello);
console.log(ayup);
console.log(hi);
//trace the values
hello.test();
ayup.test();
hi.test();

控制台看起来像这样

原型(prototype)是否只是对结构的引用，然后当进行任何更改时，它会将它们复制到对象本身？

Answer 1

当您读取对象的属性时，解释器首先在实际对象本身中查找该属性。如果在那里找到它，它就会返回该值。如果它在实际对象上找不到该属性，则会在原型(prototype)上查找。如果它在原型(prototype)上找到该属性，则会返回该值。

当您在对象上设置属性时，它总是在实际对象上设置该属性(而不是在原型(prototype)上)。因此，一旦您在对象上设置了属性，对该属性的任何读取都将来自您在实际对象上设置的属性，而不是原型(prototype)上的属性。直接在对象上设置属性本质上是“隐藏”或“覆盖”原型(prototype)上设置的值。您可以将原型(prototype)视为属性的默认值，但是一旦您在对象本身上设置了原型(prototype)值，就不再使用原型(prototype)值。

function foo() {}

foo.prototype.greet = function() {
    console.log("Hello");
}

var x = new foo();
x.greet();        // will log "Hello" - finds method on the prototype

// set new method - will set this property directly on the object itself
//   overriding what was on the prototype
x.greet = function() {
    console.log("Goodbye");
}
x.greet();        // will log "Goodbye" - finds method on the object

演示:http://jsfiddle.net/jfriend00/h6akb/

<小时/>

在 JavaScript 对象的实现中，该对象既有对象本身的一组属性，又有对其原型(prototype)的引用。查找属性时，首先在对象本身上查找。如果在那里找不到，那么解释器将获取对原型(prototype)的引用并在原型(prototype)对象上查找属性。原型(prototype)对象本身只是另一个对象，因此解释器直接在原型(prototype)对象上查找属性，如果找到则返回它。如果没有找到，它会检查原型(prototype)对象本身是否有原型(prototype)等等(允许继承链)。