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面向对象编程(一) 实例代码
Jun 25 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
js解决movebox移动问题
Mar 29 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 Javascript
使用Mock.js生成前端测试数据
Dec 13 Javascript
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多线程下载远程多个文件
2013/06/25 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
js 图片轮播(5张图片)
2008/12/30 Javascript
js Dialog 实践分享
2012/10/22 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
团员学习总结的自我评价范文
2013/10/14 职场文书
写给保洁员表扬信
2014/01/08 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
商铺门前三包责任书
2014/07/25 职场文书
庆元旦演讲稿
2014/09/15 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
总账会计岗位职责
2015/04/02 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python