如果使用功能调用执行的严格模式的功能，它的“本”的值是不确定的

Question

使用jshint的时候，我发现了以下警告。为什么？

如果使用功能调用执行的严格模式的功能，它的“本”值将是不确定的。

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
  }
}