如何继承这个javascript函数

Question

我试图更好地理解 javascript 中的继承。我的目标是编写一个函数来声明一些变量并设置一个环境，以便其他函数可以基于它构建。我有点像 Ruby 中的 mixins 思路。这是一个不起作用的简单示例。

function baseFunction(){

  this.my_var = "hello world";

};

function speakMessage(){

  alert(this.my_var);

}

speakMessage.prototype = baseFunction();

speakmessage();

我想如果我将原型设置为 baseFunction，那么将在 baseFunction 中搜索任何在 speakMessage 函数中找不到的属性。这不对吗？我该如何让它发挥作用？

Answer 1

简单的答案，但是...speakMessage();（大 M）:-)

Javascript 区分大小写。

我错过了 HMR 的精彩评论：如果在 Javascript 中与 new 一起使用，函数就像构造函数一样。请注意我添加到您的代码中的两个new：

my_var = "goodbye world";

function baseFunction() {
  this.my_var = "hello world";
}

function speakMessage() {
  alert(this.my_var);
}

speakMessage.prototype = new baseFunction(); // new: inherit from object
new speakMessage(); // object constructor: hello world
speakMessage(); // function: goodbye world from window object context

也看看 HMR 的回答。

Answer 2

小错误。你调用了 speakmessage();当您创建函数 speakMessage(){}

这应该可以解决它。

function baseFunction(){

  this.my_var = "hello world";

};

function speakMessage(){

  alert(this.my_var);

}

speakMessage.prototype = baseFunction();

speakMessage();

Answer 3

对于未来的绊脚石；之前给出的答案仅解决了OP问题中的错字。至于从 baseFunction 继承的 speakMessage，OP 的代码是完全错误的，应该/可能看起来像这样：

（注意构造函数应该以大写字母开头）

function BaseFunction(args){
  //name is instance specific
  //defaults to World
  this.name = (args&&args.name)?args.name:"World";
};
//shared members 
BaseFunction.prototype.saySomething=function(){
  return "From BaseFunction:"+this.name;
};

function SpeakMessage(args){
  //re use BaseFunction constructor code
  BaseFunction.call(this,args);
}
//inherit shared members from prototype
SpeakMessage.prototype = Object.create(BaseFunction.prototype);
//repair built in constructor value (or it'll point to BaseFunction)
SpeakMessage.prototype.constructor=SpeakMessage;
//extend saySomething, this is optional an shows how
// to add extra functionality to existing Parent functions
SpeakMessage.prototype.saySomething=function(){
  return BaseFunction.prototype.saySomething.call(this) + 
    ", from SpeakMessage:"+this.name;
};

var world = new SpeakMessage();//defaults name to be "world"
//following will output: From BaseFunction:World, from SpeakMessage:World
console.log(world.saySomething());
var op = new SpeakMessage({name:"OP"});
//following will output:From BaseFunction:OP, from SpeakMessage:OP
console.log(op.saySomething());
var parent = new BaseFunction();
console.log(parent.saySomething());//=From BaseFunction:World

与 cmets 一样；有关构造函数和原型的更多信息：https://stackoverflow.com/a/16063711/1641941

至于提到闭包的评论；对于更简单的对象，您可以使用闭包而不是构造函数：

var baseFunction=function(message){
  return function(){
    console.log("Hello "+message);
  };
}

var world = baseFunction("World");
var op = baseFunction("OP");
world();//=Hello World
op();//=Hello OP

更多关于关闭的信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures