按照我们上面说的函数中的this指向的是最终调用并执行它的对象，（切记this指向的是最终执行该函数的对象）这里的函数a实际是被Window对象所点出来的，Window对象表示的是浏览器打开的窗口。例如上面的Window 指的是这个窗口file:///C:/Users/yanyanshan/Desktop/test/parent.html。下面的代码就可等价于上面的代码。alert也是window的一个属性，也是window点出来的。

 

 

再看一个例子

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

 

这里的this指向的是对象o，因为你调用这个fn是通过o.fn()执行的，那自然指向就是对象o，这里再次强调一点，函数中的this指向在函数创建的时候是决定不了的，在调用执行的时候才能决定，谁是最后调用并执行该函数的就指向谁，一定要搞清楚这个。

var o = {    user:"追梦子",    fn:function(){        console.log(this.user); //追梦子    }}window.o.fn();

 

window是js中的全局对象，我们创建的变量实际上是给window添加属性，所以这里可以用window点o对象。但这里最后调用fn函数的是o对象，因此this自然指向的是o。

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

 

以上的代码打印出来的12，因为这里最后调用fn函数的是b对象，因此执行函数的时候this指向的是b对象。

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

 

这里也是最后调用函数的是b对象，因为b对象中没有a属性，因此打印出来的是undefined

再看一个例子

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

 

这里的this指向的是window，为什么呢？我们说this指向的是最终调用并且执行该函数的对象。以上b虽然是最后调用fn函数的对象，但是它是把函数赋给了变量j，并没有执行该函数。而函数最终执行的时候是window调用的。

 

但有时候，我们想把某个对象的函数保存到一个变量中，通过该变量来执行函数，希望执行该函数的不是window对象。那么就要以下的方法

 

在JavaScript 中，call、apply 和 bind 是 Function 对象自带的三个方法，这三个方法的主要作用是改变函数中的 this 指向，

1、call(thisArgs，args1,args2,……)

 

var a = {    user:"追梦子",    fn:function(){        console.log(this.user); //追梦子    }}var b = a.fn;b.call(a);

 

 

通过在call方法，给第一个参数指定要把b添加到哪个环境中，也就是指定执行b函数的是哪个对象。那么函数中的this就会指向那个对象。

call方法除了第一个参数以外还可以添加多个参数，后面的参数将会被传入调用函数中。如下：

var a = {    user:"追梦子",    fn:function(e,ee){        console.log(this.user); //追梦子        console.log(e+ee); //3    }}var b = a.fn;b.call(a,1,2);

 

2、apply(thisArgs，[args1，args2，……])

apply方法和call方法有些相似，它也可以改变this的指向

var a = {    user:"追梦子",    fn:function(){        console.log(this.user); //追梦子    }}var b = a.fn;b.apply(a);

 

同样apply也可以有多个参数，但是不同的是，第二个参数必须是一个数组，如下：

var a = {    user:"追梦子",    fn:function(e,ee){        console.log(this.user); //追梦子        console.log(e+ee); //11    }}var b = a.fn;b.apply(a,[10,1]);

 

或者

var a = {    user:"追梦子",    fn:function(e,ee){        console.log(this.user); //追梦子        console.log(e+ee); //520    }}var b = a.fn;var arr = [500,20];b.apply(a,arr);

 

//注意如果call和apply的第一个参数写的是null，那么this指向的是window对象

var a = {    user:"追梦子",    fn:function(){        console.log(this); //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…}    }}var b = a.fn;b.apply(null);

 

3、bind(thisArgs， args1，args2，..)

bind方法和call、apply方法有些不同，但是不管怎么说它们都可以用来改变this的指向。调用 call 或 apply 都会自动执行对应的函数，而 bind 不会执行对应的函数，实际上bind方法返回的是一个修改过后的函数。

var a = {    user:"追梦子",    fn:function(){        console.log(this.user);    }}var b = a.fn;b.bind(a);

 

以上没有打印出来任何的东西。

var a = {    user:"追梦子",    fn:function(){        console.log(this.user);    }}var b = a.fn;var c = b.bind(a);console.log(c); //打印function() { [native code] }

 

以上bind方法返回的是一个修改过后的函数，因此打印c的时候是一个函数。

那么我们现在执行一下函数c看看，能不能打印出对象a里面的user

var a = {    user:"追梦子",    fn:function(){        console.log(this.user); //追梦子    }}var b = a.fn;var c = b.bind(a);c();ok，可以打印出来。同样bind也可以有多个参数，并且参数可以执行的时候再次添加，但是要注意的是，参数是按照形参的顺序进行的。var a = {    user:"追梦子",    fn:function(e,d,f){        console.log(this.user); //追梦子        console.log(e,d,f); //10 1 2    }}var b = a.fn;var c = b.bind(a,10);c(1,2);

 

注意看以上的结果。

bind是ES5 新增的一个方法，粗略一看，bind 似乎比call/apply 要落后一些，那ES5为什么还要引入bind 呢？

其实，ES5引入 bind 的真正目的是为了弥补 call/apply 的不足，由于 call/apply 会对目标函数自动执行，从而导致它无法在事件绑定函数中使用，因为事件绑定函数不需要我们手动执行，它是在事件被触发时由JS 内部自动执行的。而 bind 在实现改变函数 this 的同时又不会自动执行目标函数，因此可以完美的解决上述问题，看一个例子就能明白：

 

var obj = {name:'onepixel'}; /** * 给document添加click事件监听，并绑定onClick函数 * 通过bind方法设置onClick的this为obj，并传递参数p1,p2 */document.addEventListener('click',onClick.bind(obj,'p1','p2'),false); //当点击网页时触发并执行function onClick(a,b){    console.log(            this.name, //onepixel            a, //p1            b  //p2    )}

 

 

一旦函数通过bind传递了有效的this对象，则该函数在运行期的this将指向这个对象，即使通过call或apply来试图改变this的指向也是徒劳的。当点击网页时，onClick 被触发执行，输出onepixel p1 p2, 说明 onClick 中的 this 被 bind 改变成了obj 对象。

应用场景一：继承

大家知道，JavaScript中没有诸如Java、C# 等高级语言中的extend 关键字，因此JS 中没有继承的概念，如果一定要继承的话，call 和 apply 可以实现这个功能：

 

function Animal(name,weight){   this.name = name;   this.weight = weight;} function Cat(){    Animal.call(this,'cat','50');  //Animal.apply(this,['cat','50']);    this.say = function(){      console.log("I am " + this.name+",my weight is " + this.weight);   }} var cat = new Cat();cat.say();//I am cat,my weight is 50

 

 

 当通过new 运算符产生了cat 时，Cat中的 this 就指向了cat对象，而继承的关键是在于Cat中执行了Animal.call(this,'cat','50') 这句话，在call中将this作为thisArgs参数传递，于是Animal 方法中的 this 就指向了Cat中的 this，而 cat 中的 this 指向的是 cat 对象，所以Animal 中的 this 指向的就是 cat 对象，在 Animal 中定义了name 和 weight 属性，就相当于在 cat 中定义了这些属性，因此 cat 对象便拥有了Animal 中定义的属性，从而达到了继承的目的。