this的取值

this的取值

在函数中this到底取何值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不了

1：全局 & 调用普通函数

console.log(this === window); // true
// 在全局环境下，this永远是window

var x = 10;

function foo() {
    console.log(this);
    console.log(this.x);
}

foo();
// Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}
// 10

var base = {
    val: 10,
    fn: function() {

        console.log('fn', this);
        console.log('fn', this.val);

        function foo() {
            console.log('foo', this);
            console.log('foo', this.val);
        }
        foo();
    }
}

base.fn();
// fn Object {val: 10, fn: function}
// fn 10
// foo Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}
// foo undefined
// 函数foo虽然是在base.fn内部定义的，但是它仍然是一个普通的函数，this仍然指向window。

2：函数作为对象的一个属性

var base = {
    val: 20,
    foo: function() {
        console.log(this); 
        console.log(this.val);
    }
}

base.foo();
// Object {val: 20, foo: function}
// 20
// 结论 ：如果函数作为对象的一个属性时，并且作为对象的一个属性被调用时，函数中的this指向该对象

var f1 = base.foo;
f1();
// Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}
// undefined
// 结论 ：如果fn函数被赋值到了另一个变量中，并没有作为obj的一个属性被调用，那么this的值就是window，this.x为 window.x

3：函数用call或者apply调用

var base = {
    x: 10
}

function foo() {
    console.log(this);
    console.log(this.x);
}

foo.call(base);
// Object {x: 10}
// 10
// 结论 : 当一个函数被call和apply调用时，this的值就取传入的对象的值。

4：构造函数

function Foo(name, year) {
    this.name = name;
    this.year = year;
    console.log(this);
}

Foo('c.c.', '1992'); // Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}

var fl = new Foo('c.c.', '1992'); // Foo {name: "c.c.", year: "1992"}

// 总结：如果函数作为构造函数用，那么其中的this就代表它即将new出来的对象