首页 > 代码库 > JavaScript大杂烩6 - 理解JavaScript中的this

JavaScript大杂烩6 - 理解JavaScript中的this

  在JavaScript开发中,this是很常用的一个关键字,但同时也是一个很容易引入bug的一个关键字,在这里我们就专门总结一下页面中可能出现的this关键字(包括几种在其他页面文件中出现的this)。
  JavaScript中的this关键字通常只使用在函数中,它指向当前函数的调用者,这是this关键字的本质,所有的使用方式都是围绕这个展开的,让我们来看一下在各种性质的函数中this的用法。
1. 在对象的函数中使用this

var person = {
  name: ‘Frank‘,
  say: function() {
    alert(this.name);
  }
};
person.say();

  这是常用的情况,this指向当前函数的调用者,就是对象本身。

2. 在构造函数中使用的this

function Person(name) {
  this.name = name;
  this.say = function() {
    alert(this.name);
  };
}
var p1 = new Person(‘Frank‘);
p1.say();

  这也是常用情况,在前面分析new的时候,我们就知道this指向新构造的对象,因为这个新对象是函数的调用者。
  这里还有一个情况,那就是在上面的代码下面加上下面的代码:

var foo = p1.say;
foo();

  你能根据this总是指向函数调用者的原理得到输出的结果吗?注意此时say方法不再是用p1去调用了,而是直接在全局调用。
  由于函数是JavaScript的基本数据类型之一,一旦函数在不同的变量之间传递了,那么函数中使用的this就可能指向不同的对象了。所以很多的时候,函数的赋值会导致一些隐藏很深的bug,这一点值得大家注意。

3. 使用call/apply方式调用的函数中的this

var obj = {
    x: 20;
    f: function(){ alert(this.x); }
};

var obj2 = {
    x: 30;
};

obj1.f.call(obj2); //利用call指派f的this指向obj2,故输出30

  这种情况是直接修改函数的调用者,于是this指向传入的第一个参数。

4. 在HTML元素的事件中inline方式使用的this

<div id="testDiv" onclick="alert(this)">Click Me!</div>

结果是输出:[object HTMLDivElement]
  这种情况下,由于是HTML元素触发的事件,所以this当然指向HTML元素对应的JavaScript对象。

5. 在HTML元素的回调函数中出现的this

<script type="text/javascript">
    function demo() {
      alert(this);
    }
</script>
<div id="testDiv" onclick="demo()">Click Me!</div>

结果是输出:[object Window]
  这种情况下,由于回调函数是在JavaScript中执行的,所以this指向全局对象window。

6. 在DOM中指定的回调函数中出现的this

<div id="testDiv">Click Me!</div>
<script language="javascript">
  var div = document.getElementById(testDiv);
  div.onclick = function() {
    alert(this);
  };
</script>

结果是输出:[object HTMLDivElement]
  这种情况下,由于回调函数是赋值给div对象去回调的,所以this指向div对象。当然了在Jquery的回调函数中使用this,也是指向Jquery生成的Jquery元素对象。例如:

$("#testDiv").click(function() {
  alert(this);
}); 

  特别注意这种情况与上一个例子的不同。当然在回调函数中,我们大部分情况都需要获得触发事件的div对象,我们可以结合第4种情况,把this作为参数传给回调函数:

<script type="text/javascript">
    function demo(target) {
      alert(target);
    }
</script>
<div id="testDiv" onclick="demo(this)">Click Me!</div>

结果是输出:[object HTMLDivElement]

7. CSS的expression表达式中使用的this

<div style="width: expression(this.parentElement.width); height: expression(this.parentElement.height);">Click Me!</div>

  由于这是在div对象本身去调用这些表达式去设置style,这里的this也是指代div元素对象本身。

8. 闭包函数中的this

<div id="testDiv">Click Me!</div>
<script language="javascript">
  var div = document.getElementById(testDiv);
  div.onclick = function() {
    alert(this);
    (function() {
      alert(this);
    })();
  };
</script>

结果是输出:[object HTMLDivElement]与[object Window]。
  很显然,大多数情况下,我们希望第二个this仍然指向div对象,我们可以如下实现:

<div id="testDiv">Click Me!</div>
<script language="javascript">
  var div = document.getElementById(testDiv);
  div.onclick = function() {
    alert(this);
    var that = this;
    (function() {
      alert(that);
    })();
  };
</script>

  使用普通变量保护某一个时刻this指向的对象是解决闭包里面类似问题的常见方式。

9. 直接在全局作用域中使用的this
  这是一种不常见的情况,但是确实存在,这个时候this指向全局对象window (在node.js中,则为GLOBAL对象)。例如:

var x = 10;
alert(x);
alert(this.x);
alert(window.x);
alert(this);  // 输出[object Window]

10. 直接在不当作构造函数的函数中使用的this
  这种情况也不常见,由于是在全局调用这个方法,this此时指向全局对象window,但是在严格模式中,则是undefined。。例如:

function foo() {
  alert(this);
}

foo(); // 输出[object Window]

  常见的使用this的就是这么多了,其他的情况可根据类似的案例进行分析。