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


Posted in Javascript onJuly 12, 2017

前言

相信不少人在学习或者使用Javascript的时候,都曾经被 JavaScript 中的 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);

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

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

在严格模式下,这种函数中的this等于undefined

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

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

三、 对象的函数(方法)中的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());

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

四、构造函数的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());

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

五、事件处理函数中的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 -->

后语

参考资料

MDN https://developer.mozilla.org...

延伸资料

JavaScript 严格模式详解 https://3water.com/article/74890.htm

菜鸟学堂 > JavaScript 严格模式 http://edu.3water.com/js/js-strict.html

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
详解JS函数重载
Dec 04 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
vue video和vue-video-player实现视频铺满教程
Oct 30 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 #jQuery
详解如何用webpack打包一个网站应用项目
Jul 12 #Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 #Javascript
AngularJS实现select的ng-options功能示例
Jul 12 #Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 #Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 #Javascript
详解Node项目部署到云服务器上
Jul 12 #Javascript
You might like
10个实用的PHP代码片段
2011/09/02 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
2016/07/12 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
webpack构建react多页面应用详解
2017/09/15 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
react的hooks的用法详解
2020/10/12 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
在MAC上搭建python数据分析开发环境
2016/01/26 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
香港交友网站:be2香港
2018/07/22 全球购物
游戏商店:Eneba
2020/04/25 全球购物
店长岗位职责
2013/11/21 职场文书
外语系毕业生找工作的求职信
2013/11/28 职场文书
导游的职业规划书范文
2013/12/27 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
小学生暑假安全公约
2015/07/14 职场文书
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python