javascript - this.welcome() 不是函数

Question

我正在尝试创建一个像这样的小型 javascript 插件:

function TextShadow(host){
    this.host_id=host;
    this.welcome=function(){alert('welcome to earth')};
    $(function(){
      this.welcome();
      $(this.host_id).html("<p>hello world</p>");
    });
 }

然后我从另一个脚本调用它，如下所示:

var test=new TextShadow("#sample");

但我知道 this.welcome 不是函数。但是，如果我将之前的代码更改为以下代码，一切正常:

   function TextShadow(host){
        this.host_id=host;
        this.welcome=function(){alert('welcome to earth')};
        var gen=this;
        $(function(){
          gen.welcome();
          $(gen.host_id).html("<p>hello world</p>");
        });
   } 

有人能解释一下为什么第一段代码不起作用而第二段代码起作用吗？

Answer 1

因为作用域在 JavaScript 函数中发生了变化。您可以绑定(bind)函数以将this设置为所需的值。

function TextShadow(host){
    this.host_id=host;
    this.welcome=function(){alert('welcome to earth')};
    $(function(){
      this.welcome();
      $(this.host_id).html("<p>hello world</p>");
    }.bind(this));
 }

它在 ES6 中更干净，您可以使用 arrow functions :

$(() => {
  this.welcome();
  $(this.host_id).html("<p>hello world</p>");
});

MDN Scope