JS function with bug

JS function with bug

本文关键字：bug with function JS      更新时间：2023-09-26

下面的代码应该显示一个带有输入值的警告，但是它没有。

我做错了什么?

(演示)

function greetings(greeting, name) {
  var Greeter = function(greeting, name) {
    namer.onName(function(name) {
      this.greet(name);
    });
    this.greet = function(name) {
      window.alert(greeting + ', ' + name + '!');
    };
  };
  var Namer = function() {
    var callback;
    this.onName = function(cb) {
      callback = cb;
    };
    this.tellName = function(name) {
      callback(name);
    };
  };
  var namer = new Namer();
  var greeter = new Greeter(greeting, name);
  namer.tellName(name);
}
<p>
  Something:
  <input id="greeting" type="text" value="Bye!" />SomeName:
  <input id="name" type="text" value="Jack" />
  <input type="button" value="Greet!" onclick="greetings(document.getElementById('greeting').value, document.getElementById('name').value)" />
</p>

从this.greet(name)中去掉this，用function greet(name)代替this.greet = function(name)。

namer.onName(function(name) {
  greet(name);
});
function greet(name) {
  window.alert(greeting + ', ' + name + '!');
};


function greetings(greeting, name) {
  var Greeter = function(greeting, name) {
    namer.onName(function(name) {
      greet(name);
    });
    function greet(name) {
      window.alert(greeting + ', ' + name + '!');
    };
  };
  var Namer = function() {
    var callback;
    this.onName = function(cb) {
      callback = cb;
    };
    this.tellName = function(name) {
      callback(name);
    };
  };
  var namer = new Namer();
  var greeter = new Greeter(greeting, name);
  namer.tellName(name);
}
<p>
  Something:
  <input id="greeting" type="text" value="Bye!" />SomeName:
  <input id="name" type="text" value="Jack" />
  <input type="button" value="Greet!" onclick="greetings(document.getElementById('greeting').value, document.getElementById('name').value)" />
</p>

问题是这个匿名函数:

function(name) {
   this.greet(name);
}

没有绑定到Greeter上下文。所以在这里它被称为:

this.tellName = function(name) {
  callback(name);
};

this指向没有greet方法的Namer对象，因此产生this.greet is not a function错误

相关文章：