理解js中的this指向以及call，apply，bind方法

<script>
function a(){var user = "追梦子";console.log(this.user); //undefinedconsole.log(this); //Window
}
a();
</script>

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

<script>function a(){var user = "追梦子";console.log(this.user); //undefined

console.log(this); //Window}

window.a();window.alert(“追门子”)；</script>

再看一个例子

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 中定义的属性，从而达到了继承的目的。

转载于:https://www.cnblogs.com/susan-home/p/8663915.html