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

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

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

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

调用方式一:直接调用

设有如下函数:

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

我们现在直接调用它:

setName('milter');

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

调用方式二:new 调用

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

调用方式三:引用调用

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

person.setName('milter');

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

调用方式四:call和apply调用

先说call调用,接着上面的例子,如下:

setName.call(person,'milter');

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

调用方式五:bind调用

所谓bind调用,请看示例:

 binded('milter');

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

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

推荐阅读:
写给Android/Java开发者的JavaScript精解(1)
写给Android/Java开发者的JavaScript精解(2)
写给Android/Java开发者的JavaScript精解(3)
教你步步为营掌握JavaScript闭包

你可能感兴趣的:(不得不学的js技巧之关键字this)