详解javascript中的this对象

前言

Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象。Javascript可以通过一定的设计模式来实现面向对象的编程,其中this “指针”就是实现面向对象的一个很重要的特性。但是this也是Javascript中一个非常容易理解错,进而用错的特性。特别是对于接触静态语言比较久了的同志来说更是如此。

示例说明

我们先来看一个最简单的示例:

<script type="text/javascript">
    var name = "Kevin Yang";
    function sayHi(){
       alert("你好,我的名字叫" + name);
    }
    sayHi();
</script>

这段代码很简单,我们定义了一个全局字符串对象name和函数对象sayHi。运行会弹出一个打招呼的对话框,“你好,我的名字叫Kevin Yang”。

我们把这段代码稍微改一改:

<script type="text/javascript">
    var name = "Kevin Yang";
    function sayHi(){
       alert("你好,我的名字叫" + this.name);
    }
    sayHi();
</script>

这段代码和上段代码的区别就在于sayHi函数在使用name的时候加上了this.前缀。运行结果和上面一摸一样。这说明this.name引用的也还是全局的name对象。

开头我们不是说了,函数也是普通的对象,可以将其当作一个普通变量使用。我们再把上面的代码改一改:

<script type="text/javascript">
    var name = "Kevin Yang";
    function sayHi(){
       alert("你好,我的名字叫" + this.name);
    }
    var person = {};
    person.sayHello = sayHi;
    person.sayHello();
</script>

这一次,我们又创建了一个全局对象person,并将sayHi函数对象赋给person对象的sayHello属性。运行结果如下:

这一次打招呼的内容就有点无厘头了,我们发现this.name已经变成undefined了。这说明,在sayHello函数内部执行时已经找不着this.name对象了。如果我们重新定义person对象,在其上面加上一个name属性又会怎么样呢?

var person = {name:"Marry"};

运行代码发现打招呼的“人”变了:

是不是看出点道道了呢?

判别this指针的指导性原则

在Javascript里面,this指针代表的是执行当前代码的对象的所有者。

在上面的示例中我们可以看到,第一次,我们定义了一个全局函数对象sayHi并执行了这个函数,函数内部使用了this关键字,那么执行this这行代码的对象是sayHi(一切皆对象的体现),sayHi是被定义在全局作用域中。其实在Javascript中所谓的全局对象,无非是定义在window这个根对象下的一个属性而已。因此,sayHi的所有者是window对象。也就是说,在全局作用域下,你可以通过直接使用name去引用这个对象,你也可以通过window.name去引用同一个对象。因而this.name就可以翻译为window.name了。

再来看第二个this的示例。我们定义了一个person的对象,并定义了它的sayHello属性,使其指向sayHi全局对象。那么这个时候,当我们运行person.sayHello的时候,this所在的代码所属对象就是sayHello了(其实准确来说,sayHi和sayHello是只不过类似两个指针,指向的对象实际上是同一个),而sayHello对象的所有者就是person了。第一次,person里面没有name属性,因此弹出的对话框就是this.name引用的就是undefined对象(Javascript中所有只声明而没有定义的变量全都指向undefined对象);而第二次我们在定义person的时候加了name属性了,那么this.name指向的自然就是我们定义的字符串了。

理解了上面所说的之后,我们将上面最后一段示例改造成面向对象式的代码。

<script type="text/javascript">
    var name = "Kevin Yang";
    function sayHi(){
       alert("你好,我的名字叫" + this.name);
    }
    function Person(name){
        this.name = name;
    }
    Person.prototype.sayHello = sayHi;
    var marry = new Person("Marry");   
    marry.sayHello();
    var kevin = new Person("Kevin");
    kevin.sayHello();
</script>

在上面这段代码中,我们定义了一个Person的“类”(实际上还是一个对象),然后在这个类的原型(类原型相当于C++中的静态成员变量的概念)中定义了sayHello属性,使其指向全局的sayHi对象。运行代码我们可以看到,marry和kevin都成功的向我们打了声“招呼”。

在这段代码中有两点需要思考的,一个是new我们很熟悉,但是在这里new到底做了什么操作呢?另外一个是,这里执行sayHello的时候,this指针为什么能够正确的指向marry和kevin对象呢?

我们来把上面定义“类”和实例化类对象的操作重新“翻译”一下:

