javaScript中的this总结

javaScript中的this总结

1. 全局作用域下的this

全局作用域中的this指向全局对象，在浏览器中此全局对象为window

this.toString();    //"[object Window]"

this === window;    //true

var a = 3;
this.a;     //3
window.a;   //33

2. 一般函数中的this

一般函数中的this任然指全局环境中的this

function func(){
    return this;
}
func().toString()   //"[object Window]"

注意，在严格模式下，一般函数中的this会指向undefined

3. 作为对象方法的函数中的this

当函数为对象的属性值时，函数中的this指向该对象。如下代码中，func指向的函数中的this代表对象obj。

var obj = {
    prop:37,
    func:function(){
        return this.prop;
    }
};
obj.func();     //37

注意，本情况下，函数的创建不一定要在对象内部，函数也可以使用一般函数声明的方式创建，然后被赋值给对象的属性，此时，函数中的this任然指向该对象，如下。

var obj = {
    prop:37
};
function func(){
    return this.prop;
}
obj.f = func;
obj.f();    //37

4. 对象原型链上的this

当一个对象调用其原型链上的其它对象方法时，原型链上函数中的this会指向最底层正在使用的对象。

var obj = {
    func:function(){
        return this.a+this.b;
    }
};
var p = Object.create(obj);//p的原型是o
p.a = 1;
p.b = 2;
p.func();   //3

5. get/set方法与this

对象的get/set方法中的this指对象本身。

var obj = {
    pa:1,
    pb:2,
    get sum(){
        return this.pa + this.pb;
    },
    set sum(a){
        this.pa = a;
    }       
}
obj.sum;    //3
obj.sum = 13;
obj.pa;     //13

6. 构造器中的this

以下两种情况不太理解？？？

function myClass(){
    this.a = 12;
}
var obj = new myClass();
obj.a;      //12

function otherClass(){
    this.a = 12;
    return {a:15};
}
var otherObj = new otherClass();
otherObj.a;     //15

7. apply/call方法与this

apply()和call()方法的用途是设置函数的作用域，即指定函数体内this对象的值。
apply()方法接收两个参数，第一个是运行函数的作用域，即函数中this的指向；第二个数函数的参数数组。如下：

function add(a,b){
    return this.c + this.d + a + b;
}
var obj = {
    c:1,
    d:2
};
add.apply(obj,[1,2]);       //6

call()方法的第一个参数与apply方法一致，不同之处在于，其函数的参数必须通过逐个列举的方法传递。如下：

function add(a,b,c){
    return this.c + this.d + a + b + c;
}
var obj = {
    c:1,
    d:2
}
add.call(obj,1,1,2);        //7

关于用途，以下两端代码的区别在哪里？？？

function bar(){
    console.log(this.prototype.toString());
}
bar.call(7);  
//Uncaught TypeError: Cannot read property 'toString' of undefined

function bar(){
    console.log(Object.prototype.toString.call(this));
}
bar.call(7);    //[object Number]

8. bind()方法与this

bind()函数的调用对象为Function类型的对象，作用是将调用bind函数的this值设置bind参数指定的值。如下：

function func(){
    return this.a;
}
var obj = {
    a:15;
};
var otherObj = {
    a:10,
    func1:func,
    func2:func.bind(obj)
};
otherObj.func1();       //10
otherObj.func2();       //15

bind()函数除了改变函数中的this指向意外，还能起到绑定参数的作用，这一作用叫做函数颗粒化，如下：

function func(a,b,c){
    return a + b + c;
}
var add1 = func.bind(undefined,100);
add1(1,1);      //102
var add2 = add1.bind(undefined,100);
add2(1);        //201

用途：如下，可用于大部分配置都一致，少部分配置需要动态改变的情况。

function getConfig(color,size,otherOptions){
    console.log(color,size,otherOptions);
}
var defaultConfig = getConfig.bind(null,"#cc0000","1024*1024");
defaultConfig('123');       // #cc0000 1024*1024 123