聊一聊JS中this的指向问题
更新时间：2016年06月17日 10:51:28 作者：沫晴的前端世界
这篇文章主要为大家详细介绍了聊一聊JS中this的指向问题，帮助大家轻松了解JS中this的指向，感兴趣的小伙伴们可以参考一下
JS中的this指向一直是个让人头疼的问题，想当初我学的是天昏地暗，查了好多资料，看的头都大了，跟他大战了那么多回合，终于把它搞定个七八分，其实往往都是我们复杂化了，现在就让大家轻松看懂this的指向，我会分以下几种情况来说。
this的指向：
1、this 指的是调用当前方法（函数）的那个对象，也就是说函数在谁那被调用，this就指的是谁。
来看两个栗子：
oBtn.onclick = function(){
alert(this); //oBtn
}
oBtn[i].onclick = fn1;
function fn1(){
alert(this); //oBtn
}
很容易看出，函数是在按钮对象被点击的时候调用，所以this指的是obtn，这两种情况是等同的是，只是调用函数的写法不同。
2 当函数里面嵌套函数的时候，嵌套的那个函数里面的this指的是window,不要过分深究这个原因，因为这是JS的一个特性。
来看个栗子：
oBtn.onclick = function(){
alert(this); //oBtn(记得这里还是oBtn)
fn1();
}
function fn1(){
alert(this); // window
}
3 、对于上述情况，当我们需要fn1里面的this指向按钮的时候怎么办呢，这个时候有两种方法。
1) 将this作为参数传函数去
2) 将this保存起来赋给另一个变量
来看两个栗子：
oBtn.onclick = function(){
alert(this); //oBtn
fn1(this); 1 将上面的this作为参数传函数去
}
function fn1(obj){
alert(obj); // oBtn
}
var that = null;
oBtn[i].onclick = function(){
alert(this); //oBtn
that = this ;// 将上面的this保存起来赋给另一个变量
fn1();
}
function fn1(){
alert(that); // 指向oBtn
}
OK，this的指向，最基础的也就这几种，很多复杂的也是由基础演变的。有没有轻松掌握呢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Bootstrap学习笔记之标签基本样式的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要为大家详细介绍了javascript html5轻松实现拖动功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
for循环中我们使用continue；终止本次循环计入下一个循环，使用break终止整个循环。下面小编通过本文给大家分享JS中跳出循环的示例代码，需要的朋友参考下吧2017-09-09
这篇文章主要介绍了JavaScript中合并数组的N种方法,本文使用concat、循环插入、reduce等方法合并JavaScript数组,需要的朋友可以参考下2014-09-09
下面小编就为大家带来一篇Textarea输入字数限制实例(兼容iOS&安卓)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了BootStrap 超链接变按钮的实现方法以及js按钮bootstrap超链接的操作方法，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-09-09
在javascript中创建对象的三种方法，脚本之家以前发布过有简单实例版的，大家可以参考下。2010-12-12
这篇文章主要介绍了JS一次前端面试经历,结合具体案例形式分析了JS前端面试过程中遇到的问题以及响应的注意事项,需要的朋友可以参考下2020-03-03
在搭建博主博客的时候，寻思着做一些效果，看到菜单，就想是不是可以做一下颜色的渐变，增加一点动态的感觉。有个jquery的插件，效果相当不错，不过博主还是打算自立更生写一下，看看能不能实现2013-10-10
这篇文章主要介绍了手机软键盘弹出时影响布局的解决方法的相关资料,大家开发移动端的软件时候，肯定会因为软键盘的弹窗影响布局，这里说下如何解决，需要的朋友可以参考下2016-12-12
最新评论