有关原型功能的问题

这是因为 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

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

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

1. 代表团
2. 串联

假设我有一个名为 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"
};

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

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

我希望这能帮助你理解原型遗传。如果您想了解更多信息，请阅读我的博客文章 为什么原型遗传很重要.

如果你尝试访问对象的属性，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);