javascript中this的四种用法

2016-11-02  本文已影响113人  菲龍探雲

this是javaScript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。

this

在函数执行时,this总是指向调用该函数的对象。要判断this的指向,其实就是判断this所在的函数属于谁。

在《javaScript语言精粹》这本书中,把this出现的场景分为四类,简单的说就是:
有对象就指向调用对象
没有调用对象就指向全局对象
用new构造就指向新对象
通过apply或call或bind来改变this的所指

1)函数有所属对象时:指向所属对象

函数有所属对象时,通常通过 .表达式来调用,这时this自然指向所属对象:

var myObject = {value: 100};
myObject.getValue = function () {
    console.log(this.value)//输出100
    //输出myObject对象本身
    console.log(this)
    return this.value
};
console.log(myObject.getValue());//100

getValue()属于对象myObject,并由myObject进行* . *调用,因此this指向对象myObject

2)函数没有所属对象:指向全局对象

var myObject = {value: 100};
myObject.getValue = function () {
    var foo = function () {
        console.log(this.value)//underfined 
        console.log(this);//window
    };
    foo();
    return this.value;
};
console.log(myObject.getValue()); //100

在上述代码块中国,foo函数虽然定义在getValue的函数体内,但实际上它既不属于getValue也不属于myObject。foo并没有被绑定在任何对象上,所以当调用时,它的this指针指向了全局对象global。

3)构造器中的this:指向新对象

js中,我们通过new关键字来调用构造函数,此时this会绑定在该新对象上。

 var SomeClass = function () {
    this.value = 100;
};
var myCreate = new SomeClass();
console.log(myCreate.value);//100

4)apply和call调用以及bind绑定:指向绑定的对象

apply()方法接收两个参数第一个是函数运行的作用域,另外一个是一个参数数组(arguments)。

call()方法第一个参数的意义与apply()方法相同,只是其他的参数需要一个个列举出来。

简单来说,call的方法更加接近我们平时调用函数,而apply需要我们传递Array形式的数组给他。它们是可以互相转换的。

var myObject = {value: 100};
var foo = function () {
    console.log(this);
};
foo(); // 全局变量 window
foo.apply(myObject);// 对象 myObject
foo.call(myObject);  //对象 myObject
var newFoo = foo.bind(myObject);
newFoo(); //对象 myObject
上一篇 下一篇

猜你喜欢

热点阅读