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

《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日

相关文章

  • js防抖函数和节流函数使用场景和实现区别示例分析

    JS防抖函数和节流函数是前端开发中常用的函数优化方法,可以有效提升页面性能和用户体验。它们的使用场景和实现区别如下: 防抖函数 防抖函数的作用是在函数触发频繁的情况下,限制函数执行的次数,确保函数在触发后的一定时间内只执行一次。 使用场景 防抖函数通常用于以下场景: 搜索框输入联想:用户在输入框中快速输入字符时,会触发搜索请求,而防抖函数可以限制请求发送的次…

    JavaScript 2023年5月28日
    00
  • JavaScript必知必会(九)function 说起 闭包问题

    下面是我对“JavaScript必知必会(九)function 说起 闭包问题”的完整攻略。 什么是闭包 闭包是指函数和函数所能访问的外部变量之间的关系。可以理解为,一个函数能够“记住”在它被定义时所处的环境。 一个闭包的形成,需要满足以下条件: 函数嵌套:在一个函数内定义了另一个函数。 内层函数使用了外部变量:内层函数使用了外部函数所定义的变量。 外部函数…

    JavaScript 2023年6月10日
    00
  • JavaScript及jquey实现多个数组的合并操作

    首先,需要明确一点,JavaScript中合并多个数组可以通过Array.concat()方法来完成,例如: let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; let arr3 = [7, 8, 9]; let mergedArray = arr1.concat(arr2, arr3); console.log(merg…

    JavaScript 2023年5月27日
    00
  • js学习总结之DOM2兼容处理this问题的解决方法

    首先我们需要知道什么是DOM2以及this问题。 DOM2是指在HTML文档中操作各个元素的JavaScript API标准,与DOM1相比,DOM2提供了更加完善、更加准确、更加稳定、更加规范的处理HTML元素的方法。 this问题则是指JavaScript中this的指向问题,由于this的指向不确定,经常会导致我们编写的代码出现问题。在DOM2兼容处理…

    JavaScript 2023年6月10日
    00
  • JavaScript检测是否开启了控制台(F12调试工具)

    要检测浏览器是否开启了控制台(F12调试工具),可以通过以下步骤实现: 首先,我们可以使用 window.console 属性检查控制台是否可用。如果控制台可用,则 window.console 属性会被定义,并且其类型为对象。因此我们可以使用以下 JavaScript 代码检查控制台是否可用: if (window.console && w…

    JavaScript 2023年6月11日
    00
  • 荐书|您有一份JavaScript书单待签收

    针对“荐书|您有一份JavaScript书单待签收”的完整攻略,我提供以下说明: 标题 “荐书|您有一份JavaScript书单待签收”是一个建议性的标题,用于丰富内容的表现形式,提高文章的可读性,引起读者的兴趣。 简介 在文章的开头,应该简要介绍文章的主题和目标受众,例如:“这篇文章主要介绍JavaScript方面的书单,旨在帮助读者更好地学习JavaSc…

    JavaScript 2023年5月19日
    00
  • JS访问SWF的函数用法实例

    JS访问SWF函数用法实例攻略 在Web开发中,有时我们需要在JS中调用SWF动画中的函数,来实现一些交互效果。本攻略将详细讲解如何在JS中访问SWF函数,并提供两个实例说明。 步骤一:为SWF函数起一个别名 在AS3中,为了让JS能访问到SWF中的函数,我们需要给这个函数起一个别名。别名可以在发布SWF文件时以“flashvars”参数的形式传递。此处声明…

    JavaScript 2023年5月27日
    00
  • jQuery实现用户注册的表单验证示例

    关于“jQuery实现用户注册的表单验证示例”的完整攻略,我可以为您提供以下几点详细说明: 1. 理解表单验证的原理 在前端开发中,表单验证是非常常见的功能,其主要作用是确保用户输入的数据符合规范,避免因用户输入错误导致的问题。表单验证的原理通常是通过JavaScript代码获取到用户输入的值,对其进行校验,并根据判断结果显示相应的提示信息。其中,jQuer…

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