如果使用函数调用执行严格模式函数，则其＆＃39; this＆＃39;值将是未定义的

Question

使用jshint时，我收到以下警告。 为什么呢？

  

如果使用函数调用执行严格模式函数，则其＆＃39; this＆＃39;价值将是未定义的。

function demo() {
    'use strict';

    document.querySelector('#demo').addEventListener('click', test);

    function test() {
        console.log(this);
    }
}

Answer 1

与其试图消除警告，不如解决根本原因。

使用this可能会造成混淆，重构代码时this的值可能会意外更改。如果您显式传递参数，则代码将更易于阅读和维护。

传递给test()回调的参数是点击的Event对象：

function demo() {
   'use strict';
   function test(event) {
      console.log('You clicked on:', event.target.outerHTML); 
      }
   document.querySelector('#demo').addEventListener('click', test);
   }

demo();

控制台日志输出将类似于：
You clicked on: <h1 id="demo">Click Me</h1>

Event对象告诉您用户单击的目标元素：
https://developer.mozilla.org/en-US/docs/Web/API/Event/target

输入以下代码：
https://jsfiddle.net/24epdxbz/2

来自yehudakatz：

  

ECMAScript 5规范指出undefined（几乎）总是被传递，但是在非严格模式下，被调用的函数应将其thisValue更改为全局对象。这样，严格模式调用者就可以避免破坏现有的非严格模式库。

Answer 2

这对我有用

function demo() {
  'use strict';

  var that = this; //new line

  document.querySelector('#demo').addEventListener('click', test);

  function test() {
    console.log(that); //print that instead of this
  }
}

Answer 3

有时JS中的作用域需要那个而不是这个，根据这样的文章Scope in js

因此，您通常需要使用

var that = this;