JavaScript的this强制转换

简介: JavaScript 中最大的一个安全问题,也是最令人困惑的一个问题,就是在某些情况下 this 的值是如何确定的。使用函数的 apply()或 call()方法时,在非严格模式下 null 或 undefined 值会被强制转型为全局对象。在严格模式下,则始终以指定值作为函数 this 的值,无论指定的是什么值。例如:

👦个人简介:张清悠,字澄澈,号寻梦客,爱好旅行、运动,主攻前端方向技术研发,副攻Unity 3D、C++、Python人工智能等
📝个人寄语:学会不为过程的缓慢而焦虑,即使暂时未能如你所愿,但只要你在努力,你就在不断成长!
🙏个人公众号:清悠小猿(海量源码尽在其中,欢迎关注)

一、this 强制转型

JavaScript 中最大的一个安全问题,也是最令人困惑的一个问题,就是在某些情况下 this 的值是如
何确定的。使用函数的 apply()或 call()方法时,在非严格模式下 null 或 undefined 值会被强制
转型为全局对象。在严格模式下,则始终以指定值作为函数 this 的值,无论指定的是什么值。例如:

// 访问属性
// 非严格模式:访问全局属性
// 严格模式:抛出错误,因为 this 值为 null 
let color = "red"; 
function displayColor() {
    
 alert(this.color); 
} 
displayColor.call(null);

这里在调用 displayColor.call()时传入 null 作为 this 的值,在非严格模式下该函数的 this
值是全局对象。结果会显示"red"。在严格模式下,该函数的 this 值是 null,因此在访问 null 的属
性时会抛出错误。
通常,函数会将其 this 的值转型为一种对象类型,这种行为经常被称为“装箱”(boxing)。这意
味着原始值会转型为它们的包装对象类型。

function foo() {
    
 console.log(this); 
} 
foo.call(); // Window {} 
foo.call(2); // Number {2} 
在严格模式下执行以上代码时,this 的值不会再“装箱”:
function foo() {
    
 "use strict"; 
 console.log(this);
 } 
foo.call(); // undefined 
foo.call(2); // 2

二、类与模块

类和模块都是 ECMAScript 6 新增的代码容器特性。在之前的 ECMAScript 版本中没有类和模块这两
个概念,因此不用考虑从语法上兼容之前的 ECMAScript 版本。为此,TC39 委员会决定在 ES6 类和模
块中定义的所有代码默认都处于严格模式。
对于类,这包括类声明和类表达式,构造函数、实例方法、静态方法、获取方法和设置方法都在严
格模式下。对于模块,所有在其内部定义的代码都处于严格模式。

三、 其他变化

严格模式下还有其他一些需要注意的变化。首先是消除 with 语句。with 语句改变了标识符解析
时的方式,严格模式下为简单起见已去掉了这个语法。在严格模式下使用 with 会导致语法错误:

// 使用 with 语句
// 非严格模式:允许
// 严格模式:抛出 SyntaxError 
with(location) {
    
 alert(href); 
}

严格模式也从 JavaScript 中去掉了八进制字面量。八进制字面量以前导 0 开始,一直以来是很多错
误的源头。在严格模式下使用八进制字面量被认为是无效语法:

// 使用八进制字面量
// 非严格模式:值为 8 
// 严格模式:抛出 SyntaxError 
let value = 010;

ECMAScript 5修改了非严格模式下的parseInt(),将八进制字面量当作带前导0的十进制字面量。
例如:

// 在 parseInt()中使用八进制字面量
// 非严格模式:值为 8 
// 严格模式:值为 10 
let value = parseInt("010");

总结:

本期我们分享的是JavaScript(十五) this的强制转换
我们下期:JavaScript 库和框架
原创不易,期待您的点赞关注与转发评论😜😜
目录
相关文章
|
6月前
|
JavaScript 前端开发
javascript中的this
javascript中的this
|
6月前
|
JavaScript
JS中改变this指向的六种方法
JS中改变this指向的六种方法
|
5月前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【6月更文挑战第15天】JavaScript的`this`根据调用方式变化:非严格模式下直接调用时指向全局对象(浏览器为window),严格模式下为undefined。作为对象方法时,`this`指对象本身。用`new`调用构造函数时,`this`指新实例。`call`,`apply`,`bind`可显式设定`this`值。箭头函数和绑定方法有助于管理复杂场景中的`this`行为。
59 3
|
4月前
|
JavaScript
js 【详解】函数中的 this 指向
js 【详解】函数中的 this 指向
38 0
|
4月前
|
JavaScript 前端开发
|
6月前
|
JavaScript 前端开发
js中改变this指向、动态指定函数 this 值的方法
js中改变this指向、动态指定函数 this 值的方法
|
5月前
|
JavaScript
js -- 函数总结篇,函数提升、动态参数、剩余参数、箭头函数、this指向......
js -- 函数总结篇,函数提升、动态参数、剩余参数、箭头函数、this指向......
|
5月前
|
JavaScript 前端开发
JS中如何使用this方法
JS中如何使用this方法
19 0
|
6月前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下,直接调用函数时`this`指全局对象,严格模式下为`undefined`。作为对象方法调用时,`this`指向该对象。用`new`调用构造函数时,`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中,`this`可能不直观,箭头函数和绑定方法可帮助管理`this`的行为。
43 1
|
6月前
|
JavaScript 前端开发
深入探索JavaScript:如何改变this的指向
深入探索JavaScript:如何改变this的指向
50 2