轻松了解JS中this的指向
2016-06-15 17:20
288 查看
JS中的this指向一直是个让人头疼的问题,想当初我学的是天昏地暗,查了好多资料,看的头都大了,跟他大战了那么多回合,终于把它搞定个七八分,其实往往都是我们复杂化了,现在就让大家轻松看懂this的指向,我会分以下几种情况来说。
this的指向:
1 this 指的是调用当前方法(函数)的那个对象,也就是说函数在谁那被调用,this就指的是谁。
来看两个栗子:
很容易看出,函数是在按钮对象被点击的时候调用,所以this指的是obtn,这两种情况是等同的是,只是调用函数的写法不同。
2 当函数里面嵌套函数的时候,嵌套的那个函数里面的this指的是window,不要过分深究这个原因,因为这是JS的一个特性。
来看个栗子:
3 对于上述情况,当我们需要fn1里面的this指向按钮的时候怎么办呢,这个时候有两种方法。
1 将this作为参数传函数去
2 将this保存起来赋给另一个变量
来看两个栗子:
OK,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保存起来赋给另一个变量
来看两个栗子:
1 oBtn.onclick = function(){ alert(this); //oBtn fn1(this); 1 将上面的this作为参数传函数去 } function fn1(obj){ alert(obj); // oBtn } 2 var that = null; oBtn[i].onclick = function(){ alert(this); //oBtn that = this ;// 将上面的this保存起来赋给另一个变量 fn1(); } function fn1(){ alert(that); // 指向oBtn }
OK,this的指向,最基础的也就这几种,很多复杂的也是由基础演变的。有没有轻松掌握呢。
说点题外话,今天是我的第一篇博客,我平常呢,是个特别喜欢做笔记,也经常总结的人,只是写博客比较少,因为说不出来太多有文笔的东西,喜欢简单利索,逻辑分明的东西,希望以后我能更简单的将复杂的东西分享给你们,我们也一起学习,有什么不正确的,欢迎指正。
相关文章推荐
- 深入浅析JS的数组遍历方法(推荐)
- Js循环绑定事件处理
- javascript 随记
- 3、javascript脚本语言
- Javascript深度复制对象
- MyEclipse安装JS代码提示(Spket插件)
- JavaScript中function的多义性
- JavaScript中function的多义性
- amCharts图表中的JavaScript中文注释引起的浏览器兼容性问题
- JSON数据中带有HTML标签解决方法
- KnockOut.js入门示例详解
- window.open中url传递一个json
- 动画插件wow.js的使用方法
- JSON简介
- JavaScript专题(二):深入理解iframe
- linq to js使用汇总
- js刷新页面方法大全
- JavaScript闭包--模仿块级作用域
- js中打印使用
- jstack, jstat, jmap, jinfo, 教你如何在背后偷窥你的进程^^