JS 中在严格模式下 this 的指向问题

目录
  • 前言
  • 一、全局作用域中的this
  • 二、全局作用域中函数中的this
  • 三、对象的函数（方法）中的this
  • 四、构造函数的this
  • 五、事件处理函数中的this
  • 六、内联事件处理函数中的this
  • 七、定时器中的this，指向的是window
  • 参考资料

前言

非严格模式下的 this 指向可能我们会经常遇到，但是严格模式下的 this 指向不是经常碰到，关于严格模式下的 this 指向是怎么样的，都是指向哪些，这篇博文将会很仔细地说清楚。

一、全局作用域中的this

在严格模式下，在全局作用域中，this指向window对象。

"use strict";

console.log("严格模式");
console.log("在全局作用域中的this");
console.log("this.document === document",this.document === document);
console.log("this === window",this === window);
this.a = 9804;
console.log('this.a === window.a===',window.a);

二、全局作用域中函数中的this

在严格模式下，这种函数中的this等于undefined。不是严格模式时，这里的this指向window。在react中render()里的this是指向组件的实例对象。注意区分是render()里的this还是函数中的this。（这两个this指向不同，所以没法在全局作用域的函数中直接调用this取值）

"use strict";

console.log("严格模式");
console.log('在全局作用域中函数中的this');
function f1(){
console.log(this);
}

function f2(){
function f3(){
console.log(this);
}
f3();
}
f1();
f2();

三、对象的函数（方法）中的this

在严格模式下，对象的函数中的this指向调用函数的对象实例

"use strict";

console.log("严格模式");
console.log("在对象的函数中的this");
var o = new Object();
o.a = 'o.a';
o.f5 = function(){
return this.a;
}
console.log(o.f5());

四、构造函数的this

在严格模式下，构造函数中的this指向构造函数创建的对象实例。

"use strict";

console.log("严格模式");
console.log("构造函数中的this");
function constru(){
this.a = 'constru.a';
this.f2 = function(){
console.log(this.b);
return this.a;
}
}
var o2 = new constru();
o2.b = 'o2.b';
console.log(o2.f2());

五、事件处理函数中的this

在严格模式下，在事件处理函数中，this指向触发事件的目标对象。

"use strict";

function blue_it(e){
if(this === e.target){
this.style.backgroundColor = "#00f";
}
}
var elements = document.getElementsByTagName('*');
for(var i=0 ; i<elements.length ; i++){
elements[i].onclick = blue_it;
}

//这段代码的作用是使被单击的元素背景色变为蓝色

六、内联事件处理函数中的this

在严格模式下，在内联事件处理函数中，有以下两种情况：

<button onclick="alert((function(){'use strict'; return this})());">
内联事件处理1
</button>
<!-- 警告窗口中的字符为undefined -->

<button onclick="'use strict'; alert(this.tagName.toLowerCase());">
内联事件处理2
</button>
<!-- 警告窗口中的字符为button -->

七、定时器中的this，指向的是window

 <script>
        'use strict'
      setTimeout(function(){
        console.log(this);
      },1000)
    </script>
//Window {window: Window, self: Window, document: document, name: '', location: Location, …}

注意：严格模式全局作用域中函数中的this指向的是undefined，这也是react里函数式组件里的this为什么指向为undefined原因。

类中的方法会默认开启局部的严格模式

参考资料

MDNhttps://developer.mozilla.org...

