JavaScript This的用法

20151029 This的用法

This的用法

在函数中This取何值,何时确定的?

This是在函数真正被调用执行的时候确定的.

函数定义的时候确定不了,因为This的取值是执行上下文环境的一部分,每次调用函数,都会产生一个新的执行上下文环境.

因此,谁调用函数This就指向谁.

一 构造函数的this

FOO:作为构造函数使用时

function Foo() {
    this.name = "wo";
    this.age = "34";
    console.log(this); //this代表的是当前对象的值
}
var f = new Foo();

FOO:作为普通函数使用时

function Foo() {
    this.name = "wo";
    this.age = "34";
    console.log(this); //this指向window
}
Foo();

说明:
1/ 如果函数作为构造函数使用,那么其中的this就指向new出来的对象;

2/ 如果函数作为普通函数使用,这时this就指向window.

二 函数作为对象的一个属性时

如果函数作为对象的一个属性,并且被调用时,函数中的this指向该对象.

//代码片段1:
var x = 12;
var obj = {
    x: 10,
    fn: function() {
        console.log(this.x); //此处this指向obj这个对象
    }
};
obj.fn(); //输出: 10


//代码片段2:
var x = 12;
var obj = {
    x: 10,
    fn: function() {
        console.log(this.x); //此处this指向obj这个对象
    }
};
var obj1 = {
    x: 20
}
obj1.fn = obj.fn; //把obj的fn属性给了obj1,因此this指向obj1了
obj1.fn(); //输出: 20

三 函数使用call或apply调用

当一个函数被call和apply调用时,this的值就去传入对象的值.

//代码片段1:
var test = "tony";
function a() {
    console.log(test);
}
var obj = {
    test: "tom"
};
a();
a.call(obj); //输出: tony
obj.test; //输出: tony


//代码片段1:
var test = "tony";
function a() {
    console.log(this.test);
}
var obj = {
    test: "tom"
};
a();
//a.call(obj); 
a.apply(obj); //a中的this指向obj
obj.test;
call和apply指定调用者

四 全局&普通函数的调用

在全局环境下,this指向的是window对象:

console.log(this); //输出: window
console.log(this === window); //输出: true

普通函数调用时,其中的this也是指向window对象:

var x = 20;
var obj = function() {
    console.log(this); //输出: window
    console.log(this.x); //输出: 20
}
obj();

注意以下情况:
虽然函数f是在obj内部定义的,但是他仍然是一个普通函数,this指向的还是window:

var x = 20;
var obj = {
    x: 10,
    fn: function() {
            console.log(this); //指向obj
        function f() {
            console.log(this); //指向window
            console.log(this.x); //输出: 20
        }
        f(); //此为window调用
    }
};
obj.fn();


//分析:
function f() {
    console.log(this); //指向window
    console.log(this.x); //输出: 20
} 
函数f是在对象obj属性的方法里边的一个普通函数.
而fn: function() {
            console.log(this);
    }是obj对象的属性的一个方法.

五/构造函数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",23);
console.log(f1.name); //输出: zhangsan
f1.sayName(); //输出: zhangsan