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出来的对象