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

详解JavaScript中的 this

编程学习2013-05-1020880

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

分享给朋友:

相关文章

VB.NET中如何扩充字符串进行固定宽度显示

VB.NET中如何扩充字符串进行固定宽度显示

  在VB.NET中,当你需要在控制台显示数据或准备好打印数据时,可能需要调整列宽以显示固定长度的数据。本文介绍了使用String对象的PadLeft方法和PadRight方法扩充字符串以进行固定宽度显示。PadLeft和PadRight方法      PadLeft和PadRight是字符串类的两个方法,可以分别使用它们在字符串的左边和右边填充空格。这两个方法多接受一个代表总长度的整型数,添加的空格数等于填充总长度减去字符串的当前长...

制作网页28个常用小代码

制作网页28个常用小代码

1、oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键<table border oncontextmenu=return(false)><td>no</table>  可用于Table2、<body onselectstart="return false"> 取消选取、防止复制3、onpaste="retu...

HTML与ASCII码表

HTML与ASCII码表

HTML与ASCII码表Standard ASCII set, HTML Entity names, ISO 10646, ISO 8879, ISO 8859-1  Latin alphabet No. 1Browser support: All browsersASCIIHTMLHTMLDecHexSymbolNumberNameDescription32333435363738394041424344454647202122232425262728292A2B...

SetTimer(), KillTimer() 使用

SetTimer(), KillTimer() 使用

SetTimer函数的用法  1 )用WM_TIMER来设置定时器  先请看SetTimer这个API函数的原型  UINT_PTR SetTimer(   HWND hWnd, // 窗口句柄   UINT_PTR nIDEvent, // 定时器ID,多个定时器时,可以通过该ID判断是哪个定时器   UINT uElapse, // 时间间隔,单位为毫秒   TIMERPROC lpTimerFunc // 回调函数   );例如  SetTimer...

发表评论

访客

看不清,换一张

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