为什么`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));

解决方案

您需要将bar() 中的上下文this 传递给foo() 和foo.call(this)。

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

Answer 1

你应该.callfoo函数与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>