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

时间：2022-03-12 14:48:07

　　在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的就是这么多了，其他的情况可根据类似的案例进行分析。

标签：

相关文章