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日

相关文章

  • JavaScript实现移动端带transition动画的轮播效果

    Javascript实现移动端带transition动画的轮播效果的攻略可以分为以下几个步骤: 1. HTML布局 首先,需要在HTML中编写轮播图的布局,通常是一个<ul>元素,包含多个<li>元素,每个<li>元素内部包含图片或者其他需要轮播的内容,如下所示: <div class="carousel-…

    JavaScript 2023年6月10日
    00
  • Javascript使用function创建类的两种方法(推荐)

    使用 function 创建类的方法,也被称作“构造函数模式”,是JavaScript中一种常用的定义对象的方法。 方法1:直接创建 我们可以使用function语法,按照类定义对象的基本思路,创建一个构造函数(类)。在构造函数(类)内部使用this关键字声明该类的实例属性和方法。 下面的代码演示了这种方式创建类Person,并定义了实例属性name和age…

    JavaScript 2023年5月27日
    00
  • JavaScript中合并数组的N种方法

    介绍”JavaScript中合并数组的N种方法” 前言 在JavaScript中,合并两个或多个数组的方式非常多。这篇文章将讨论一些常见的合并数组的方法以及如何使用它们。 方法1: 使用concat()方法 通过使用concat()方法,我们可以将两个或多个数组合并成一个数组。 const arr1 = [1, 2, 3]; const arr2 = [4,…

    JavaScript 2023年5月27日
    00
  • 关于ES6中的箭头函数超详细梳理

    关于ES6中的箭头函数超详细梳理 箭头函数的概述 ES6中新增的箭头函数,是一种新的函数表达式,可以简化函数的创建过程,提高代码的可读性。它具有以下几个特点: 采用箭头符号“=>”作为函数定义符号。 函数体中只有一句代码时,可以省略花括号和return。 箭头函数没有自己的this,它的this由外部的上下文决定。 箭头函数不可以作为构造器使用,也不能…

    JavaScript 2023年6月11日
    00
  • JS简单实现DIV相对于浏览器固定位置不变的方法

    下面是JS简单实现DIV相对于浏览器固定位置不变的方法的完整攻略: 步骤一:设置CSS样式 首先,我们需要在HTML页面中定义一个div,然后为该div设置CSS样式,使其固定在浏览器的某个位置。例如,我们可以设置该div的position属性为”fixed”,然后指定它距离浏览器顶部的距离为0px,即可使之固定在浏览器顶部。 HTML代码如下: <d…

    JavaScript 2023年6月10日
    00
  • JS中this的4种绑定规则详解

    下面是对于“JS中this的4种绑定规则详解”的完整攻略: 1. 默认绑定规则 默认绑定规则是指,在函数调用时,若函数调用时调用点没有指定调用的对象,this会绑定在全局对象上,即window(在浏览器环境下)。 示例代码如下: function foo() { console.log(this.a); } var a = 2; foo(); // 输出2 …

    JavaScript 2023年6月10日
    00
  • JS逆向之浏览器补环境图文详解

    JS逆向技术是黑客攻击的重要手段之一,它可以帮助黑客突破各种安全防线,获得非法访问权限。其中,浏览器补环境是逆向技术中的一项重要内容,下面我将为大家详细讲解相关攻略。 什么是浏览器补环境? 浏览器补环境,或者说沙盒环境,是指浏览器运行JS脚本时,为了确保安全性而对JS代码的执行环境进行隔离。在这种沙盒环境下,JS脚本只能访问指定的环境变量和API,且对于底层…

    JavaScript 2023年5月28日
    00
  • JS实现添加缓动画的方法

    下面是JS实现添加缓动动画的方法的完整攻略: 什么是缓动动画? 缓动动画指的是在动画过程中,物体的速度从快到慢,或者从慢到快,而不是始终以相同的速度运动。缓动动画通常可以提高用户体验,使动画看起来更平滑、自然。 实现缓动动画的方法 使用JS实现缓动动画可以有多种方法,下面介绍其中两种。 方法一:简单的缓动动画实现 简单的缓动动画实现方法比较容易理解,下面的代…

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