当前位置:首页 > 编程学习 > 详解JavaScript中的 this

详解JavaScript中的 this

编程学习2013-05-1023340

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


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


1.全局代码中的this    

alert(this)//window

全局范围内的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(sth);
    }
}
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不再是坑~


via http://foocoder.com/blog/xiang-jie-javascriptzhong-de-this.html/

扫描二维码推送至手机访问。

版权声明:本文由海阔天空发布,如需转载请注明出处。

本文链接:https://www.apull.net/html/20130510214425.html

分享给朋友:

相关文章

关于学习编程和C语言

关于学习编程和C语言

关于学习编程和C语言  转自 开复网 Q:该怎么学习编程?  A:首先问你一个问题:你们在学校都学些什么课程? 问这个问题的原因是,我认为学校的计算机科学基础课很重要。如果你所在学校的课程设置合理,那你应该先把主要精力花在这些基础课上。很多学生看到基础理论就茫然,不知道这些图表,符号,甚至硬件的知识对将来的软件开发有什么用。用处大得很哪。比如,操作系统课里讲到的多线程的东西在系统编程里很有用。又比如,尽管你将来不会去涉及电脑的...

VBScript 错误信息

VBScript 错误信息

错误代码 信息5 无效的过程调用或参数6 溢出7 内存不够9 下标越界10 数组长度固定或临时锁定11 被零除13 类型不匹配14 字符串空间溢出28 堆栈空间溢出35 Sub或Function未定义48 加载D...

计算机蓝屏代码的含义

计算机蓝屏代码的含义

0 0x0000 作业完成。1 0x0001 不正确的函数。2 0x0002 系统找不到指定的档案。3 0x0003 系统找不到指定的路径。4 0x0004 系统无法开启档案。5 0x0005 拒绝存取。6 0x0006 无效的代码。7 0x0007 储存体控制区块已毁。8 0x0008 储存体空间不足,无法处理这个指令。9 0x0009 储存体控制区块地址无效。10 0x000A 环境不正确。11 0x000B 尝试加载一个格式错误的程序。12 0x000C 存取码错误。1...

ASP错误提示大全

ASP错误提示大全

Microsoft VBScript 语法错误(0×800A03E9)–>内存不足Microsoft VBScript 语法错误(0×800A03EA)–>语法错误Microsoft VBScript 语法错误(0×800A03EB)–>缺少’:’Microsoft VBScript 语法错误(0×800A03ED)–>缺少’(’Mi...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。