?

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

按照我們上面說的函數(shù)中的this指向的是最終調(diào)用并執(zhí)行它的對象，（切記this指向的是最終執(zhí)行該函數(shù)的對象）這里的函數(shù)a實(shí)際是被Window對象所點(diǎn)出來的，Window對象表示的是瀏覽器打開的窗口。例如上面的Window 指的是這個(gè)窗口file:///C:/Users/yanyanshan/Desktop/test/parent.html。下面的代碼就可等價(jià)于上面的代碼。alert也是window的一個(gè)屬性，也是window點(diǎn)出來的。

?

<script>function a(){var user = "追夢子";console.log(this.user); //undefined console.log(this); //Window} window.a();window.alert(“追門子”)；</script>

?

再看一個(gè)例子

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

?

這里的this指向的是對象o，因?yàn)槟阏{(diào)用這個(gè)fn是通過o.fn()執(zhí)行的，那自然指向就是對象o，這里再次強(qiáng)調(diào)一點(diǎn)，函數(shù)中的this指向在函數(shù)創(chuàng)建的時(shí)候是決定不了的，在調(diào)用執(zhí)行的時(shí)候才能決定，誰是最后調(diào)用并執(zhí)行該函數(shù)的就指向誰，一定要搞清楚這個(gè)。

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

?

window是js中的全局對象，我們創(chuàng)建的變量實(shí)際上是給window添加屬性，所以這里可以用window點(diǎn)o對象。但這里最后調(diào)用fn函數(shù)的是o對象，因此this自然指向的是o。

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

?

以上的代碼打印出來的12，因?yàn)檫@里最后調(diào)用fn函數(shù)的是b對象，因此執(zhí)行函數(shù)的時(shí)候this指向的是b對象。

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

?

這里也是最后調(diào)用函數(shù)的是b對象，因?yàn)?/span>b對象中沒有a屬性，因此打印出來的是undefined

再看一個(gè)例子

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指向的是最終調(diào)用并且執(zhí)行該函數(shù)的對象。以上b雖然是最后調(diào)用fn函數(shù)的對象，但是它是把函數(shù)賦給了變量j，并沒有執(zhí)行該函數(shù)。而函數(shù)最終執(zhí)行的時(shí)候是window調(diào)用的。

?

但有時(shí)候，我們想把某個(gè)對象的函數(shù)保存到一個(gè)變量中，通過該變量來執(zhí)行函數(shù)，希望執(zhí)行該函數(shù)的不是window對象。那么就要以下的方法

?

在JavaScript 中，call、apply 和 bind 是 Function 對象自帶的三個(gè)方法，這三個(gè)方法的主要作用是改變函數(shù)中的 this 指向，

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

?

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

?

?

通過在call方法，給第一個(gè)參數(shù)指定要把b添加到哪個(gè)環(huán)境中，也就是指定執(zhí)行b函數(shù)的是哪個(gè)對象。那么函數(shù)中的this就會(huì)指向那個(gè)對象。

call方法除了第一個(gè)參數(shù)以外還可以添加多個(gè)參數(shù)，后面的參數(shù)將會(huì)被傳入調(diào)用函數(shù)中。如下：

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也可以有多個(gè)參數(shù)，但是不同的是，第二個(gè)參數(shù)必須是一個(gè)數(shù)組，如下：

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的第一個(gè)參數(shù)寫的是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的指向。調(diào)用 call 或 apply 都會(huì)自動(dòng)執(zhí)行對應(yīng)的函數(shù)，而 bind 不會(huì)執(zhí)行對應(yīng)的函數(shù)，實(shí)際上bind方法返回的是一個(gè)修改過后的函數(shù)。

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方法返回的是一個(gè)修改過后的函數(shù)，因此打印c的時(shí)候是一個(gè)函數(shù)。

那么我們現(xiàn)在執(zhí)行一下函數(shù)c看看，能不能打印出對象a里面的user

var a = {user:"追夢子",fn:function(){console.log(this.user); //追夢子 }}var b = a.fn;var c = b.bind(a);c();ok，可以打印出來。同樣bind也可以有多個(gè)參數(shù)，并且參數(shù)可以執(zhí)行的時(shí)候再次添加，但是要注意的是，參數(shù)是按照形參的順序進(jìn)行的。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);

?

注意看以上的結(jié)果。

bind是ES5 新增的一個(gè)方法，粗略一看，bind 似乎比call/apply 要落后一些，那ES5為什么還要引入bind 呢？

其實(shí)，ES5引入 bind 的真正目的是為了彌補(bǔ) call/apply 的不足，由于 call/apply 會(huì)對目標(biāo)函數(shù)自動(dòng)執(zhí)行，從而導(dǎo)致它無法在事件綁定函數(shù)中使用，因?yàn)槭录壎ê瘮?shù)不需要我們手動(dòng)執(zhí)行，它是在事件被觸發(fā)時(shí)由JS 內(nèi)部自動(dòng)執(zhí)行的。而 bind 在實(shí)現(xiàn)改變函數(shù) this 的同時(shí)又不會(huì)自動(dòng)執(zhí)行目標(biāo)函數(shù)，因此可以完美的解決上述問題，看一個(gè)例子就能明白：

?

var obj = {name:'onepixel'};/*** 給document添加click事件監(jiān)聽，并綁定onClick函數(shù)* 通過bind方法設(shè)置onClick的this為obj，并傳遞參數(shù)p1,p2*/document.addEventListener('click',onClick.bind(obj,'p1','p2'),false);//當(dāng)點(diǎn)擊網(wǎng)頁時(shí)觸發(fā)并執(zhí)行 function onClick(a,b){console.log(this.name, //onepixel a, //p1 b //p2 )}

?

?

一旦函數(shù)通過bind傳遞了有效的this對象，則該函數(shù)在運(yùn)行期的this將指向這個(gè)對象，即使通過call或apply來試圖改變this的指向也是徒勞的。當(dāng)點(diǎn)擊網(wǎng)頁時(shí)，onClick 被觸發(fā)執(zhí)行，輸出onepixel p1 p2, 說明 onClick 中的 this 被 bind 改變成了obj 對象。

應(yīng)用場景一：繼承

大家知道，JavaScript中沒有諸如Java、C# 等高級語言中的extend 關(guān)鍵字，因此JS 中沒有繼承的概念，如果一定要繼承的話，call 和 apply 可以實(shí)現(xiàn)這個(gè)功能：

?

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

?

?

?當(dāng)通過new 運(yùn)算符產(chǎn)生了cat 時(shí)，Cat中的 this 就指向了cat對象，而繼承的關(guān)鍵是在于Cat中執(zhí)行了Animal.call(this,'cat','50') 這句話，在call中將this作為thisArgs參數(shù)傳遞，于是Animal 方法中的 this 就指向了Cat中的 this，而 cat 中的 this 指向的是 cat 對象，所以Animal 中的 this 指向的就是 cat 對象，在 Animal 中定義了name 和 weight 屬性，就相當(dāng)于在 cat 中定義了這些屬性，因此 cat 對象便擁有了Animal 中定義的屬性，從而達(dá)到了繼承的目的。

?

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/susan-home/p/8663915.html

總結(jié)

以上是生活随笔為你收集整理的理解js中的this指向以及call，apply，bind方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。