javascript中this的四种用法
this
在函数执行时,this总是指向调用该函数的对象。要判断this的指向,其实就是判断this所在的函数属于谁。
在《javaScript语言精粹》这本书中,把this出现的场景分为四类,简单的说就是:
有对象就指向调用对象
没调用对象就指向全局对象
用new构造就指向新对象
通过apply或call或bind来改变this的所指。
1)函数有所属对象时:指向所属对象
函数有所属对象时,通常通过.表达式调用,这时this自然指向所属对象。比如下面的例子:
varmyObject={value:100}; myObject.getValue=function(){ console.log(this.value);//输出100 //输出{value:100,getValue:[Function]}, //其实就是myObject对象本身 console.log(this); returnthis.value; }; console.log(myObject.getValue());//=>100
getValue()属于对象myObject,并由myOjbect进行.调用,因此this指向对象myObject。
2)函数没有所属对象:指向全局对象
varmyObject={value:100}; myObject.getValue=function(){ varfoo=function(){ console.log(this.value)//=>undefined console.log(this);//输出全局对象global }; foo(); returnthis.value; }; console.log(myObject.getValue());//=>100
在上述代码块中,foo函数虽然定义在getValue的函数体内,但实际上它既不属于getValue也不属于myObject。foo并没有被绑定在任何对象上,所以当调用时,它的this指针指向了全局对象global。
据说这是个设计错误。
3)构造器中的this:指向新对象
js中,我们通过new关键词来调用构造函数,此时this会绑定在该新对象上。
varSomeClass=function(){ this.value=100; } varmyCreate=newSomeClass(); console.log(myCreate.value);//输出100
顺便说一句,在js中,构造函数、普通函数、对象方法、闭包,这四者没有明确界线。界线都在人的心中。
4)apply和call调用以及bind绑定:指向绑定的对象
apply()方法接受两个参数第一个是函数运行的作用域,另外一个是一个参数数组(arguments)。
call()方法第一个参数的意义与apply()方法相同,只是其他的参数需要一个个列举出来。
简单来说,call的方式更接近我们平时调用函数,而apply需要我们传递Array形式的数组给它。它们是可以互相转换的。
varmyObject={value:100}; varfoo=function(){ console.log(this); }; foo();//全局变量global foo.apply(myObject);//{value:100} foo.call(myObject);//{value:100} varnewFoo=foo.bind(myObject); newFoo();//{value:100}
以所述就是本文的全部内容了,希望大家能够喜欢。