大前端学习笔记整理【五】关于JavaScript中的关键字——this

写在前面

工作有那么一段时间了，但是在工作中，发现自己的理论知识还是有所欠缺。特别是在javascript上，很多东西其实自己属于知道要用这个，但是不知道为什么要这么用...这种情况很是尴尬了，所以写博客的很重要一个目的就是锻炼我自己的总结能力，把学到的东西总结出来，感觉这样能让我更快的去理解所学到的东西。

◇ 关于javascript理论

刚开始做前端的时候还是以完成功能为主，所以忽略掉了理论知识的重要性，但是随着工作的慢慢深入，发现很多原理还是要建立在对理论知识的理解与掌握上。

作为一个合格的前端工程师，这个确实有点不能忍...所以还是要沉下心来，一点点的去提升自己。话说回来，其实javascript的理论在我看来并没有那么的枯燥难懂，但是需要你去实验、去调试。兴趣永远是学习最好的动力，我想保持这份兴趣，持续的去研究javascript的理论，去探寻其中的秘密和让人惊叹的地方。

关于this

闲话扯了那么多，希望各位看官不要在意...只是本人一点点心声罢了...言归正传，关于this，其实在我看来确实算是javascript中很基础、很重要、也是很难理解的一个点；

this的定义，借助下阮一峰大大的总结，感觉比较好理解些：

this是Javascript语言的一个关键字。

它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如，

function test(){
　　this.x = 1;
}

随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

this的指向

其实this之所以难以理解，主要就是在不同情况下，this的指向都是不一样的。以下几种情况，基本归纳了常见的this的指向：

1.在全局代码或者普通的函数调用中，this指向全局对象，在浏览器里面既为window对象。

console.log(this);//输出window 

function foo(){ 
    console.log(this); 
} 
foo();//输出window

在浏览器环境里运行上述代码，两处输出结果均为window对象。

 

2.通过call或apply方法调用函数，this指向方法调用的第一个参数。

var obj = {name:'test'}; 
function foo(){ 
    console.log(this); 
} 
foo.call(obj);//输出obj 
foo.apply(obj);//输出obj

call和apply的区别在于call的调用需要两个参数，用逗号做分割，而apply只需要一个参数，这个参数必须是数组；

 

插入的小知识点：

利用apply的特点实现不创建新的对象把两个数组拼装成一个数组：

var arr1 = [1, 2 , 3], 
    arr2 = [4, 5, 6]; 
Array.prototype.push.apply(arr1, arr2); 
console.log(arr1);//输出[1, 2, 3, 4, 5, 6]

call与apply的定义：

call方法: 

语法：call(thisObj，Object)

定义：调用一个对象的一个方法，以另一个对象替换当前对象。

说明：

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 

如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 

 

apply方法： 

语法：apply(thisObj，[argArray])

定义：应用某一对象的一个方法，用另一个对象替换当前对象。 

说明： 

如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。 

如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数

 

3.调用对象的方法，this指向该对象。

var obj = {name:'test'};
 function foo(){ 
    console.log(this); 
} 
obj.foo = foo; obj.foo();//输出obj

这个也就是所谓的谁调用，指向谁

 

4.构造方法中的this，指向新构造的对象。

function C(){ 
    this.name = 'test'; 
    this.age = 18; 
    console.log(this); 
} 
var c = new C();//输出 c 
console.log(c);//输出 c

执行以上代码后，控制台输出均为c所指向的对象。当new操作符用于函数时，会创建一个新对象，并用this指向它

 

特殊情况

上述四种情况基本概述了this的常见指向，但是也有些特殊的情况下，this的指向并不在上诉的范围中：

a.bind方法

这个方法会创建一个函数实例，其this值会被绑定到传给bind()函数的值。也就是说会返回一个新函数，并且使函数内部的this指向为传入的第一个参数：

window.color = 'red';
var o = {color : 'blue'};
function sayColor(){
    alert(this.color)
}
var objectSayColor = sayColor.bind(o);
objectSayColor();//blue

b.eval

对于eval函数，其执行时候似乎没有指定当前对象，但实际上其this并非指向window，因为该函数执行时的作用域是当前作用域，即等同于在该行将里面的代码填进去。下面的例子说明了这个问题：

var name = "window";

var Bob = {
    name: "Bob",
    showName: function(){
        eval("alert(this.name)");
    }
};

Bob.showName();

总结

• 默认的，this指向全局对象
• 当一个函数被作为一个父对象的属性调用时，函数中的this指向父对象
• 当一个函数被new运算符调用时，函数中的this指向新创建的对象
• 当使用call或apply调用函数时，函数代码中的this被设置为call或apply中的第一个参数。如果第一个参数是null或不是个对象，this指向全局对象。

其实除去上面的特殊情况，我们只要记住这四种情况，那么对于this的指向应该就有一个较为清楚的认识。

博文中如有叙述不清或者错误，欢迎各位批评指正！完结撒花~