大前端学习笔记整理【五】关于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的指向应该就有一个较为清楚的认识。

 

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