JavaScript中this的使用详解


Posted in Javascript onNovember 08, 2013

我们要记住一句话:this永远指向函数运行时所在的对象!而不是函数被创建时所在的对象。切记…
本文将分三种情况来分析this对象到底身处何方。
普通函数中的this
无论this身处何处,第一要务就是要找到函数运行时的位置。

1 var name="全局";
2 function getName(){
3     var name="局部";
4     return this.name;
5 };
6 alert(getName());

当this出现在全局环境的函数getName中时,此时函数getName运行时的位置在
alert(getName());

显然,函数getName所在的对象是全局对象,即window,因此this的安身之处定然在window。此时的this指向window对象,则getName返回的this.name其实是window.name,因此alert出来的是“全局”!
那么,当this不是出现在全局环境的函数中,而是出现在局部环境的函数中时,又会身陷何方呢?
1 var name="全局";
2 var twobin={
3     name:"局部",
4     getName:function(){
5         return this.name;
6     }
7 };
8 alert(twobin.getName());

其中this身处的函数getName不是在全局环境中,而是处在twobin环境中。无论this身处何处,一定要找到函数运行时的位置。此时函数getName运行时的位置
alert(twobin.getName());

显然,函数getName所在的对象是twobin,因此this的安身之处定然在twobin,即指向twobin对象,则getName返回的this.name其实是twobin.name,因此alert出来的是“局部”!
闭包中的this
闭包也是个不安分子,本文暂且不对其过于赘述,简而言之:所谓闭包就是在一个函数内部创建另一个函数,且内部函数访问了外部的变量。
浪子this与痞子闭包混在一起,可见将永无宁日啊!
 1 var name="全局";
 2 var twobin={
 3     name:"局部",
 4     getName:function(){
 5         return function(){
 6             return this.name;
 7         };
 8     }
 9 };
10 alert(twobin.getName()());

此时的this明显身处困境,竟然处在getName函数中的匿名函数里面,而该匿名函数又调用了变量name,因此构成了闭包,即this身处闭包中。
无论this身处何处,一定要找到函数运行时的位置。此时不能根据函数getName运行时的位置来判断,而是根据匿名函数的运行时位置来判断。
function (){
    return this.name;
};

显然,匿名函数所在的对象是window,因此this的安身之处定然在window,则匿名函数返回的this.name其实是window.name,因此alert出来的就是“全局”!
那么,如何在闭包中使得this身处在twobin中呢?
  var name="全局";
  var twobin={
      name:"局部",
      getName:function(){
          var that=this;
          return function(){
              return that.name;
          };
      }
 };
 alert(twobin.getName()());

在getName函数中定义that=this,此时getName函数运行时位置在
alert(twobin.getName());
则this指向twobin对象,因此that也指向twobin对象。在闭包的匿名函数中返回that.name,则此时返回的that.name其实是twobin.name,因此就可以alert出来 “局部”!
call与apply中的this
在JavaScript中能管的住this的估计也就非call与apply莫属了。
call与apply就像this的父母一般,让this住哪它就得住哪,不得不听话!
 var name="全局";
 var twobin={
name:"局部",
};
function getName(){
    alert(this.name);
}
getName(twobin);
getName.call(twobin);

其中this身处函数getName中。无论this身处何处,一定要找到函数运行时的位置。此时函数getName运行时的位置
getName(twobin);
显然,函数getName所在的对象是window,因此this的安身之处定然在window,即指向window对象,则getName返回的this.name其实是window.name,因此alert出来的是“全局”!
那么,该call与apply登场了,因为this必须听他们的指挥!
getName.call(twobin);
其中,call指定this的安身之处就是在twobin对象,因为this被迫只能在twobin那安家,则此时this指向twobin对象, this.name其实是twobin.name,因此alert出来的是“局部”!
一点总结
浪子this:永远指向函数运行时所在的对象,而不是函数被创建时所在的对象;如果处在匿名函数中或不处于任何对象中,则this指向window对象;如果是call或apply,它指定哪个对象,则this就指向哪个对象!
Javascript 相关文章推荐
javascript控制层显示或隐藏的方法
Jul 22 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
JS实现页面打印功能
Mar 16 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 #Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 #Javascript
原生js做的手风琴效果的导航菜单
Nov 08 #Javascript
jquery 日期控件datepicker属性详细解析
Nov 08 #Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 #Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 #Javascript
iframe子父页面调用js函数示例
Nov 07 #Javascript
You might like
用PHP实现维护文件代码
2007/06/14 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
js实现的map方法示例代码
2014/01/13 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
EsLint入门学习教程
2017/02/17 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
对python以16进制打印字节数组的方法详解
2019/01/24 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
史上最全面的Java面试题汇总!
2015/02/03 面试题
房产销售经理职责
2013/12/20 职场文书
教师绩效工资方案
2014/02/01 职场文书
一年级语文教学反思
2014/02/13 职场文书
党员公开承诺事项
2014/03/25 职场文书
品德评语大全
2014/05/05 职场文书
经典演讲稿开场白
2014/08/25 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
文艺演出主持词
2015/07/01 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
JS封装cavans多种滤镜组件
2022/02/15 Javascript
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL