JavaScript中的 this的理解

在JavaScript编程中 , this的关键字总是让初学者感到迷惑 , this到底是什么呢?

1. 关于this

JavaScript有别于其他的编程语言 , 它的this总是指向一个对象 , 而具体指向那个对象是在运行时基于函数的执行环境动态绑定的 , 而不是函数在声明时的环境。

2. this的指向

除去不常用的with 和 eval的情况 , 具体到实际应用中 , this的指向大致可以分为以下4种。

(1). 作为对象的方法调用

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

(2). 作为普通函数调用

当函数不作为对象的属性调用时 , 也就是我们常说的普通函数方式 , 此时的this总是指向全局对象 , 在客户端的JavaScript里 , 这个全局对象是指window对象.

再看一个让人鄙视的

有时候我们会遇到一些困扰 , 比如在div节点的事件函数内部 , 有一个局部的callback方法 , callback被作为普通函数调用时 , callback内部的this指向了window ,但我们往往是想让它指向该div节点 , 见如下代码 :

此时有一种简单的解决方案 , 可以用一个变量保存div节点的引用.

在ES5的strict模式下 , 这种情况下的 this 已经被规定为不会指向全局对象 , 而是undefined:

(3). 作为构造器调用

JavaScript中没有类 , 但是可以从构造器中创建对象 , 同时也提供了 new 运算符 , 使得构造器看起来更像一个类。

除了宿主提供的一些内置函数 , 大部分JavaScript函数都可以当作构造器使用 。构造器的外表跟普通函数一模一样，它们的区别在于被调用的方式。当用 new 运算符调用函数时 , 该函数总会返回一个对象 , 通常情况下 , 构造器里的 this 就指向返回的这个对象 , 见如下代码 :

但用 new 调用构造器时,还要注意一个问题 , 如果构造器显式地返回了一个object类型的对象 , 那么此次运算结果最终会返回这个对象 , 而不是我们之前期待的 this ;

如果构造器不显示地返回任何数据 , 或都是返回一个非对象类型的数据 , 就不会造成上述问题 :

(4). Function.prototype.call 或 Function.prototype.apply 调用

跟普通的函数调用 , 用 Function.prototype.call 或 Function.prototype.apply 可以动态地改变传入函数的this;

call 和 apply 方法能很好地体现JavaScript 的函数式语方特性 , 在JavaScript 中 , 几乎每一次编写函数式语言的风格 , 都离不开call 和 apply。

3. 消失的 this

这是一个经常遇到的问题 , 请看下面的代码 :

当调用 obj.getName 时 , getName 方法是作为 obj 对象的属性被调用的 , 此时的 this 指向obj对象 , 所以obj.getName()输入 'Augus'当用另外一个变量 getInfo 来引用obj.getName 时 , 并调用getInfo 时 , 此时是普通函数的调用方式 , this 是指向全局window的 , 所以程序的执行结果是undefined。

再来看一个例子 ，document.getElementById 这个方法 , 你们肯定有实现过类似下面的方法封装 :

也许有人思考过为什么不能用下面这种更简单的方式 :

为了探究是否可行 , 我们让下面这段代码在浏览器中运行一次 :

在现代浏览器中执行过后发现 , 代码会抛出一个异常 。

这是因为许多引擎的 document.getElementById方法的内部实中需要用到this。

这个this 本来被期望指向document , 当getElementById 方法作为document 对象的属性被调用时 , 方法内部的 this 确实是指向 document 的 。

但当用 getId 来引用 document.getElementId 之后 , 再调用getId , 此时就成了普通函数调用 , 函数内部的 this 指向了window , 而不是原来的 document 。

我们可以尝试用apply把document 当作this 传入getId函数 , 修改 this 的指向。