标签：
this的简单使用
this是JS中的一个关键字，它的本质就是一个对象，但是它的机制确是很神奇的，它并不是一个特定的对象，this是动态的，所以我们首先要确定在特定的环境中this指代的是什么。
谁是this
在函数的外面（全局作用域）this指向的就是window对象，这个没什么可说的。
this.a = 1; console.log(window.a) //打印1
在函数里面的this就比较多变了，但是我们可以以不变应万变,函数的this永远指向函数的调用者。
我们平时的开发中我们经常使用的函数调用方式有两种,第一种就是函数的直接调用：
function fn(){ console.log("demo"); } fn();
第二种就是作用对象的属性来调用：
var obj = {}; obj.fn = function(){ console.log("demo"); } obj.fn();
在本质上来说第一种函数调用是和第二种一样的，我们可以同样使用window.fn()来调用fn函数，只不过我们平时不这样写。
在第一种函数的调用的方式中，函数的this指向window，所以this就是window对象
在第二种函数调用的方式中，函数的this指向“.”操作符左边的对象。
我们在判断函数中this的指向的时候我们只需要看函数在调用时是用那种方式来调用的即可，反正无论怎么样函数永远指向它的调用者。
var name = "window"; function des(){ console.log("hello i am "+this.name); } des(); // hello i am window
var obj = {}; obj.name = "object"; obj.des = function(){ console.log("hello i am "+this.name); }
obj.des(); //输出hello i am object
根据我们前边的结论上面这两个函数相信都很简单的就判断出来了，下来我们来看一个有点绕的。
var obj = {}; var name = "window"; obj.name = "object"; obj.des = function(){ console.log("hello i am "+this.name); } obj.des();//hello i am object var fn = obj.des; fn();//hello i am window
我们把obj.des这个函数保存在一个叫做fn的变量里面，fn函数的this指向了window。这就很符合我们的结论函数中的this永远指向函数的调用者。
this使用时的注意事项
我们已经明白了this的指向，但是在我们书写代码的时候，我们必须要注意this的指向有没有更改。
我们假设一个这样的情景：我们首先或者一个DOM元素，点击这个元素在1秒后输出该DOM元素的内容，我们可能这样写代码：
var demo = document.getElementById("demo"); demo.onclick = function(){ setTimeout(function(){ console.log(this.innerHTML); },1000) }
1秒的等待我们换来的是undefined,这是因为定时器函数的在执行的时候函数是直接调用的this指向window而window对象没有innerHTML这个属性，为了解决这个问题我们可以实现声明去保存事件函数中的this，然后在定时器函数中使用这个保存this的便令就解决了我们的问题(this的动态变化的，好，我不用了，你爱怎么变怎么变！)
var demo = document.getElementById("demo"); demo.onclick = function(){ var _this = this; setTimeout(function(){ console.log(_this .innerHTML); },1000) }
我们同样还有另外一种方式来解决这个问题就是显式的去改变函数运行时this的指向，bind函数可以达到我们的目的 call,apply,bind使用
var demo = document.getElementById("demo"); demo.onclick = function(){ setTimeout(function(){ console.log(this.innerHTML); }.bind(this),1000) }
编码的时候我们要注意函数调用时是否已经改变了this的指向以避免不必要的错误。
标签：
原文地址：http://www.cnblogs.com/shinhwazt/p/5894283.html