<script type="text/javascript">
    var name = "Kevin Yang";
    function sayHi(){
       alert("你好,我的名字叫" + this.name);
    }
    function Person(name){
        var this;
        this.name = name;
        return this;
    }
    Person.prototype.sayHello = sayHi;
    var marry = Person("Marry");   
    marry.sayHello();
    var kevin = Person("Kevin");
    kevin.sayHello();
</script>

当然这段代码并不能正确执行,但是它可以帮助你更好的理解这个过程。

当我们使用new关键字实例化一个“类”对象的时候,Javascript引擎会在这个对象内部定义一个新的对象并将其存入this指针。所有此对象内部用到this的代码实际上都是指向这个新的对象。如this.name = name,实际上是将参数中的name对象赋值给了这个新创建的对象。函数对象执行完之后Javascript引擎会将此对象返回给你,于是就有marry变量得到的对象的name为“Marry”,而kevin变量得到的对象的name属性确实“Kevin”。

显式操纵this指针

在上面的面向对象式编程实例中,我们看到,在使用new操作符的情况下,看起来this的指向和我们前一节中讲到的指导原则并不相符。 this指针并没有指向marry或者kevin的所有者,而是指向marry和kevin变量本身。

实际上,如果你理解什么是指针的话,那么你就会知道,既然是指针,那么当然可以改变其指向的对象。只不过Javascript引擎不允许我们自己写代码来做这样的事情,也就是说,在Javascript中,你不可以直接写this = someObj这样的代码。Javascript引擎通过以下两种方式允许我们显式指定this指针指代的对象:

1. 通过new操作符,Javascript引擎会将this指针返回给被赋值的变量A(对应上面的例子就是marry和kevin变量),这个时候A和 this指针引用的就是同一个对象了,即A == this。过程参见上面的伪代码。

2. 通过Function.apply或者Function.call的原型方法,我们可以将this指针指代的对象以参数的形式传入,这个时候,函数内部使用的this指针就是传入的参数。

注意,对于这种显式指定this指针的情况,上一节提到的指导原则不再适用。

容易误用的情况

理解了this指针后,我们再来看看一些很容易误用this指针的情况。

示例1——内联式绑定Dom元素的事件处理函数

<script type="text/javascript">
    function sayHi(){
       alert("当前点击的元素是" + this.tagName);
    }    
</script>
<input id="btnTest" type="button" value="点击我" onclick="sayHi()">

在此例代码中,我们绑定了button的点击事件,期望在弹出的对话框中打印出点击元素的标签名。但运行结果却是:

也就是this指针并不是指向input元素。这是因为当使用内联式绑定Dom元素的事件处理函数时,实际上相当于执行了以下代码:

<script type="text/javascript">    
    document.getElementById("btnTest").onclick = function(){
        sayHi();
    }
</script>

在这种情况下sayHi函数对象的所有权并没有发生转移,还是属于window所有。用上面的指导原则一套我们就很好理解为什么this.tagName是undefined了。

那么如果我们要引用元素本身怎么办呢?

我们知道,onclick函数是属于btnTest元素的,那么在此函数内部,this指针正是指向此Dom对象,于是我们只需要把this作为参数传入sayHi即可。

<script type="text/javascript">
    function sayHi(el){
       alert("当前点击的元素是" + el.tagName);
    }
</script>
<input id="btnTest" type="button" value="点击我" onclick="sayHi(this)">

等价代码如下:

<script type="text/javascript"> 
    document.getElementById("btnTest").onclick = function(){
        sayHi(this);
    }
</script>

示例2——临时变量导致的this指针丢失

<script type="text/javascript">
    var Utility = {
        decode:function(str){
            return unescape(str);
        },
        getCookie:function(key){
            // ... 省略提取cookie字符串的代码
            var value = "i%27m%20a%20cookie";
            return this.decode(value);
        }
    };
    alert(Utility.getCookie("identity"))
</script>

我们在写稍微有点规模的Js库的时候,一般都会自己封装一个Utility的类,然后将一些常用的函数作为Utility类的属性,如客户端经常会用到的getCookie函数和解码函数。如果每个函数都是彼此独立的,那么还好办,问题是,函数之间有时候会相互引用。例如上面的getCookie函数,会对从document.cookie中提取到的字符串进行decode之后再返回。如果我们通过Utility.getCookie去调用的话,那么没有问题,我们知道,getCookie内部的this指针指向的还是Utility对象,而Utility对象时包含decode属性的。代码可以成功执行。

但是有个人不小心这样使用Utility对象呢?

