卡卡网

JavaScript里this关键字在函数调用里的值是什么？全局对象？undefined？其实都对。在本文中，将通过多个示例进行详细介绍。

this在函数调用中是全局对象

全局对象由执行环境决定，在浏览器中，全局对象是window对象。

在函数调用中，执行上下文是全局对象。

让我们看看以下函数中的上下文： 

function sum(a, b) {
  console.log(this === window); // => true
  this.myNumber = 20; // 添加 'myNumber' 属性到全局对象
  return a + b;
}
// sum() 作为函数被调用
// sum() 里的 this 是一个全局对象(window)
sum(15, 16);     // => 31
window.myNumber; // => 20

调用sum(15, 16)时，JavaScript 自动设置this为全局对象（window在浏览器中）。

当this在任何函数作用域（最顶层作用域：全局执行上下文）之外使用时，它也等于全局对象：

console.log(this === window); // => true
this.myString = 'Hello World!';
console.log(window.myString); // => 'Hello World!'
<!-- 在HTML文件里 -->
<script type="text/javascript">
 console.log(this === window); // => true
</script>

严格模式下，函数调用中的this是undefined

从ECMAScript 5.1开始可以使用严格模式，这是 JavaScript 的受限变体。它提供了更好的安全性和更强的错误检查。

要启用严格模式，请将指令'use strict'放在函数体的顶部。

一旦启用，严格模式会影响执行上下文，在常规函数调用中，this为undefined。执行上下文不再是全局对象。 

以严格模式调用的函数示例：

function multiply(a, b) {
  'use strict'; // 启用严格模式
  console.log(this === undefined); // => true
  return a * b;
}
// multiply() 函数在严格模式下调用
// multiply() 里的 this 是 undefined
multiply(2, 5); // => 10

当multiply(2, 5)在严格模式下作为函数调用时，this是undefined。

严格模式不仅在当前范围内有效，而且在内部范围内（对于内部声明的所有函数）也有效： 

function execute() {
  'use strict';
  function concat(str1, str2) {
    // 启用了严格模式
    console.log(this === undefined); // => true
    return str1 + str2;
  }
  // concat() 函数在严格模式下调用
  // concat() 里的 this 是 undefined
  concat('Hello', ' World!'); // => "Hello World!"
}
execute();

'use strict'位于execute函数内的顶部，在其范围内启用严格模式。因为concat是在execute作用域内声明的，所以继承了严格模式。并且调用concat('Hello', ' World!')使this是undefined。

同时包含严格模式和非严格模式

单个 JavaScript 文件可能同时包含严格模式和非严格模式。因此，对于相同的调用类型，在单个脚本中可能具有不同的上下文行为：

function nonStrictSum(a, b) {
  // 非严格模式
  console.log(this === window); // => true
  return a + b;
}
function strictSum(a, b) {
  'use strict';
  // 严格模式
  console.log(this === undefined); // => true
  return a + b;
}
// nonStrictSum() 函数在非严格模式中调用
// nonStrictSum() 里的 this 是 window 对象
nonStrictSum(5, 6); // => 11
// strictSum() 函数以严格模式调用
// strictSum() 里的 this 是 undefined
strictSum(8, 12); // => 20

总结

本文通过多个示例，详细介绍了一个函数在严格和非严格模式下调用时，其里面的this值是不同的，我们应该对此有所了解，在使用时就不会出错。

相关文章

• JavaScript面试题：关于this关键字的6个面试问题
• [实例]演示区别箭头函数和常规函数的this值
• 实例详解JS箭头函数=>与传统匿名函数处理this的不同方法
• 详解JS call() apply()和bind() this的用法区别
• 【示例】详解JS里this的上下文对象及用法

标签: this