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 相关文章推荐
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 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的字符串用法小结
2010/06/08 PHP
PHP开发的一些注意点总结
2010/10/12 PHP
php生成html文件方法总结
2014/12/01 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
Django rest framework基本介绍与代码示例
2018/01/26 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
如何完美的建立一个python项目
2020/10/09 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
《再别康桥》教学反思
2014/02/12 职场文书
教师节活动主持词
2014/04/02 职场文书
党风廉设责任书
2014/04/16 职场文书
绿色环保标语
2014/06/12 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
党员身份证明材料
2015/06/19 职场文书
Redis性能监控的实现
2021/07/09 Redis