0

原型方法是如何工作的？

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？你能解释一下这种行为吗？

4

3 回答 3

4

这是因为 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属性，所以这就是表达式被解析的内容。就这么简单，真的。
好吧，公平地说，我也花了一些时间来适应这一点，但一旦你明白了，这就是纯粹的逻辑。

顺便说一句，我在这里制作的图表是所谓的“原型链”的可视化表示。从 的角度来看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
于 2013-06-17T13:30:03.713 回答
2

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

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

  1. 代表团
  2. 级联

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

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

现在我可以通过调用来计算这个矩形的面积rectangle.area。但是，如果我想用不同的widthand创建另一个矩形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）。

当您尝试访问rectangle2JavaScript 上的属性时，首先尝试在rectangle2其自身上查找该属性。如果它无法找到该属性，rectangle2那么它会尝试在rectangle2(ie rectangle) 的原型上找到它，依此类推，直到：

  1. 它找到属性，在这种情况下，它返回与该属性关联的值。
  2. 它耗尽原型链（即它到达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属性u1，它只是隐藏它）：

u2.name = "roman";

然后删除 的name属性u1（这不会​​影响 的 name 属性u2）：

delete u1.name;

因此，当您登录时，u2.name它会显示roman：

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，因为u2代表u1：

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

我希望这能帮助你理解原型继承。如果您想了解更多信息，请阅读我关于原型继承为何重要的博文。

于 2013-06-17T14:22:08.027 回答
1

如果您尝试访问对象的属性，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);
于 2013-06-17T13:38:54.990 回答