详细解读-this-关键字在全局、函数、对象、jQuery中的基础用法！

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、前言

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

2、this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象。

二、进入正题

1、全局代码中的——this

1、浏览器宿主的全局环境中，this指的是window对象。在全局代码中，this始终是全局对象本身，这样就有可能间接的引用到它了。

示例:

2、浏览器中在全局环境下，使用var声明变量将会把值赋给this或window。

示例：

3、任何情况下，即使创建变量时没有使用var，也是在操作全局this。而在函数里面创建变量时，结果为undefined。

示例：

二、函数代码中的——this

1、先来看一个最简单的例子

首先，我们定义了一个全局字符串对象name和函数对象sayHi。运行都会打印出，“你好，我的名字叫Jack”。全局变量name将值赋给this。

2、我们把上面的代码改一改：

运行结果为Jack中的this为函数调用之前的全局变量name=Jack将值赋给this，此时textThis函数未将Alice赋值给this；运行结果为Alice为函数调用之后testThis函数将Alice值赋值给了全局变量name，此时name = "Alice" this.name = "Alice"。

3、函数也是普通的对象，可以将其当作一个普通变量使用。我们再把上面的代码改一改：

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

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

参考上面解释，我们将上面示例改造成面向对象式的代码：

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

4、当用调用函数时使用了new关键字，此刻this指代一个新的上下文，不再指向全局this。通常我将这个新的上下文称作实例。

三、对象代码中的——this

1、可以在对象的任何方法中使用this来访问该对象的属性。这与用new得到的实例是不一样的。

var obj = { name: "Jack", func: function () { console.log(this.name); // "Jack" }};obj.func();

2、可以将函数绑定到对象，就好像这个对象是一个实例一样。

var obj = { name: "Jack"};function logName() { console.log(this.name); //logs "Jack"}logName.apply(obj);

3、也可以不通过this，直接访问对象的属性。

var obj = { name: "Jack", deeper: { logName: function () { console.log(obj.name);// "Jack" } }};obj.deeper.logName();

四、jQuery代码中的——this

1、jQuery库中大多地方的this也是指代的DOM元素。页面上的事件回调和一些便利的静态方法比如$.each 都是这样的。

<div class="foo bar1"></div><div class="foo bar2"></div><script src="../05-JQuery/JS/jquery-1.10.2.min.js"></script><script type="text/javascript">$(function(){ $(".foo").each(function () { console.log(this); // <div class="foo bar1"></div> <div class="foo bar2"></div> }); $(".foo").on("click", function () { console.log(this); // <div class="foo bar1"> <div class="foo bar2"></div> }); })</script>