技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

[示例]this在函数调用里的值是全局对象还是undefined?

作者:admin    时间:2022-6-8 21:31:26    浏览:

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

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

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

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

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

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

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'放在函数体的顶部。

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

 严格模式下,函数调用中的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)在严格模式下作为函数调用时,thisundefined

严格模式不仅在当前范围内有效,而且在内部范围内(对于内部声明的所有函数)也有效: 

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!')使thisundefined

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

单个 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值是不同的,我们应该对此有所了解,在使用时就不会出错。

相关文章

标签: this  
x
  • 站长推荐