javascript中this指針詳解

誰調用的方法或者屬性，this就指向誰

若是沒有被誰調用，this指向window

 

狀況1：若是一個函數中有this，可是它沒有被上一級的對象所調用，那麼this指向的就是window，這裏須要說明的是在js的嚴格版中this指向的不是window，可是咱們這裏不探討嚴格版的問題，你想了解能夠自行上網查找。

狀況2：若是一個函數中有this，這個函數有被上一級的對象所調用，那麼this指向的就是上一級的對象。

狀況3：若是一個函數中有this，這個函數中包含多個對象，儘管這個函數是被最外層的對象所調用，this指向的也只是它上一級的對象，若是不相信，那麼接下來咱們繼續看幾個例子。

 

new操做符會讓構造函數產生以下變化：

1.       建立一個新對象；

2.       將構造函數的做用域賦給新對象（所以this就指向了這個新對象）；

3.       執行構造函數中的代碼（爲這個新對象添加屬性）；

4.       返回新對象

 

首先看下面代碼：

    

function funcA() {
    this.name = "hello";
    console.log(this.name);
    this.show = function() {
        console.log(this.name);
    }
}
funcA();// 一、hello
var a = new funcA();//二、hello
a.show();//三、hello
var objA = {
    name: "objA"
}
a.show.call(objA);//四、objA

var objB = {
    name: "objB"
}
objB.show = a.show
objB.show();//五、objB
(objB.show = a.show)();//六、hello

 

下面這幾段代碼就把this常見的狀況給表現出來的差很少了， this在js中主要有四種用法：

一、做爲普通函數使用

二、做爲對象方法來使用

三、call和apply

四、做爲構造函數來使用

下面分別說明

1、做爲普通函數來使用：

 function funcA() {
    this.name = "hello";
    console.log(this.name);
    this.show = function() {
        console.log(this.name);
    }
}
funcA();// 一、hello

這個代碼很簡單，但也隱藏了一個坑，就是這個時候的this 表明的是window的指針，因此當這段代碼運行完以後，你再輸出 console.log(window.name)時候，你會發現輸出爲」hello」,在使用中儘可能避免。

2、做爲對象方法來使用

var obj={name:"hello",show:function(){

console.log(this.name);

}};

obj.show();

這個很簡單，this指向本身,因此this.name就用hello;

 

若是代碼修改下：

var obj={name:"hello",show:function(){
    console.log(this.name);
}};
obj.show();

var objA={name:"world"}
objA.show=obj.show;
objA.show()

這個結果又是什麼呢？答案是」world」,由於在js中對象都是引用類型，當objA.show=obj.show這句代碼把objA.show也指向的show方法，因此在調用的時候會把this，指向objA而不是obj.

 

3、call和apply

 

這個在上面的繼承中的原型冒充中也提過一些，這裏也詳細說明this在call和apply中微秒的用法：

function funcA() {
    this.name = "hello";
    console.log(this.name);
    this.show = function() {
        console.log(this.name);
    }
}
 
var a = new funcA();
a.show();
var objA = {
    name: "objA"
}
a.show.call(objA);

上面這段代碼就是call的用法，這裏咱們能夠把代碼拆解成咱們能看的懂的形式：

a.show.call(objA)====>{
obj.show=a.show();
obj.show();
delete obj.show();
}

上面就是call的相似執行的過程的形勢（實際上並非這樣的，能夠這樣來記），知道了這個執行過程，咱們就來探究這個的執行過程：

一、把a.show裏面的方法中的this所有換成obj.

二、執行a.show(),同時把後面的參數做爲參數處理。

 

4、做爲構造函數來使用

function funcA(name){
    this.name;
    this.show=function(){
        console.log(name);
    }
}
var a=new funcA("hello");
a.show();

 做爲構造函數使用的時候，在new的關鍵字建立對象的時候，會先生成一個空對象，而後調用方法，把this的替換成這個空對象。（這個在上篇有詳細的說明，這裏很少說）。在建立對象的時候，this指針就指向了建立新對象。

 

因此上面的那段代碼我想應該就能看懂爲何會是這個輸出結果了，惟一的有一個(objB.show = a.show)();這個比較奇怪，由於賦值的時候，返回的是右邊的那個函數，因此最終執行的也是a.show();

 

總結：js中的this實際上是一個比較簡單的東西，上面只列出了經常使用的東西，至於更深刻的，能夠本身在深刻挖掘下，相信有了這個基礎後，再深刻的話應試就不是一件枯燥的事了