JavaScript 中 关于 this 的学习笔记

今天上午主要学习了js中的 this ,因为之前学习面向对象时，this这个东西出现的还是很频繁的，理解的很不透彻，感觉老被JAVA的思想带进坑里，所以对它特别关注。

首先贴一个大神的一篇博客，我是通过这篇博客对this的认识和了解有了很大的提升，下面是传送门

foocoder----详解JavaScript中的this

首先，解释一下this到底是个什么东西。我找到的解释是这样的（读起来有点绕）

this是包含它的函数作为方法被调用时所属的对象。

this是包含它的函数作为方法被调用时所属的对象。

this是包含它的函数作为方法被调用时所属的对象。

重要的事情说三篇！下面列举一下this出现的几种情况。

第一种情况，全局代码中的this

alert(this)//window

第二种情况，普通的函数中调用的this（我说的普通，就是表示大家经常会写出来的那种。。。就是在全局作用域中调用的函数，例子如下）。

function fooCoder(x) {
	this.x = x;
}
fooCoder(2);
alert(x);// 全局变量x值为2

这里的this包含在 fooCoder 函数中，而函数是被直接调用的（也就是在window中调用的），所以这个this指向window

第三种情况，构造函数中的this（之前见过许多次）

function Person(name){  
     this.name = name;  
};  

var tom = new Person("tom");

这里的this 指向的是通过构造函数 new 出来的那个tom对象。因为tom调用了 this所在的Person函数。

第四种情况，对象的方法中调用的this

Person.prototype.say = function (){  
     console.log(this.name +" say hello~");  
}  

这里的this 指向的是调用这个方法的对象。例如tom.say()，这时this指向的是tom。原理同上

第五种情况，this出现在内部函数中调用  类似这样

        this.name = "jerry";
        Person.prototype.sayHello = function(){

            sayfun = function(){
                alert(this.name+" hello")
            }

            sayfun();

            //alert(this.name);
        }

        var tom = new Person("tom");
        tom.sayHello();//jerry hello

最外层的this就是第一种情况所说的全局环境直接调用this，这时候this就是window。

调用创建出来的对象 tom上的sayHello()函数，函数中包含一个内部函数sayfun()，这个内部函数中的this本来应该代表的是tom，但是当你运行程序后就发现alert 出来的 是 "jerry hello",就说明 这里的this 指向了window。

为什么会这样呢？  首先找找看到底是谁调用了 sayfun()函数。这里可能会误解为是tom这个对象调用了sayfun函数，其实真相是 tom调用了sayHello函数，而sayHello函数内部执行了sayfun函数，并不是tom调用的。那是谁调用的？这种直接调用的一般都是window干的。所以这里的this还是指向window的。

如果想要实现想要的效果，让this指向tom,可以进行这样分析一下：

tom调用了sayHello函数，那么sayHello函数中的this就还是指向tom的。而sayfun作为sayhello函数的内部函数是可以访问到sayhello函数的作用域的，所以我们在sayhello函数中保存一下this（比如把他保存为that）就可以让sayfun访问到这个保存的值。代码实现如下：

        function Person(name){
            this.name = name;
        }

        this.name = "jerry";
        Person.prototype.sayHello = function(){
            var that = this;
            sayfun = function(){
                alert(that.name+" hello")
            }

            sayfun();

            //alert(this.name);
        }

        var tom = new Person("tom");
        tom.sayHello();//tom hello

第六种情况，在apply(),call()这两个函数中的this。一般的实现是这样的

fun.call( this [，arg1，arg2，… ] );  // 参数列表，arg1，arg2，...
fun.apply(this [，argArray] );     // 参数数组，argArray

两者都是将某个函数绑定到某个具体对象上使用。这种情况之后下一篇专门分析。

除了以上几种情况外，还有关于事件处理函数中的this，也比较特殊，但是如果掌握里上面理解this的方法，也会变得很轻松。这部分内容我参考了这篇博客

事件处理函数的this ---yxc_gdut

浏览器有三种添加事件监听的方式。

第一种：直接在标签内写 onclick=“fn” 

第二种：在js中 onclick=fn

第三种：在js中 用el.attachEvent或者el.addEventListener()

三种方式添加的事件处理函数运行的scope是不同的，不同浏览器也不尽相同。

IE

• js: el.onclick = fn ,fn的this->el
• 在div标签中 onclick = "fn()" ,fn的this->window
• js: el.attachEvent('onclick',fn); ,fn的this->window

Firefox、Chrome、Opera

• js: el.onclick = fn ,fn的this->el
• 在标签中 onclick = "fn()" ,fn的this->window (相当于执行eval())
• js: el.addEventListener('onclick',fn); ,fn的this->el

综上总结一下：

如果在函数中使用了this，只有在该函数直接被某对象调用时（代码中肉眼可见的调用,例如a = fn()或者 a.fn() 这种），该this才指向该对象。

this在js中的出场频率还是挺高的，掌握了能识别this到底代表谁，对编程还是很有用的~~加油！！

2015年12月31日 晚6点19分

新年快乐