JS学习：this,call,apply,bind

1、this的指向

1）以函数形式调用时，this永远都是window

function a(){
    var user = "Alice";
    console.log(this.user); //undefined
    console.log(this); //window
}
a();

var o = {
    user:"Alice",
    b:{
        user:"Bob",
        fn:function(){
            console.log(this.user); //undefined
            console.log(this); //window
        }
    }
}
var j = o.b.fn;
j();

2）以方法的形式调用时，this是调用方法的对象

var o = {
    user:"Alice",
    fn:function(){
        console.log(this.user);  //Alice
        console.log(this); //o
    }
}
o.fn();

var o = {
    user:"Alice",
    b:{
        user:"Bob",
        fn:function(){
            console.log(this.user); //Bob
            console.log(this); //b
        }
    }
}
o.b.fn();

var o = {
    user:"Alice",
    b:{
        // user:"Bob",
        fn:function(){
            console.log(this.user); //undefined
            console.log(this); //b
        }
    }
}
o.b.fn();

3）以构造函数的形式调用时，this是新创建的那个对象

function Fn(){
    this.user = "Alice";
}
var a = new Fn();
console.log(a.user); //Alice

4）当this碰到return时

• 如果返回值是一个对象，那么this指向的就是那个返回的对象。

function fn()  
{  
    this.user = 'Alice';  
    return {};  
}
var a = new fn;  
console.log(a.user); //undefined

function fn()  
{  
    this.user = 'Alice';  
    return function(){};
}
var a = new fn;  
console.log(a.user); //undefined

• 如果返回值不是一个对象，那么this还是指向函数的实例。

function fn()  
{  
    this.user = 'Alice';  
    return 1;
}
var a = new fn;  
console.log(a.user); //Alice

• 返回值是undefined，null

function fn()  
{  
    this.user = 'Alice';  
    return undefined;
}
var a = new fn;  
console.log(a.user); //Alice

function fn()  
{  
    this.user = 'Alice';  
    return null;  //虽然null也是对象，this还是指向那个函数的实例
}
var a = new fn;  
console.log(a.user); //Alice

2、call()和apply()

• 这两个方法都是函数对象的方法，需要通过函数对象来调用。
• 在调用call()和apply()可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this。
• 如果call和apply的第一个参数写的是null，那么this指向的是window对象。

var a = {
    user:'Alice',
    fn:function(){
        console.log(this.user); //Alice
    }
}
var b = a.fn;
b.call(a);

var a = {
    user:'Alice',
    fn:function(){
        console.log(this.user); //Alice
    }
}
var b = a.fn;
b.apply(a);

• call方法除了第一个参数以外还可以添加多个参数。

var a = {
    user:'Alice',
    fn:function(x,y){
        console.log(this.user); //Alice
        console.log(x+y); //3
    }
}
var b = a.fn;
b.call(a,1,2);

• apply也可以有多个参数，但是不同的是，第二个参数必须是一个数组。

var a = {
    user:'Alice',
    fn:function(x,y){
        console.log(this.user); //Alice
        console.log(x+y); //3
    }
}
var b = a.fn;
b.apply(a,[1,2]);

3、bind()

• bind方法返回的是一个修改过后的函数。
• call和apply都是改变上下文中的this并立即执行这个函数，bind方法可以让对应的函数想什么时候调就什么时候调用。

var a = {
    user:'Alice',
    fn:function(){
        console.log(this.user); //Alice
    }
}
var b = a.fn;
var c = b.bind(a);
c(); //所以需要调用一下

• bind方法也可以有多个参数，并且参数可以执行的时候再次添加，参数是按照形参的顺序进行的。

var a = {
    user:'Alice',
    fn:function(x,y,z){
        console.log(this.user); //Alice
        console.log(x+y+z); //6
    }
}
var b = a.fn;
var c = b.bind(a,1);
c(2,3);