JavaScript关于this的4种使用情况

在函数中使用this对象,在不同的情况下会引用不同的对象;而这一切都是由于调用函数的方式不同造成的。归根结底,包含this的函数调用方式不外乎以下4种情况:

1. 作为某个对象的方法调用

当函数作为某个对象的方法被调用时,其内部的this将指向对象本身

function test() {
    alert(this.name);
}

var object = {
    name : "Jess",

    getName : test
};

object.getName();      //"Jess"

2. 作为普通函数调用

当函数作为普通的函数调用时,其内部的this指向全局作用域(window)

function test() {
    var name = "Jess";
    alert(this.name);
}

var name = "Alex";
test();            //"Alex"

再来看一些更加特殊的情况:

case 1 :

function test1() {
    var name = "Jess";
    test2();
}

function test2() {
    var name = "Alex";
    alert(this.name);
}

var name = "Jade";
test1();        //"Jade"

case 2 :

function test() {
    alert(this.name);
}

var object = {
    name : "Casey",

    getName : function() {
        test();
    }
};

var name = "Max";

object.getName();        //"Max"

case 3 :

var object = {
    name : "Casey",

    getName : function() {
        alert(this.name);
    }
};


var name = "Max"; 

object.getName();          //"Casey"    

var test = object.getName;
test();                    //"Max"

以上都是包含this的函数作为普通函数进行调用的情况,可见其内部的this都指向了全局作用域(window)。不过需要注意最后一种情况(case 3),其中在object对象内部定义了一个匿名函数对象,并使用object.getName对其进行引用;当执行object.getName()语句时,是将该函数按对象的方法进行调用,此时内部的this指向object对象;然而随后的var test = object.getName语句使得该函数对象同时也被test变量引用;当执行test()时,实际上是将该函数按普通函数进行调用。

3. 作为构造函数调用

当函数作为构造函数被调用时,其内部的this指向由构造函数创建出的新对象

function Person() {
    this.name = "Jess";
}

var name = "Alex";
var person1 = new Person();
alert(person1.name);          //"Jess"
alert(name);                  //"Alex"

4. 在apply()/call()下调用

当函数通过apply()/call()函数进行调用时,其内部this的指向apply()/call()函数显式指定

function test() {
    this.name = "Jess";
}

var object = {};
test.call(object);
alert(name);            //""
alert(object.name);     //"Jess"

你可能感兴趣的:(JavaScript关于this的4种使用情况)