不得不学的js技巧之关键字this

2016-09-22 本文已影响553人工程师milter

JavaScript的初学者，很容易迷惑于函数中的this关键字，本文简明扼要地说明了this的含义，包你读后不再迷惑。

一句话解决疑问：函数中的this代表一个对象，具体是哪个对象取决于函数的调用方式。

好的，现在问题变成了这样：函数有几种调用方式？每种调用方式中this代表哪个对象？

调用方式一：直接调用

设有如下函数：

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

我们现在直接调用它：

setName('milter');

这时，函数setName中的this代表的是一个全局对象，这个对象是代码的宿主环境提供的，比如在浏览器中是window对象，在node.js中是global对象，如果宿主环境中没有提供这个全局对象，那么直接调用函数setName将会报错！

还以上面的setName函数为例，new 调用是指这样：
new setName('milter');
本人之前的文章讲过，对函数进行new 调用时，解释器会创建一个新的对象，this就指向这个新的对象，函数最后也会返回这个新的对象。

假设有这样一个对象：
var person = { }
我们将函数setName赋值给person的一个属性，如下：
person.setName = setName ;
此时，通过person.setName调用函数就是引用调用，如下：

person.setName('milter');

引用调用函数时，this指向引用所属的对象，在上面的例子中，就是setName属性所属的对象person。

先说call调用，接着上面的例子，如下：

setName.call(person,'milter');

call调用中，call的第一个参数就是this代表的对象，后面的参数代表传给函数的参数，上面的例子中，this指向person对象，setName函数的参数是字符串'milter'。
apply调用与call调用类似，第一个参数代表this对象，不同的是它用数组包含传给函数的参数。

所谓bind调用，请看示例：

 binded('milter');

在上面的binded调用中，this指向绑定的person对象。

好了，基本就这五种函数调用方式，如果有遗漏的，欢迎补充。