<script type="text/javascript">
    function showUserIdentity(){
        // 保存getCookie函数到一个局部变量,因为下面会经常用到
        var getCookie = Utility.getCookie;
        alert(getCookie("identity"));
    }
    showUserIdentity();
</script>

这个时候运行代码会抛出异常“this.decode is not a function”。运用上面我们讲到的指导原则,很好理解,因为此时Utility.getCookie对象被赋给了临时变量getCookie,而临时变量是属于window对象的——只不过外界不能直接引用,只对Javascript引擎可见——于是在getCookie函数内部的this指针指向的就是window对象了,而window对象没有定义一个decode的函数对象,因此就会抛出这样的异常来。

这个问题是由于引入了临时变量导致的this指针的转移。解决此问题的办法有几个:

  • 不引入临时变量,每次使用均使用Utility.getCookie进行调用
  • getCookie函数内部使用Utility.decode显式引用decode对象而不通过this指针隐式引用(如果Utility是一个实例化的对象,也即是通过new生成的,那么此法不可用)
  • 使用Funtion.apply或者Function.call函数指定this指针

前面两种都比较好理解,第三种需要提一下。正是因为this指针的指向很容易被转移丢失,因此Javascript提供了两个类似的函数apply和call来允许函数在调用时重新显式的指定this指针。

修正代码如下:

<script type="text/javascript">
    function showUserIdentity(){
        // 保存getCookie函数到一个局部变量,因为下面会经常用到
        var getCookie = Utility.getCookie;
        alert(getCookie.call(Utility,"identity"));
        alert(getCookie.apply(Utility,["identity"]));
    }
    showUserIdentity();
</script>

call和apply只有语法上的差异,没有功能上的差别。

示例3——函数传参时导致的this指针丢失

我们先来看一段问题代码:

<script type="text/javascript">
    var person = {
        name:"Kevin Yang",
        sayHi:function(){
            alert("你好,我是"+this.name);
        }
    }
    setTimeout(person.sayHi,5000);
</script>

这段代码期望在访客进入页面5秒钟之后向访客打声招呼。setTimeout函数接收一个函数作为参数,并在指定的触发时刻执行这个函数。可是,当我们等了5秒钟之后,弹出的对话框显示的this.name却是undefined。

其实这个问题和上一个示例中的问题是类似的,都是因为临时变量而导致的问题。当我们执行函数的时候,如果函数带有参数,那么这个时候Javascript引擎会创建一个临时变量,并将传入的参数复制(注意,Javascript里面都是值传递的,没有引用传递的概念)给此临时变量。也就是说,整个过程就跟上面我们定义了一个getCookie的临时变量,再将Utility.getCookie赋值给这个临时变量一样。只不过在这个示例中,容易忽视临时变量导致的bug。

函数对象传参

对于函数作为参数传递导致的this指针丢失的问题,目前很多框架都已经有方法解决了。

Prototype的解决方案——传参之前使用bind方法将函数封装起来,并返回封装后的对象

<script type="text/javascript">
    var person = {
        name:"Kevin Yang",
        sayHi:function(){
            alert("你好,我是"+this.name);
        }
    }
    var boundFunc = person.sayHi.bind(person,person.sayHi);
    setTimeout(boundFunc,5000);
</script>

bind方法的实现其实是用到了Javascript又一个高级特性——闭包。我们来看一下源代码:

function bind(){
    if (arguments.length < 2 && arguments[0] === undefined) 
        return this;
    var __method = this, args = $A(arguments), object = args.shift();
    return function(){
        return __method.apply(object, args.concat($A(arguments)));
    }
}

首先将this指针存入函数内部临时变量,然后在返回的函数对象中引用此临时变量从而形成闭包。

微软的Ajax库提供的方案——构建委托对象

<script type="text/javascript">
    var person = {
        name:"Kevin Yang",
        sayHi:function(){
            alert("你好,我是"+this.name);
        }
    }    
    var boundFunc = Function.createDelegate(person,person.sayHi);
    setTimeout(boundFunc,5000);
</script>

其实本质上和prototype的方式是一样的。

著名的Extjs库的解决方案采用的手法和微软是一样的。

