javascript - 为什么Object.create没有按照JavaScript的原型(prototype)继承做我期望的工作

我仍在尝试掌握此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

如果我添加对超级构造函数的调用，它会改变一点：
链接：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并没有真正执行任何操作，或者它需要调用超级构造函数来产生任何变化，但即使那样也不是完美的。



尝试3

删除对Object.create的调用，并将调用留给超级构造函数。
链接：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”的上下文已更改，我知道发生了这种情况，但是我似乎无法很好地理解为什么或何时理解我的真实情况。

最佳答案

JavaScript继承的关键是原型链。每当发生属性查询时：

something.propertyName

运行时首先检查直接引用的对象。如果找不到该属性，则搜索检查由原型内部属性链接的对象链（通常是一个对象）的过程。

因此，使继承起作用的关键是创建具有原型链的对象。传统的方式是使用new运算符和构造函数：

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

现在可以创建一个对象：

var something = new Constructor();

和引用的属性：

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

请注意，此构造函数不会做任何事情。它可以做一些事情，但是它仅通过现有的并拥有该原型对象就可以发挥其使继承工作的作用。

Object.create()函数只是用原型链制作对象的另一种方法：

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

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

那也可以写成

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

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

当然，当要用作原型的对象是在代码中创建并为此目的保留的某个对象，而不是上面示例中的即时对象时，Object.create()更具意义。要使用您的测试代码：

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作为原型创建对象，它们将从该对象继承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引用的对象都不具有自己的属性。

关于javascript - 为什么Object.create没有按照JavaScript的原型(prototype)继承做我期望的工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35724719/