JavaScript严格模式下关于this的几种指向详解

yizhihongxing

《JavaScript严格模式下关于this的几种指向详解》是一篇关于JavaScript严格模式下this关键字相关问题的文章,下面将就该篇文章的主要内容进行详细讲解。

一、什么是严格模式

回答这个问题之前需要了解JavaScript严格模式的定义。JavaScript严格模式是当开发者使用更优化的语法、开启更严格的错误提示、禁止使用不安全的语言集合时启用的模式。

在严格模式下出现错误时,JavaScript将抛出错误,而在非严格模式下,则往往会默默地失败。因此,开发者在开发项目时建议尽可能使用严格模式。

二、关于严格模式下的this

在JavaScript严格模式下使用this时,this的值仅仅可以为undefined或null或指向一个对象(通过调用函数或对象的方法得到的this)。其他的情况当在代码执行时使用的时候,将会抛出TypeError异常。

在严格模式下,对于未指定的this,它将被设置为undefined。在非严格模式下,未指定的this将被解析为全局对象。

在下面的示例中,我们可以看到在严格模式下,未用任何对象调用foo()函数将会抛出TypeError异常,而在非严格模式下foo()函数的调用将会解析为window.foo()。

// 在严格模式下未指定this的使用
'use strict';

function foo(){
  console.log(this);
}

foo(); // TypeError: this is undefined

// 在非严格模式下未指定this的使用
function bar(){
  console.log(this);
}

bar(); // Object [global] { ... }

三、在严格模式下不允许修改this

在严格模式下,尝试修改this的值将会抛出TypeError异常。下面的示例说明了这一点。在本例中,我们在严格模式下的foo()函数中尝试使用call()方法改变函数上下文中的this的值。由于此操作属于禁止的语言集合,因此在运行时会抛出异常。

// 在严格模式下修改this的使用
'use strict';

function foo(){
  console.log(this);
}

foo.call({ a: 1 }); // TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

四、总结

在JavaScript严格模式下,this的指向和非严格模式下有很大的差别。当开发者在使用this时应注意使用场景和当前的开发环境。

对于修改this的值的操作,应该尽量避免,因为这是严格模式不允许的操作。

示范代码:https://codepen.io/xiaoza/pen/BaKzEaZ

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript严格模式下关于this的几种指向详解 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JavaScript replace new RegExp使用介绍

    JavaScript replace new RegExp使用介绍 在JavaScript编程中,我们常常需要使用字符串替换功能。字符串替换的一种实现方式就是使用替换函数 replace()。replace() 函数的第一个参数一般是一个模式匹配正则表达式,用来匹配所有需要替换的字符串,第二个参数是一个替换值,用于将找到的匹配替换成新的字符串。在一些情况下,…

    JavaScript 2023年6月10日
    00
  • JavaScript中string转换成number介绍

    当需要在JavaScript中使用数字时,需要将字符串转换为数字。在JavaScript中有三种方式可以将字符串转换为数字类型:Number(), parseInt() 和 parseFloat()。下面对这三种方式进行详细介绍。 Number()方法: Number()方法可以把任何JavaScript对象转换为数字。如果对象是一个字符串,字符串只包含数字…

    JavaScript 2023年5月28日
    00
  • JavaScript生成随机数的4种自定义函数分享

    JavaScript生成随机数的4种自定义函数分享 本文将介绍4种利用JavaScript生成随机数的自定义函数,包括生成n位随机字符串、生成指定范围的整数、生成指定范围的小数、生成可以重复的随机数组。下面将分别进行介绍。 生成n位随机字符串 function randomString(len) { len = len || 32; var $chars =…

    JavaScript 2023年5月27日
    00
  • js读取cookie方法总结

    JS 读取 Cookie 方法总结 什么是 Cookie? Cookie 是一种存储在用户计算机上的小文件,包含了与某个网站相关的用户信息。浏览器每次向服务器发送请求时,会将 Cookie 信息附加在 HTTP 请求头部中,服务器端可以通过从头部解析得到的 Cookie 信息来判断用户状态并作出相应的响应。 如何读取 Cookie? 以下是几种常用的 JS …

    JavaScript 2023年6月11日
    00
  • jQuery EasyUI Layout实现tabs标签的实例

    首先,让我们简单了解一下 jQuery EasyUI Layout(以下简称EasyUI Layout)。它是基于 jQuery 的一个简单易用的布局插件,可以帮助我们快速实现页面布局的功能。 EasyUI Layout中有许多组件可以使用,其中包括我们今天要讲的 tabs 标签。 简单实例 下面是一个简单的 EasyUI Layout 配置实例。我们已经准…

    JavaScript 2023年6月10日
    00
  • JS使用onerror捕获异常示例

    下面是JS使用onerror捕获异常示例的完整攻略: 什么是onerror onerror是一个钩子函数,用于在JavaScript中捕获运行时错误。当JavaScript代码发生错误时,浏览器就会触发onerror事件,这时我们可以通过该事件捕获错误,并对其进行相应的处理。 如何使用onerror 我们可以通过在全局代码中添加window.onerror事…

    JavaScript 2023年5月28日
    00
  • JS中LocalStorage与SessionStorage五种循序渐进的使用方法

    LocalStorage和SessionStorage是HTML5中提供的本地存储技术,可用于存储一些少量的数据(5-10MB左右),用于客户端浏览器处理一些无需进行服务器数据交互的场景。在JavaScript中,我们可以使用以下五种方法来使用LocalStorage和SessionStorage。 1. 存储数据 LocalStorage和SessionS…

    JavaScript 2023年6月11日
    00
  • js实现滑动轮播效果

    当我们需要在网站中展示多个幻灯片图片时,掌握JavaScript实现滑动轮播效果非常重要。以下是实现此效果的完整攻略: 步骤一: HTML结构 在HTML中创建一个轮播区域,它包含一个有序列表,以及向前和向后按钮。 <div class="slider"> <ul class="slider-wrapper&q…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部