JavaScript中this的指向问题
this使用到的情况:
1. 纯函数
2. 对象方法调用
3. 使用new调用构造函数
4. 内部函数
5. 使用call / apply
6.事件绑定
1. 纯函数
var name = 'this is window'; //定义window的name属性 function getName(){ console.log(this); //控制台输出: Window //this指向的是全局对象--window对象 console.log(this.name); //控制台输出: this is window / } getName();
运行结果分析:纯函数中的this均指向了全局对象,即window。
2. 对象方法调用
var name = 'this is window'; //定义window的name属性,看this.name是否会调用到 var testObj = { name:'this is testObj', getName:function(){ console.log(this); //控制台输出:testObj //this指向的是testObj对象 console.log(this.name); //控制台输出: this is testObj } } testObj.getName();
运行结果分析:被调用方法中this均指向了调用该方法的对象。
3. 使用new调用构造函数
function getObj(){ console.log(this); //控制台输出: getObj{} //this指向的新创建的getObj对象 } new getObj();
运行结果分析:new 构造函数中的this指向新生成的对象。
4. 内部函数
var name = "this is window"; //定义window的name属性,看this.name是否会调用到 var testObj = { name : "this is testObj", getName:function(){ //var self = this; //临时保存this对象 var handle = function(){ console.log(this); //控制台输出: Window //this指向的是全局对象--window对象 console.log(this.name); //控制台输出: this is window //console.log(self); //这样可以获取到的this即指向testObj对象 } handle(); } } testObj.getName();
运行结果分析:内部函数中的this仍然指向的是全局对象,即window。这里普遍被认为是JavaScript语言的设计错误,因为没有人想让内部函数中的this指向全局对象。一般的处理方式是将this作为变量保存下来,一般约定为that或者self,如上述代码所示。
5. 使用call / apply
var name = 'this is window'; //定义window的name属性,看this.name是否会调用到 var testObj1 = { name : 'this is testObj1', getName:function(){ console.log(this); //控制台输出: testObj2 //this指向的是testObj2对象 console.log(this.name); //控制台输出: this is testObj2 } } var testObj2 = { name: 'this is testObj2' } testObj1.getName.apply(testObj2); testObj1.getName.call(testObj2);
Note:apply和call类似,只是两者的第2个参数不同:
[1] call( thisArg [,arg1,arg2,… ] ); // 第2个参数使用参数列表:arg1,arg2,...
[2] apply(thisArg [,argArray] ); //第2个参数使用 参数数组:argArray
运行结果分析:使用call / apply 的函数里面的this指向绑定的对象。
6. 事件绑定
事件方法中的this应该是最容易让人产生疑惑的地方,大部分的出错都源于此。
//页面Element上进行绑定 <script type="text/javascript"> function btClick(){ console.log(this); //控制台输出: Window //this指向的是全局对象--window对象 } </script> <body> <button id="btn" οnclick="btClick();" >点击</button> </body> //js中绑定方式(1) <body> <button id="btn">点击</button> </body> <script type="text/javascript"> function btClick(){ console.log(this); //控制台输出:<button id="btn">点击</button> //this指向的是Element按钮对象 } document.getElementById("btn").onclick = btClick; document.getElementById("btn").onclick(); //默认点击</script> //js中绑定方式(2) <body> <button id="btn">点击</button> </body> <script type="text/javascript"> document.getElementById("btn").onclick = function(){ console.log(this); //控制台输出:<button id="btn">点击</button> //this指向的是Element按钮对象 } document.getElementById("btn").onclick(); </script> //js中绑定方式(3) <body> <button id="btn">点击</button> </body> <script type="text/javascript"> function btClick(){ console.log(this); } document.getElementById("btn").addEventListener('click',btClick); //控制台输出:<button id="btn">点击</button> //this指向的是Element按钮对象把函数(方法)用在事件处理的时候。 document.getElementById("btn").attachEvent('onclick',btClick); //IE使用,控制台输出: Window //this指向的是全局对象--window对象 </script>
运行结果分析:以上2种常用事件绑定方法,在页面Element上的进行事件绑定(οnclick="btClick();"),this指向的是全局对象;而在js中进行绑定,除了attachEvent绑定的事件方法(this指向的是全局对象)外,this指向的是绑定事件的Elment元素。
转载于:https://www.cnblogs.com/chenliyang/p/6542979.html
JavaScript中this的指向问题相关推荐
- JAVAscript中的this指向和this指向的修改
JAVAscript中的this指向和this指向的修改 this 关键字 一般在函数中使用,表示哪个对象执行了当前函数. 每一个函数内部都有一个关键字是 this . 函数内部的 this 只和函数 ...
- $.ligerdialog.open中确定按钮加事件_彻底搞懂JavaScript中的this指向问题
JavaScript中的this是让很多开发者头疼的地方,而this关键字又是一个非常重要的语法点.毫不夸张地说,不理解它的含义,大部分开发任务都无法完成. 想要理解this,你可以先记住以下两点: ...
- 理解JavaScript中this的指向详解
this的定义和理解: this是JavaScript语言的一个关键字,它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内使用. 1.this和执行环境对象有关,和函数的声明无关. var ...
- JavaScript中this的指向问题及面试题你掌握了吗?
this 作为JavaScript中的一个关键字,它的复杂度很高,主要原因是它所处不同场景的代表的指向是不一样的.这里先做一个结论,重要事情说三遍: this的指向是由上下文环境动态决定的 this的 ...
- JavaScript中this的指向
JavaScript之this指向问题 js中的this指向问题一直不是很清楚,看了coderwhy老师的文章后特此记录一下. this在全局作用域下使用 this在全局作用域下指向的就是window ...
- JavaScript中的 this指向问题
以下文章均已附上原文链接 ,侵删 文章一:vue中的this指向问题 vue中的this指向问题_JingG459的博客-CSDN博客_vue中this指向问题 最近写项目遇到很多this指向的问题, ...
- 38 JavaScript中的this指向问题
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.函数内this指向问题 函数内部的this指向是当我们调用函数的时候确定的.调用方式的 ...
- javascript中关于this指向问题详解
前 言 LiuDaP 在前端的学习中,我们必然要用到js,js可以说是前端必不可少的的东西.在学习js的过程中,我们会经常用到this这个东西,而this的指向问题就变得尤为重要.今天正好有空闲 ...
- JavaScript中this指针指向的彻底理解
this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象 这一点与函数中自由变量Action-varibal不同 1 va ...
最新文章
- 微软2014校园招聘笔试试题
- linux mysql5.6 编码_CentOS 7下修改MySQL5.6编码方式 解决网站中文显示问号
- java xml 反射_java使用dom4j解析xml配置文件实现抽象工厂反射示例
- 【Android】刷Rom:adb reboot bootloader
- python requests 示例_Python3中requests库学习01(常见请求示例)
- JMeter配置元件【HTTP请求默认值】
- OpenStack Orchestration service (编排服务Heat)
- 关于ctf竞赛训练 积累的资料
- 前端特效 - 前置- - 01. 百叶窗
- 2021年后Win10续用IE Flash插件的方法
- 最难学的十大编程语言,C++排第二,它竟是第一名!不服
- 用计算机技术辅助语文教学,利用计算机技术辅助拼音学习“潜力无限”
- 音响无声或声音不正常的原因有哪些?
- 剑指 Offer 24. 反转链表
- Gartner发布2022年云平台服务技术成熟度曲线,iPaaS、低代码将达到成熟期
- 哥吃的不是饭,是农药~~!是化肥~~!是激素~!!
- android手机屏幕共享神器踩坑指南
- HCSC 2022cvpr 训练报错
- Maxcompute 小记1
- 使用pandas对excel追加列数据
热门文章
- 02:输出最高分数的学生姓名
- Windows下程序启动时出现0xc000007b错误的解决方案
- Log4j 2使用教程
- Android分享中, 过滤指定的应用,已经过滤蓝牙, 并且对不同的分享方式发送不同的内容?...
- 1到100的素数(java)
- 开发海思3520a遇到的问题
- s5pv210 音频播放问题 MPlayer移植
- Django入门(二) 理解Django生命流程周期
- 阿里云峰会 | 统一召回引擎在搜索场景的应用实践
- Ask Me Anything #1 我是新晋CNCF TOC张磊,你有什么想问我的?