为什么 `this` 属性 无法在函数内访问

Question

问题

我正在开发 jQuery 插件。当使用 $.fn.bar() 调用时，foo() 中的 alert() 未输出预期结果。我哪里做错了？

(function($){

  var input;

  var foo = function(){
    alert(this.input); //<-- Not getting the desire input value
  }

  $.fn.bar = function(){

    this.input = "Test";

    alert(this.input); //<-- Output "Test" as expected
    foo(); //<-- Call foo(), expect to alert "Test" as well, but not

  };


}(jQuery));

解决方案

您需要使用 foo.call(this).

将 bar() 中的上下文 this 传递给 foo()

https://jsfiddle.net/clintonlam/de1vz59w/8/

Answer 1

你应该 .call foo 函数与任何 this 在 bar 中，这样 bar 的调用上下文就会转移到 foo:

var foo = function() {
  console.log('foo', this.input);
};
$.fn.bar = function() {
  this.input = "Test";
  console.log('bar', this.input);
  foo.call(this);
};

$().bar();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>