this的用法
在函数中this到底取何值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了.
因为this的取值是执行上下文环境的一部分,每次调用函数,都会产生一个新的执行上下环境.举例说明
1. 构造函数之this
function Foo() {
this.name = "zhangsan";
this.age = 20;
console.log(this);
}
var f1 = new Foo();
说明:
1. 如果函数作为构造函数使用,那么其中的this就代表它new出来的对象
2. 如果函数作为普通函数调用,这种情况this是指window.
function Foo() {
this.name = "zhangsan";
this.age = 20;
console.log(this);
}
Foo();
console.log(window.name);
console.log(window.age);
2. 函数作为对象的一个属性
如果函数作为对象的一个属性时,并且作为对象的一个属性被调用时,函数中的this指向该对
var obj = {
x:10,
fn:function() {
console.log(this.x);
}
};
obj.fn();
var obj = {
x:10,
fn:function() {
console.log(this.x);
}
};
var obj1 = {
x:20
};
obj1.fn = obj.fn;
obj1.fn();
3. 函数用call或apply调用
当一个函数被call和apply调用时,this的值就去传入的对象的值
var test = "Tony";
function doSomething() {
console.log(this.test);
}
var obj = {
test:"Tom"
};
doSomething();
doSomething.call(obj);//doSomething中的this指向obj
4. 全局&普通函数的调用
在全局环境下,this指向的是window对象
console.log(this === window);//true
普通函数调用时,其中的this也是指向的window对象
var x = 10;
var fn = function() {
console.log(this);//window
console.log(this.x);//10
};
fn();
注意以下情况:虽然函数f是在obj对象内部定义的,但是他任然是一个普通函数,this指向的还是window对象.
var x = 20;
var obj = {
x:10,
fn:function() {
function f() {
console.log(this);
console.log(this.x);
}
f();
}
};
obj.fn();
5. 构造函数prototype
this代表的是当前对象的值,不仅仅是在构造函数的prototype,即便是在整个原型链中.
function Fn(name, age) {
this.name = name;
this.age = age;
}
Fn.prototype.sayName = function() {
console.log(this.name);
};
var f1 = new Fn("zhangsan", 20);
console.log(f1.name);