?

<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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。