Question

原型方法如何运作？

var object, u1, u2;
object = function(o) {
    var F = function() {};
    F.prototype = o;
    return new F();
};
u1 = {'name': 'adam'};
u2 = object(u1);
u2.name = 'roman';
delete u1.name;
console.log(u2.name);
delete u2.name;
console.log(u2.name);
u1.name = 'tytus';
console.log(u2.name);

roman
undefined
titus

为什么要输出第三个console.log？你能解释一下这种行为吗？

Answer 1

这是因为JS解析引用或评估表达式的方式。发生的事情与此类似：

u2[name] ===> JS checks instance for property name<------------||
    || --> property not found @instance, check prototype (u1)  ||
    ===========> u1.name was found, return its value ----------||
         ||
         || if it weren\'t found here:
         ==========> Object.prototype.name: not found check prototype?
             ||
             =======>prototype of object.prototype is null, return undefined

第一次记录u2.name时，name是一个实例属性，因此JS将表达式解析为该字符串常量（roman）。然后你删除了它，所以在尝试再次访问它时，JS解析为u1.name（u2的原型），它也没有name属性，也没有找到Object.prototype.name，因此表达式已解析为undefined。

在第三种情况下，重复相同的步骤，只有这次u2 的原型具有name属性，因此表达式被解析为。这真的很简单。
好吧，公平地说，我花了一些时间来习惯这个，但是一旦你明白了，它就是纯粹的逻辑。

顺便说一下，我在这里做的图表是所谓的“em>”原型链“的直观表示。从u2的角度来看，链是u1 -> Object，它根本不是一个非常大的链（如果你担心的话）：它与Array的链非常相似实例：

console.log(Object.getPrototypeOf(Array.prototype));//Logs Object

因此，数组实例的原型链，比如var foo = [];）看起来像这样：

Array.prototype => Object.prototype

这意味着：

foo = []
foo[123];//does not exists

通过原型链触发类似的查找，以便表达式解析为undefined：

foo[123] ===> 123 is coerced to string first BTW  <------------||
    || --> property not found @instance, check Array.prototype ||
    ===========> Array.prototype[123] not found                ||
         ||                                                    ||
         ==========> no Object.prototype[123]: check prototype ||
             ||                                                ||
             =======>prototype of object.prototype is null, return undefined

Answer 2

JavaScript是一种面向对象的编程语言。然而，与其他面向对象的语言（如C ++和Python）不同，它没有类。相反，JavaScript具有原型继承。

在原型面向对象编程语言中，您只有对象。通过以下两种方式之一实现继承：

Delegation
Concatenation

假设我有一个名为rectangle的对象，如下所示：

var rectangle = {
    height: 5,
    width: 10,
    area: function () {
        return this.width * this.height;
    }
};

现在我可以通过调用rectangle.area来计算这个矩形的面积。但是，如果我想创建另一个具有不同width和height的矩形呢？这是您使用object函数的地方（此函数在大多数JavaScript解释器中本身可用Object.create）：

var rectangle2 = Object.create(rectangle);

rectangle2.height = 10;
rectangle2.width = 20;

alert(rectangle2.area()); // 200

这里发生的是对象rectangle2通过委托继承自对象rectangle。为了帮助您查看正在发生的事情，请查看下图：

                null
                 ^
                 | [[Proto]]
                 |
 +-------------------------------+
 |        Object.prototype       |
 +-------------------------------+
 |              ...              |
 +-------------------------------+
                 ^
                 | [[Proto]]
                 |
 +-------------------------------+
 |           rectangle           |
 +-------------------------------+
 |           height: 5           |
 +-------------------------------+
 |           width: 10           |
 +-------------------------------+
 |           area: ...           |
 +-------------------------------+
                 ^
                 | [[Proto]]
                 |
 +------------------------------+
 |          rectangle2          |
 +------------------------------+
 |          height: 10          |
 +------------------------------+
 |          width:  20          |
 +------------------------------+

Object.create函数创建一个对象（rectangle2），其内部[[Proto]]属性指向对象rectangle（rectangle2的原型）。

当您尝试访问rectangle2上的属性时，JavaScript首先尝试在rectangle2上找到该属性。如果它无法在rectangle2找到该属性，那么它会尝试在rectangle2原型（即rectangle）上找到该属性，依此类推，直到：

找到属性，在这种情况下，它返回与该属性关联的值。
耗尽原型链（即达到null），在这种情况下它会返回undefined。

因此，如果我尝试访问rectangle2.width，则会返回20。但是，如果我尝试访问rectangle2.area，则会返回rectangle.area函数而不是undefined。简而言之，这就是你的原型继承。

现在，您在代码中首先创建一个对象u1：

var u1 = {
    name: "adam"
};

然后创建一个继承自u2：

u1

var u2 = Object.create(u1);

之后，您在name上设置了一个新的u2属性（这并不会覆盖name的{{1}}属性，只会隐藏它：< / p>

u1

然后删除u2.name = "roman";的{{1}}属性（这不会影响name的名称属性）：

u1

因此，当您记录u2时，它会显示delete u1.name;：

u2.name

然后您也删除roman的{{1}}属性：

console.log(u2.name); // roman

因此，当您再次登录name时，会显示u2：

delete u2.name;

最后，您将u2.name设置为undefined：

console.log(u2.name); // undefined

因此，当您再次记录u1.name时，会显示tytus，因为u1.name = "tytus";委托给u2.name：

tytus

我希望这有助于您了解原型继承。如果您想了解更多信息，请阅读Why Prototypal Inheritance Matters上的博文。

Answer 3

如果您尝试访问对象的属性，JavaScript首先检查实际对象是否具有该属性，如果不是，则检查其构造函数的原型是否具有该属性：

var object, u1, u2;
object = function(o) {
    var F = function() {};
    F.prototype = o;
    return new F();
};

//u1 is just a "normal" JavaScript Object, created by the Object constructor function
u1 = {'name': 'adam'};
//u2 is an object, that was created by a custom constructor function (F) with the prototype u1
u2 = object(u1);

//add a local property "name" to u2
u2.name = 'roman';

//delete the property "name" from u1 (and thereby from the prototype of u2)
delete u1.name;

//prints "roman" because u2 has a local property "name"
console.log(u2.name);

//delete the local property "name" from u2
delete u2.name;

//neither u2 nor the prototype of u2 have a property name -> undefined
console.log(u2.name);

//add a property "name" to u1 (and thereby to the prototype of u2)
u1.name = 'tytus';

//prints "tytus" because u2 doesn't have a local property and therefor the property "name" of its prototype is used.
console.log(u2.name);

关于原型功能的问题

3 个答案: