使用JSHint时出现警告：严格模式函数调用时this值为undefined，原因何在？

首先，这个警告的核心原因是严格模式下普通函数调用的this行为规则：在开启'use strict'的作用域内，当你以普通函数调用的方式执行函数（比如直接写test()）时，函数内部的this会被设置为undefined，而非非严格模式下的全局对象。

回到你的代码：

function demo() { 
  'use strict'; 
  document.querySelector('#demo').addEventListener('click', test); 
  function test() { 
    console.log(this); 
  } 
}

JSHint检测到test函数定义在开启了严格模式的demo函数内部，所以它会预防性地提示你：如果未来有人（或者你自己）不小心直接调用test()（普通函数调用方式），那this就会是undefined。

但实际在你的代码场景里，test是作为点击事件的回调函数使用的——浏览器在触发点击事件时，会自动把回调函数的this绑定到触发事件的DOM元素（也就是#demo）上，相当于用test.call(元素节点)的方式执行，所以实际运行时console.log(this)输出的会是正确的DOM元素，并不会出现undefined的情况。

如何消除这个警告？ #

• 如果确定test只会作为事件回调使用，完全可以忽略这个警告；
• 要是想彻底让JSHint闭嘴，可以显式地给test绑定this（虽然有点多此一举）：

  const demoElem = document.querySelector('#demo');
  demoElem.addEventListener('click', test.bind(demoElem));
  

• 或者换一种方式获取元素，不依赖this：

  function test() { 
    const demoElem = document.querySelector('#demo');
    console.log(demoElem); 
  }
  

内容的提问来源于stack exchange，提问作者Alvaro