到此这篇关于JS 中在严格模式下 this 的指向 超详细的文章就介绍到这了,更多相关js this 的指向内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript函数中this指向问题详解

    this关键字 哪个对象调用函数,函数里面的this指向哪个对象. **严格模式下:**在全局环境中,this指向的是undefined **非严格模式下:**在全局环境中,this指向的是window 全局定义的函数直接调用,this => window function fn(){ console.log(this); // 此时 this 指向 window } fn(); // 相当于 window.fn() 对象内部的函数调用,this => 调用者 var obj = { fn:f

  • 详解JavaScript中的this指向问题

    题记 JS中的this指向一直是个让初学者头疼的问题.今天,我们就一起来瞅瞅this倒地是咋回事,详细说说this指向原则,从此不再为了this指向操碎了心. 开篇 首先我们都知道this是Javascript语言的一个关键字. 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它所在函

  • JavaScript中的this指向问题详解

    JavaScript中的this指向问题详解

    前言 相信我,只要记住本文的 7️⃣ 步口诀,就能彻底掌握 JS 中的 this 指向. 先念口诀:箭头函数.new.bind.apply 和 call.欧比届点(obj.).直接调用.不在函数里. 按照口诀的顺序,只要满足前面某个场景,就可以确定 this 指向了. 接下来按照口诀顺序对它们进行详解,文中示例代码都运行在 Chrome 的 Console 控制台中. 文末有精心准备的练习题,用于检验学习成果,别忘了试试~ 1. 箭头函数 箭头函数排在第一个是因为它的 this 不会被改变,所以

  • JS匿名函数内部this指向问题详析

    前言 网上看到一句话,匿名函数的执行是具有全局性的,那怎么具有的全局性呢? this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象 1.案例中,第一个say打出来的是Alan,而第二个则是window var name = 'window' var person = { name :'Alan', sayOne:function () { console.log(this.name) }, sayTwo:functi

  • JavaScript基础之this指向

    JavaScript基础之this指向

    目录 this 方法中 对象中 隐藏的this 严格模式 总结 JavaScript中this也是一件很神奇 事情,在面向对象(比如java)中表示一个当前的对象引用,但是在JavaScript中this不是固定不变的,而是随着运行环境的改变而改变. this 老规矩先看代码: 方法中 function test(){ console.log(this); } 对象中 function test(){ console.log(this); } 在方法中,this表示该方法所属的对象.因为第一个是

  • js中的this的指向问题详解

    this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象 this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的 普通函数中的this指向: 情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,但是我们这里不探讨严格版的问题,你想了解可以自行上网查找. 情况2:如果一个函数中有this,这个函

  • JavaScript this的原理以及指向详解

    怎么判断this指向? ①在全局环境中调用就指向window. ②作为对象的方法调用就指向该对象. ③作为构造函数调用就指向这个新创建的对象. ④可以使用apply,call,bind改变this指向. ⑤箭头函数中的this与定义时所处的上下文绑定,且不能被改变, 箭头函数this指向取决于它外层找到的离它最近的第一个非箭头函数的this. 怎么理解this原理? JavaScript语言学懂需要理解下面两种写法 var obj = { foo: function () {} }; var f

  • JS 中在严格模式下 this 的指向问题

    目录 前言 一.全局作用域中的this 二.全局作用域中函数中的this 三.对象的函数(方法)中的this 四.构造函数的this 五.事件处理函数中的this 六.内联事件处理函数中的this 七.定时器中的this,指向的是window 参考资料 前言 非严格模式下的 this 指向可能我们会经常遇到,但是严格模式下的 this 指向不是经常碰到,关于严格模式下的 this 指向是怎么样的,都是指向哪些,这篇博文将会很仔细地说清楚. 一.全局作用域中的this 在严格模式下,在全局作用域中

  • 深入浅析JS中的严格模式

    什么是严格模式? 使JS编码更加规范化的模式,消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为 怎么使用? 直接添加下面的这句字符串就可以了,这种语法可以向后兼容,如果是不支持严格模式的javascript引擎,就会直接当成是一个未赋值的字符串字面量,会直接忽略,支持的引擎就会开启严格模式 'use strict' 说明: 1.在全局作用域使用的话,那整个js脚本就会开启这种模式 2.如果是只在函数内部使用的话,那么就只是该函数内部开启而已 function doSomet

  • js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解

    js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解

    前言 在阅读本文前,相信大家应该都有所了解,在js获取键盘按下的键值有:event.keyCode.event.charCode和event.which. 其中: 谷歌浏览器:对event.keyCode.event.charCode和event.which都兼容. 火狐浏览器:对event.keyCode部分键值有效,如上下左右键(37,38,39,40),enter键(13),PgUp(33),PgDn(34)等部分有效,对数字键,字母键无效. event.which也是部分键值有效,如字母

  • 浅谈Vue.js中如何实现自定义下拉菜单指令

    浅谈Vue.js中如何实现自定义下拉菜单指令

    我们利用  Vue.js 的自定义指令能力,来实现一个自定义下拉菜单功能.描述如下: 点击按钮,弹出下拉菜单. 点击下拉菜单之外的区域,关闭下拉菜单. 1基础版 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="styleshee

  • 详解JS中定时器setInterval和setTImeout的this指向问题

    前言 Js是一个单线程语言,可以通过setTimeout()和setInterval()来设置代码在指定时刻运行,前者是在指定时间后执行,后者是指每隔一段时间执行.两者的使用方法类似. 最近在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,详细的介绍通过一个示例展开,一起来看看吧. 如下例: var num = 0; function Obj (){ this.num = 1, this.getNum =

  • 详解javascript中的Strict模式

    简介 在ES5中,引入了strict模式,我们可以称之为严格模式.相应的sloppy mode就可以被称为非严格模式. 严格模式并不是非严格模式的一个子集,相反的严格模式在语义上和非严格模式都发生了一定的变化,所以我们在使用过程中,一定要经过严格的测试.以保证在严格模式下程序的执行和非严格模式下的执行效果一致. 使用Strict mode strict mode会改变javascript的一些表现,我们将会在下一节中进行详细的讲解. 这里先来看一下,怎么使用strict mode. Strict

  • JavaScript中发布/订阅模式的简单实例

    上次研究观察者模式,很多文章说它也叫Subscribe/Publish(发布/订阅模式).可在<Javascript设计模式>一书中,这两种模式还是有些区别的.书中原话如下: 1.Observer模式要求希望接收到主题通知者的观察者必须订阅内容改变的事件. 2.Subscribe/Publish模式使用了一个主题/事件通道,这个通道介于订阅者和发布者之间.该事件系统允许代码定义应用程序的特定事件,该事件可以传递自定义参数,自定义参数包含订阅者所需要的值.其目的是避免订阅者和发布者产生依赖关系.

  • 工厂模式在JS中的实践

    工厂模式在JS中的实践

    一.   写在前面 工厂模式和抽象工厂在后台代码中的使用,相信你一定非常熟悉,所以关于概念的东西也用不着我多说.你可以用其做为类与类之间,层与层之间的解耦.工厂模式没有什么难点,在JS中其实思想也是一样的,所以废话不多说,直接上实践的场景和代码. 二.  场景描述 1.最近的项目的登陆使用了Owin认证,所以token必须找好地方进行存储,鉴于token需要在请求API资源的时候放到请求头的Authorization当中,以便在进入WebAPI前进行身份验证.所以我不想在主流浏览器中的cooki

  • JS中正则表达式全局匹配模式 /g用法详解

    本文章来详细介绍js中正则表达式的全局匹配模式 /g用法,代码如下: var str = "123#abc"; var re = /abc/ig; console.log(re.test(str)); //输出ture console.log(re.test(str)); //输出false console.log(re.test(str)); //输出ture console.log(re.test(str)); //输出false 在创建正则表达式对象时如果使用了"g&q

  • JS中使用正则表达式g模式和非g模式的区别

    先给大家说下js正则表达式中的g到底是什么意思 g是global的缩写啊! 就是匹配全部可匹配结果, 如果你不带g,在正则过程中,字符串是从左至右匹配的,如果匹配成功就不再继续向右匹配了,如果你带g,它会重头到尾的把正确匹配的字符串挑选出来 例如: var str = 'aaaaaaaa' var reg1 = /a/ var reg2 = /a/g str.match(reg1) // 结果为:["a", index: 0, input: "aaaaaaaa"]

随机推荐