标签：c style class blog code java
在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的就是这么多了，其他的情况可根据类似的案例进行分析。
JavaScript大杂烩6 - 理解JavaScript中的this,布布扣,bubuko.com
JavaScript大杂烩6 - 理解JavaScript中的this
标签：c style class blog code java
原文地址：http://www.cnblogs.com/dxy1982/p/2697090.html
