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 相关文章推荐
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 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
php数组删除元素示例
2014/03/21 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
Python六大开源框架对比
2015/10/19 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
Django之路由层的实现
2019/09/09 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
python 类之间的参数传递方式
2019/12/20 Python
python中return的返回和执行实例
2019/12/24 Python
python圣诞树编写实例详解
2020/02/13 Python
一份比较全的PHP面试题
2016/07/29 面试题
模具专业推荐信
2013/10/30 职场文书
计算机学生求职信范文
2014/01/30 职场文书
2016年端午节寄语
2015/12/04 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
vue 给数组添加新对象并赋值
2022/04/20 Vue.js