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 大家可以参考下
Oct 13 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
js实现音乐播放控制条
Sep 09 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 Javascript
详解vue 组件的实现原理
Nov 12 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
Win下如何安装PHP的APC拓展
2013/08/07 PHP
php预定义变量使用帮助(带实例)
2013/10/30 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
react-router中的属性详解
2017/06/01 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
python  创建一个保留重复值的列表的补码
2018/10/15 Python
对python判断是否回文数的实例详解
2019/02/08 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
违反工作纪律检讨书
2014/02/15 职场文书
离婚律师函范本
2015/05/27 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
小学班级口号大全
2015/12/25 职场文书
《去年的树》教学反思
2016/02/18 职场文书
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL