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

解

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

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>