理解js中的this对象

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象。

一、指向问题

1、单独调用：全局对象

例1：

var a = this;
console.log(a); //window

2、函数内部：全局对象

例2：

function test() {
    var user = '小明';
    console.log(this.user);
    console.log(this);
}

test();  //调用方式1
window.test();  //调用方式2

//输出结果：
>>> undefined
>>> Window  …
>>> undefined
>>> Window …

调用test的方法为window对象，调用方式1等同于调用方式2，其实alert也是window的一个属性，alert(1)相当于window.alert(1)

例3：构造函数

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

new Fn相当于创建了一个Fn的实例，并使a对象指向这个实例，调用a.user，this指向a对象

例4：return + this

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

a对空对象，所以a.user为undefined

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

a为function，所以a.user为undefined

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

所有函数都有默认的返回值，为undefined

function fn() 
{ 
    this.user = '小明';  
    return null;
}
var a = new fn; 
console.log(a.user); //小明

return返回null，起到中断方法执行的效果

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

js 为弱类型语言，所有非0的int值都为 Bool 值的 True ，所以return 1即为true。

3、方法内部：该方法所属对象

例5：

var student = {
    name: '小明',
    birth: 2000,
    test: function() {
        console.log(this.name+":"+this.birth);
    }
}
student.test();  //小明:2000

test方法的调用对象为student，所以this指向student

例6：

var student = {
    name: '小明',
    birth: 2000,
    test: function() {
        console.log(this.name+":"+this.birth);
    }
}
window.student.test(); //小明:2000

这里先不解释为什么this不指向window，下面补充几种情况说明。

• 情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，但是我们这里不探讨严格版的问题。

• 情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。

• 情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象

例7：

var o = {
    a:10,
    b:{
        //a:12,
        fn:function(){
            console.log(this.a); //undefined
        }
    }
}
o.b.fn();

尽管对象b中没有属性a，这个this指向的也是对象b，因为this只会指向它的上一级对象，不管这个对象中有没有this要的东西。

例8：

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var j = o.b.fn;
j();

this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的，本例中虽然函数fn是被对象b所引用，但是在将fn赋值给变量j的时候并没有执行,所以最终指向的是window，这和例子6是不一样的，例子6是直接执行了fn。

二、call、apply、bind

JavaScript 的一大特点是，函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。
在常见的单体模式中，通常我们会使用 _this , that , self 等保存 this ，这样我们可以在改变了上下文之后继续引用到它。 像这样：

var foo = {
    bar : 1,
    eventBind: function(){
        var _this = this;
        $('.someClass').on('click',function(event) {
            /* Act on the event */
            console.log(_this.bar);     //1
        });
    }
}

除此之外，call、apply、bind也可以改变this指向。bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。

首先定义一个对象，xiaoming

var xiaoming = {
    name: 'xiaoming',
    run: function() {
        console.log(this.name + ' run ...');
    }
};

如果我们想再定义一个对象 ,但是不想对它重新定义 run方法，那么我们可以通过 call 或 apply 用 apple 的 run 方法（原型和继承也可以达到这种目的，在此，主要说明call、apply、bind的用法）

xiaoming.run.call(xiaohong);
xiaoming.run.apply(xiaohong);
xiaoming.run.bind(xiaohong)();

当一个 object 没有某个方法，但是其他的有,可以借助call或apply用其它对象的方法来操作。

三种方法的区别和相同点：

• call 需要把参数按顺序传递进去，每个参数作为一个整体
• apply 则是把参数放在数组里，数组会被拆分为单个对象
• bind 除了返回是函数以外，它 的参数和 call 一样

数组之间追加：在array1里面追加内容

var array1 = [12 , "foo" , {name:"Joe"} , -2458]; 
var array2 = ["Doe" , 555 , 100]; 
Array.prototype.push.call(array1,array2);   //array1容量为5，array2作为一个整体
Array.prototype.push.apply(array1,array2);   //array1容量为7
Array.prototype.push.bind(array1,array2)();  //array1容量为5