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

详解JavaScript中的 this

编程学习2013-05-1035230

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://apull.net/html/20130510214425.html

分享给朋友:

相关文章

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

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

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

常用asp函数

常用asp函数

<% '------------------------------------- '所有功能函数名如下: ' StrLength(str) 取得字符串长度 ' CutStr(str,strlen) 字符串长度切割 ' CheckIsEmpty(tstr) 检测是否为空 ' isInteger(para) 整数检验 ' CheckName(str) 名字字符校验 ' CheckPassword(str) 密码检验 ' CheckEmail(emai...

ASP六大对象介绍

ASP六大对象介绍

Application对象 Application对象是个应用程序级的对象,用来在所有用户间共享信息,并可以在Web应用程序运行期间持久地保持数据。 Application的属性:  方法如下: Application对象没有内置的属性,但是我们可以自行创建其属性。 <% Application("属性名")=值 %>    其实大部分Application变量都 存放在Contents集合中,当你创建一个新的Application变量时,其实...

BT雷人的程序语言

BT雷人的程序语言

这个世界从来都不会缺少另类的东西,人类自然世界如此,计算机世界也一样。编程语言方面,看过本站《6个变态的C语言Hello World程序》的朋友们一定对BT和另类不会陌生,但那都是些小儿科,真正的BT和另类要是从语言级上来完成。让我们来看看其中一个比较另类的语言BrainFuck。看到这个程序语言的名字,请不要以为这是一个搞笑的语言,这是一个“严肃事情”,请大家用“最虔诚的态度”来阅读本文。BF语言介绍Brainfuck,是一种极小化的计算机语言,它是由Urban Mülle...

发表评论

访客

看不清,换一张

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