说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

详解 JavaScript 中的 this

HTML文档下载 WORD文档下载 PDF文档下载
JavaScript中的this总是让人迷惑,应该是js众所周知的坑之一。 个人也觉得js中的this不是一个好的设计,由于this晚绑定的特性,它可以是全局对象,当前对象,或者…有人甚至因为坑大而不用this。

其实如果完全掌握了this的工作原理,自然就不会走进这些坑。来看下以下这些情况中的this分别会指向什么:

1.全局代码中的this

alert(x);// 全局变量x值为2

全局范围内的this将会指向全局对象,在浏览器中即使window。

2.作为单纯的函数调用

function fooCoder(x) {this.x = x;}fooCoder(2);alert(x);// 全局变量x值为2

这里this指向了全局对象,即window。在严格模式中,则是undefined。

3.作为对象的方法调用

var name = "clever coder";var person = {name : "foocoder",hello : function(sth){console.log(this.name + " says " + sth);}}person.hello("hello world");

输出 foocoder says hello world。this指向person对象,即当前对象。

4.作为构造函数

new FooCoder();
函数内部的this指向新创建的对象。

5.内部函数

var name = "clever coder";var person = {name : "foocoder",hello : function(sth){var sayhello = function(sth) {console.log(this.name + " says " + sth);};sayhello(}person.hello("hello world");//clever coder says hello world

在内部函数中,this没有按预想的绑定到外层函数对象上,而是绑定到了全局对象。这里普遍被认为是JavaScript语言的设计错误,因为没有人想让内部函数中的this指向全局对象。一般的处理方式是将this作为变量保存下来,一般约定为that或者self:

var name = "clever coder";var person = {name : "foocoder",hello : function(sth){var that = this;var sayhello = function(sth) {console.log(that.name + " says " + sth);};sayhello(sth);}}person.hello("hello world");//foocoder says hello world

6.使用call和apply设置this

person.hello.call(person, "world");
apply和call类似,只是后面的参数是通过一个数组传入,而不是分开传入。两者的方法定义:

call( thisArg [,arg1,arg2,… ] );  // 参数列表,arg1,arg2,...apply(thisArg [,argArray] );     // 参数数组,argArray

两者都是将某个函数绑定到某个具体对象上使用,自然此时的this会被显式的设置为第一个参数。

简单地总结

简单地总结以上几点,可以发现,其实只有第六点是让人疑惑的。

其实就可以总结为以下几点:

  1. 当函数作为对象的方法调用时,this指向该对象。
  2. 当函数作为淡出函数调用时,this指向全局对象(严格模式时,为undefined)
  3. 构造函数中的this指向新创建的对象
  4. 嵌套函数中的this不会继承上层函数的this,如果需要,可以用一个变量保存上层函数的this。

再总结的简单点,如果在函数中使用了this,只有在该函数直接被某对象调用时,该this才指向该对象。

obj.foocoder();foocoder.call(obj, ...);foocoder.apply(obj, …);

更进一步

我们可能经常会写这样的代码:

$("#some-ele").click = obj.handler;
如果在handler中用了this,this会绑定在obj上么?显然不是,赋值以后,函数是在回调中执行的,this会绑定到$(“#some-div”)元素上。这就需要理解函数的执行环境。本文不打算长篇赘述函数的执行环境,可以参考《javascript高级程序设计》中对执行环境和作用域链的相关介绍。这里要指出的时,理解js函数的执行环境,会更好地理解this。

那我们如何能解决回调函数绑定的问题?ES5中引入了一个新的方法,bind():

fun.bind(thisArg[, arg1[, arg2[, ...]]])thisArg

当绑定函数被调用时,该参数会作为原函数运行时的this指向.当使用new 操作符调用绑定函数时,该参数无效.

arg1, arg2, ...
当绑定函数被调用时,这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数.

该方法创建一个新函数,称为绑定函数,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.

显然bind方法可以很好地解决上述问题。

$("#some-ele").click(person.hello.bind(person));//相应元素被点击时,输出foocoder says hello world

其实该方法也很容易模拟,我们看下Prototype.js中bind方法的源码:

Function.prototype.bind = function(){  var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift();  return function(){    return fn.apply(object,      args.concat(Array.prototype.slice.call(arguments)));  };};

明白了么?

相信看完全文以后,this不再是坑~

五步走战略——Avocado在最初几周内迅速扩大30倍 NoSQL产品测评:Cassandra、MongoDB、Couchbase和Aerospike 谷歌眼镜开箱评测:比想象更精致 Pinterest谈实战经验:如何在两年内实现零到数百亿的月访问 初创公司Instart Logic:专为电子出版商和网站站长解决“痛点” 初学.net,希望能与你们交个朋友.有问题请教你们,谢谢! vc编译小程序的问题 怎么发布网页 为什么调用静态库包error LNK2001 的错误? vb中一个引用文件的怪问题。。 LONG字段的更新问题 如何在程序中使用http协议post数据到后台 谁说服务器调整后速度慢?快得出奇 SELECT问题,在线等 看流星一定要晴天么?深圳今天可以看到吗? 为什么现在的猿猴不能进化成人啊? 为什么现在的猿猴不能进化成人 我们家养的猪太瘦了,什么样的猪饲料好用? 甲乙两车分别从ab两地同时出发相向而行,相遇时,甲 什么全价猪饲料好 激光测距是什么原理,激光器发射出激光,激光碰到障碍 488激光器为何比532激光器贵 猪饲料配方什么样的好? 奥巴马医改网站安全漏洞细节曝光 内测联合国计划成立预警机构 防范小行星撞俄罗斯称政府内部系统可防止领导人电话日本解密文件称日本曾希望拥有核武器 律师称斯诺登将开始在俄罗斯某大型网站文 革神秘的匿名信案:策 动朱 德 王思聪买4B域名 以科技方式投身投入10年以上不换手机号码的人是什么人掀翻客轮:龙卷风破坏力为何这么大?整容疑云?看AB如何事隔n年去打范冰猎宝天下升龙道天生废物异界逍遥行都市良人行网游之英雄崛起呼和浩特旅游雅鲁藏布大峡谷旅游锦溪旅游镜泊湖旅游羊卓雍措旅游
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