javascript - 为什么 Object.create 在 JavaScript 中的原型(prototype)继承方面没有达到我的预期

Question

我仍在尝试掌握这种 JS 继承的东西是如何工作的，每次我认为我拥有它......我显然没有。

尝试 1

链接:https://jsfiddle.net/jacquesvanderhoven/4qkvdn46/

代码

var baseSettings = function ()
{
    this.message = "base message";
    this.getMessage = function(){
        return  "base message from function";
    }
};

var homeSettings = function ()
{
    this.name = "name";
    this.getName = function()
    {
        return "name from function";
    };
};

homeSettings.prototype = Object.create(baseSettings);

var $log = $("#log");
var base = new baseSettings();
var home = new homeSettings();

$log.html($log.html() + "<br /> baseSettings.message: '" + base.message + "'");
$log.html($log.html() + "<br /> baseSettings.getMessage(): '" + base.getMessage() + "'");
$log.html($log.html() + "<br /> homeSettings.name: '" + home.name + "'");
$log.html($log.html() + "<br /> homeSettings.getName(): '" + home.getName() + "'");
$log.html($log.html() + "<br /> homeSettings.message: '" + home.message + "'");
$log.html($log.html() + "<br /> homeSettings.getMessage(): '" + home.getMessage() + "'");

结果

baseSettings.message: '基本消息'
baseSettings.getMessage(): '来自函数的基本消息'
homeSettings.name: ''
homeSettings.getName(): '函数名称'
homeSettings.message: '未定义'

其中有两个实际上会抛出 JS 异常。

<小时/>

尝试 2

如果我添加对 super 构造函数的调用，它会稍微改变一下:
链接:https://jsfiddle.net/jacquesvanderhoven/4qkvdn46/5/

代码

var baseSettings = function ()
{
    this.message = "base message";
    this.getMessage = function(){
        return  "base message from function";
    }
};

var homeSettings = function ()
{
    baseSettings.call(this);
    this.name = "name";
    this.getName = function()
    {
        return "name from function";
    };
};

homeSettings.prototype = Object.create(baseSettings);

var $log = $("#log");
var base = new baseSettings();
var home = new homeSettings();

$log.html($log.html() + "<br /> baseSettings.message: '" + base.message + "'");
$log.html($log.html() + "<br /> baseSettings.getMessage(): '" + base.getMessage() + "'");
$log.html($log.html() + "<br /> homeSettings.name: '" + home.name + "'");
$log.html($log.html() + "<br /> homeSettings.getName(): '" + home.getName() + "'");
$log.html($log.html() + "<br /> homeSettings.message: '" + home.message + "'");
$log.html($log.html() + "<br /> homeSettings.getMessage(): '" + home.getMessage() + "'");

结果

baseSettings.message: '基本消息'
baseSettings.getMessage(): '来自函数的基本消息'
homeSettings.name: '' (注意!这是空的，不应该是)
homeSettings.getName(): '函数名称'
homeSettings.message: '基本消息'
homeSettings.getMessage(): '来自函数的基本消息'

其中大多数都有效，但我不明白为什么 homeSettings.name 不返回任何内容？

在我看来，Object.create 实际上什么也没做，或者更确切地说，它需要调用 super 构造函数才能产生任何影响，但即便如此，它也并不完美。

<小时/>

尝试 3

删除对 Object.create 的调用并将调用留给 super 构造函数。
链接:https://jsfiddle.net/jacquesvanderhoven/4qkvdn46/8/

代码

var baseSettings = function ()
{
    this.message = "base message";
    this.getMessage = function(){
        return  "base message from function";
    }
};

var homeSettings = function ()
{
    baseSettings.call(this);
    this.name = "name";
    this.getName = function()
    {
        return "name from function";
    };
};

var $log = $("#log");
var base = new baseSettings();
var home = new homeSettings();

$log.html($log.html() + "<br /> baseSettings.message: '" + base.message + "'");
$log.html($log.html() + "<br /> baseSettings.getMessage(): '" + base.getMessage() + "'");
$log.html($log.html() + "<br /> homeSettings.name: '" + home.name + "'");
$log.html($log.html() + "<br /> homeSettings.getName(): '" + home.getName() + "'");
$log.html($log.html() + "<br /> homeSettings.message: '" + home.message + "'");
$log.html($log.html() + "<br /> homeSettings.getMessage(): '" + home.getMessage() + "'");

结果

baseSettings.message: '基本消息'
baseSettings.getMessage(): '来自函数的基本消息'
homeSettings.name: '名称'
homeSettings.getName(): '函数名称'
homeSettings.message: '基本消息'
homeSettings.getMessage(): '来自函数的基本消息'

结论

我正在研究我在 SO 上看到的各种示例，我必须承认我还没有达到理解为什么继承在 JS 中有效或无效的程度。我遇到的另一个问题是，在各种测试中，“this”的上下文发生了变化，我知道这种情况会发生，但我似乎无法很好地理解为什么或何时发生，以便我确切地知道发生了什么。

Answer 1

JavaScript 中继承的关键是原型(prototype)链。每当发生属性查找时:

something.propertyName

运行时首先检查直接引用的对象。如果没有找到该属性，则检查由原型(prototype)内部属性链接的对象链(通常只是一个对象)的过程。

因此，使继承发挥作用的关键是创建具有原型(prototype)链的对象。传统的做法是使用 new运算符和构造函数:

function Constructor() {}
Constructor.prototype = {
  propertyName: function() { alert("hello world"); }
};

现在可以创建一个对象:

var something = new Constructor();

以及引用的属性:

something.propertyName(); // "hello world"

请注意，此构造函数并没有执行任何操作。它可以做一些事情，但它只需通过存在并拥有该原型(prototype)对象来履行其使继承工作的作用。

Object.create()函数只是使用原型(prototype)链创建对象的另一种方式:

var something = Object.create({
  propertyName: function() { alert("hello world"); }
});

something.propertyName(); // "hello world"

也可以这么写

var something = Object.create(Constructor.prototype);

重用第一个示例中的原型(prototype)对象。

当然，Object.create()当用作原型(prototype)的对象是在代码中创建并为此目的保留的某个对象时，而不是像上面的示例中那样的动态对象时，就更有意义了。要使用您的测试代码:

var baseSettings = { // plain object, not a constructor
  message: "base message",
  getMessage: function() {
    return "base message: " + this.message;
  }
};

var homeSettings = Object.create(baseSettings, {
  name: "home name",
  getName: function() {
    return "home name: " + this.name;
  }
});

现在可以使用 homeSettings 创建对象作为原型(prototype)，他们将继承name和getName来自该对象，以及 message和getMessage来自baseSettings对象:

var x = Object.create(homeSettings);
console.log(x.name); // "home name"
console.log(x.getName()); // "home name: home name"
console.log(x.message); // "base message"
console.log(x.getMessage()); // "base message: base message"

这可以通过构造函数而不是 Object.create() 来完成。 :

function HomeBase() {};
HomeBase.prototype = homeSettings;

var x = new HomeBase();

和console.log()的相同序列调用会产生相同的结果。无论哪种情况 - 通过 new或通过 Object.create() — 这些示例中 x 引用的对象没有自己的属性。