JavaScript中的this详解

HTML5学堂：this属于JS的底层知识，了解this之后，能够实现一些基本的功能，但是感觉最重要的是，this是面向对象必不可少的组成部分，如果希望能够逐渐的掌握面向对象，this必然是不可少的。

查看this指向的一句话法则：

永远指向其所在函数的所有者如果没有所有者时，指向window。

理解this的要点：关键在于将函数与函数名分开看待。同一个函数，在不同的执行方法下，会有不同的效果。

如何来进行理解呢，来看几个实例

1）全局函数中的this指向

1. function test(){
2.     alert(this);//test这个函数没有所有者，因此此时this指向的是window
3. }

2）对象方法中的this指向

1. h5course.test = function(){
2.     alert(this==h5course);//输出true，h5course.test表示的是test这个函数的所有者是对象h5course，因此this应当是指向h5course的
3. }

3）绑定函数时的this

如下代码，test1和test2中this并不相同

1. var test2 = h5course.test1;//test2这个函数并没有所有者，在此，test2虽然调用了test1这个函数，但是this仍然指向window，而不是指向test1的拥有者：对象h5course
2. test2();
3. h5course.test1 = function(){
4.     alert(this===h5course);
5. }

这便是上面所说的，要将函数与函数名分开看待

4）绑定函数时的this

此时如果我们对3）中的代码进行一些修改：

1. function test () {
2.     alert(this === h5course);
3. }
4. test();//this指向window
5. var h5course = {};
6. h5course.test2 = test;
7. h5course.test2();//此时test2的所有者为h5course，而test没有所有者，this在此时指向的是h5course
8. alert(h5course.test2);

欢迎沟通交流~HTML5学堂

5）鼠标单击事件等进行函数的绑定时，this的指向

1. document.onclick=function(){
2.     alert(this===document);//输出为true，onclick事件的拥有者是document。因此，此处this指向document。我们可以将document.onclick理解为一个对象方法，如同例4中的o.test2一样。
3. }

6）setTimeout等传参形式的this指向

不要去看传的参数中函数的所有者，看执行函数的所有var obj = {};

1. obj.x = 1;
2. obj.y = 2;
3. window.x = 100;
4. window.y = 200;
5. obj.add = function () {
6.     alert(this.x + this.y);
7. }
8. setTimeout(obj.add,1000);//this指向window,输出为300
9. setTimeout(function(){//this指向obj，输出为3
10.     obj.add();
11. },1000);

7）改变this的方法：call,apply

call和apply（两者用于改变函数的作用域）

1. var oo = {};
2. oo.test3 = function(){
3.     alert(this == oo);//返回false
4. }
5. var h5course = {};
6. oo.test3.call(h5course);//this指向的是（）内的第一个参数，此处为h5course
7.  
8.  
9.  
10. window.x = 100;
11. var oo = {};
12. oo.test3 = function(y,z,k){//函数的参数与apply、call中第二个以及之后的参数相对应
13.     alert(this.x+y+z+k);
14. }
15. var arr=[2,3,4]
16. oo.test3.call(window,2,3,4);//this指向window，输出为109
17. oo.test3.apply(window,[2,3,4]);//同上，使用apply进行元素罗列时需要使用中括号[]将所有参数包裹起来
18. oo.test3.apply(window,arr);//同上，使用apply对于一个数组的访问很简单，使用数组名称即可
19. oo.test3.call(window,arr[0],arr[1],arr[2]);//同上

欢迎沟通交流~HTML5学堂