详解javascript中的this对象的更多相关文章

  1. 详解Javascript中的Array对象

    基础介绍 创建数组 和Object对象一样,创建Array也有2种方式:构造函数.字面量法. 构造函数创建 使用构造函数的方式可以通过new关键字来声明,如下所示: 12 var arr = new ...

  2. 详解JavaScript中的Object对象

    Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的.虽说我们平时只是简单地使用了Object对象来存储数据,并没有使用到太多其他功能,但是 ...

  3. 【转】详解JavaScript中的this

    ref:http://blog.jobbole.com/39305/ 来源:foocoder 详解JavaScript中的this JavaScript中的this总是让人迷惑,应该是js众所周知的坑 ...

  4. 详解 javascript中offsetleft属性的用法(转)

    详解 javascript中offsetleft属性的用法 转载  2015-11-11   投稿:mrr    我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...

  5. (转载)详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  6. 详解JavaScript中的原型

    前言 原型.原型链应该是被大多数前端er说烂的词,但是应该还有很多人不能完整的解释这两个内容,当然也包括我自己. 最早一篇原型链文章写于2019年07月,那个时候也是费了老大劲才理解到了七八成,到现在 ...

  7. 详解Javascript中正则表达式的使用

    正则表达式用来处理字符串特别好用,在JavaScript中能用到正则表达式的地方有很多,本文对正则表达式基础知识和Javascript中正则表达式的使用做一个总结. 第一部分简单列举了正则表达式在Ja ...

  8. sort方法实际应用详解---javascript中对一个对象数组按照对象某个属性进行排序

    转载: 查看原文 在javascript中,对象和数组是两种不同的类型,这和php中的数组概念不同.在javascript中,也有一些精妙的算法,用来对一些对象进行排序.我在面试迅雷的时候,也拿到一道 ...

  9. 【转】详解JavaScript中的异常处理方法

    有三种类型的编程错误:(1)语法错误和(2)运行时错误(3)逻辑错误:语法错误: 语法错误,也被称为解析错误,在编译时进行传统的编程语言,并出现在JavaScript解释时. 例如,下面一行将导致一个 ...

随机推荐

  1. C#集合--Dictionary

    字典(dictionary)是一个集合,其中每个元素都是一个键/值对.字典(Dictionaries)是常用于查找和排序的列表. .NET Framework通过IDictionary接口和IDict ...

  2. nginx中使用srcache_nginx模块构建缓存

    nginx中可以将lua嵌,让nginx执行lua脚本,可以处理高并发,非阻塞的处理各种请求,openresty项目中可以使用nignx可以直接构建 srcache_nginx + redis 缓存, ...

  3. Linux入门_2-基础命令

    Linux入门-基础命令 目录 日期命令date 修改时区 日历命令cal 关机启动命令halt,reboot,poweroff whoami.who.who am i.w screen ...

  4. go-mod 入门

    Q群有人问go mod 问题,自己也忘了些.顺便再整理下. GO111MODULE可以设置为三个字符串值之一:off,on或auto(默认值). off 则go命令从不使用新模块支持.它查找vendo ...

  5. 8)django-示例(url传递参数)

    url传递参数有两种,一个是通过普通分组方式,一个是通过带命名分组方式 1.传递方式 1)普通分组方式,传递参数顺序是严格的.如下例子 url(r'^detail-(\d+)-(\d+).html', ...

  6. 【官方文档】Nginx模块Nginx-Rtmp-Module学习笔记(二)HLS 指令详解

    源码地址:https://github.com/Tinywan/PHP_Experience 一.在Nginx配置文件的RTMP模块中配置hls hls_key_path /tmp/hlskeys; ...

  7. Python巧用正则表达式,完成接口参数替换

    最近给Python11期的小朋友们上课,遇到了一个参数替换的问题,首先描述下场景: 需要参数化的数据如下所示: 这个时候如果利用单纯的if判断和字符串的find和replace方法,做起来是非常不明智 ...

  8. RDP 数据库简介

    在扩增子数据分析中,有时会发现多个OTU 注释到了同一个species ,  为什么会出现这种情况呢? 首先既然在OTU水平能分开,说明序列的相似度小于97%,  同一个物种的同一个基因的片段相似度会 ...

  9. 粘包、拆包发生原因滑动窗口、MSS/MTU限制、Nagle算法

    [TCP协议](3)---TCP粘包黏包 [TCP协议](3)---TCP粘包黏包 有关TCP协议之前写过两篇博客: 1.[TCP协议](1)---TCP协议详解 2.[TCP协议](2)---TCP ...

  10. Zookeeper(一) zookeeper基础使用

    一.Zookeeper是什么 (安装的是3.4.7) ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现.它提供了简单原始的功能, ...