关于原型函数的问题

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属性，所以表达式就是这样解析出来的。事情就这么简单，真的。

好吧，公平地说，我也花了一些时间来适应这一点，但一旦你理解了，它就是纯粹的逻辑。

顺便说一句，我在这里制作的图表是被称为“原型链”的可视化表示。从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具有原型继承。

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

1. Delegation
2. 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)上找到它，依此类推，直到：

1. 它找到属性，在这种情况下它返回与该属性相关的值。
2. 它耗尽原型链(即它到达null)，在这种情况下它返回undefined.

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

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

var u1 = {
    name: "adam"
};

然后创建一个继承自u1的对象u2

var u2 = Object.create(u1);

在此之后，您在u2上设置了一个新的name属性(这不会覆盖u1的name属性，只是将其隐藏起来)：

u2.name = "roman";

然后删除u1的name属性(这不会影响u2的name属性)：

delete u1.name;

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

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

然后还要删除u2的name属性：

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

我希望这能帮助你理解原型继承。如果你想了解更多，请阅读我在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);