开发者社区> 文艺小青年> 正文

谈谈Javascript的this指针

简介:
+关注继续查看
  • JavaScript中的this总是让人迷惑,应该是js众所周知的坑之一。个人也觉得js中的this不是一个好的设计,由于this晚绑定的特性,它可以是全局对象,当前对象,或者…有人甚至因为坑大而不用this。
  • JavaScript中的this总是让人迷惑,应该是js众所周知的坑之一。个人也觉得js中的this不是一个好的设计,由于this晚绑定的特性,它可以是全局对象,当前对象,或者…有人甚至因为坑大而不用this。
  • 其实如果完全掌握了this的工作原理,自然就不会走进这些坑。来看下以下这些情况中的this分别会指向什么:

1.全局代码中的this

  1. 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.作为构造函数

  1. 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:

  1. 复制代码
    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

  1. person.hello.call(person, "world")

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

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

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

简单地总结

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

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

1.当函数作为对象的方法调用时,this指向该对象。

2.当函数作为淡出函数调用时,this指向全局对象(严格模式时,为undefined)

3.构造函数中的this指向新创建的对象

4.嵌套函数中的this不会继承上层函数的this,如果需要,可以用一个变量保存上层函数的this。

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

  1. obj.foocoder();  
  2. foocoder.call(obj, ...);  
  3. foocoder.apply(obj, …);  

更进一步

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

  1. $("#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方法可以很好地解决上述问题。

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

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

  1. 复制代码
    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)));  
      };  
    };  
    复制代码
本文转自艾伦 Aaron博客园博客,原文链接:http://www.cnblogs.com/aaronjs/archive/2011/09/02/2164009.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
10002 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
13862 0
c++中基类与派生类中隐含的this指针的分析
先不要看结果,看一下你是否真正了解了this指针? 1 #include 2 using namespace std; 3 4 class Parent{ 5 public: 6 int x; 7 Parent *p; ...
561 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
18989 0
【C++】This指针和复制构造函数
在声明一个类的时候,是没有分配存储空间的,只有在真正定义一个对象的时候,程序才会为这个对象分配相应的存储空间。 如果定义了多个对象,这些对象都有自己的存储空间,但是这些对象都是用相同的成员方法的。
926 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
25230 0
Hibernate查询,数据库中无数据正常,有数据出现java.lang.NullPointerException 空指针异常
hibernate执行表与表之间多对一的查询时,如果数据库中没有数据时,一切正常,一旦将数据插入到数据库中,查询的时候将会抛出空指针异常。以下是我的*.hbm.xml的配置 后来经过多方查证,需要在配置文件中的多对一的查询中加入Lazy="false". 需要修改的地方为: 但我有个疑问啊,lazy的默认就是false,不写的话就会报错,写上就不抛空指针异常,这是问什么呢??求证。
1017 0
带你读《C指针原理揭秘:基于底层实现机制》之三:AT&T汇编概述
本书从底层实现机制进行解析,同时配合C/C++编程技巧以及某些指针运用技巧,讲解如何提高程序效能,如何避免滥用指针,从C语言编程的角度讲解C指针,力图使读者学会运用C指针进行开发,并能进一步灵活将指针运用在精巧的算法上,构造更复杂的软件系统。
892 0
Python 技术篇-利用pymouse库操作windows系统电脑实现鼠标指针移动、点击
Python 技术篇-利用pymouse库操作windows系统电脑实现鼠标指针移动、点击
40 0
3576
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载