首頁 > web前端 > js教程 > 主體

javascript中的this詳解_javascript技巧

WBOY
發布: 2016-05-16 16:28:15
原創
1254 人瀏覽過

This物件在js中就一直是個坑貨,很難判斷它到底指向什麼,而我們由於來自C 或python的self的經驗,又常常會犯這一類的錯誤。接下來就詳細講一下this物件的歸屬。

rule1:全域環境的this

javascript的環境天生就由函數來決定,在js裡不能透過程式碼區塊隔開上下文,不被函數所包裹的環境就是全域環境,全域環境中的this就指向全域變數window,看下面一個例子

複製程式碼 程式碼如下:

var name='jjj';
console.log(this.name);
//會成功輸出jjj

rule2:作為方法呼叫時的this

顯然這種情況很好判斷,與python裡的self是一致的,this毫無疑問指向呼叫方法的物件

複製程式碼 程式碼如下:

var user={
    name:'kkk'
};
user.getName=function(){
    console.log(this.name);
};
user.getName();
//會輸出kkk

rule3:作為建構子時的this

這時的this也不用我多說,顯然是指向新創建的對象,構造函數的運行其實並不創建對象,而僅僅是初始化,對像在運行之前就已經被創建
下面還是舉例說明

複製程式碼 程式碼如下:

function User(name){
    this.name=name;
}
var f1=new User('kkk');
var f2=User('kkk');
console.log(f1.name);//kkk
console.log(f2.name);//undefined沒有name屬性

rule4:間接呼叫中的this

所謂間接呼叫是指利用apply和call來呼叫函數,這時的this指向它們參數清單中的第一個參數。

複製程式碼 程式碼如下:

var setName=function(name){
    this.name=name;
};
var user={level:2};
user.apply(setName,'jjj');
console.log(user.name);//jjj

rule5:其他情況的this

記住其他情況下this均不會被改變,這裡也是最容易犯錯的地方。

複製程式碼 程式碼如下:

var name = "clever coder";
var person = {
    name : "foocoder",
    hello : function(sth){
        var sayhello = function(sth) {
            console.log(this.name " says " sth);
        };
        sayhello(sth);
    }
}
person.hello("hello world");//clever coder says hello world

上面的程式碼看起來很奇怪,難道this不該指向person嗎?
我們應該記住被巢狀的函數中的this是不會指向巢狀它的函數,在這個例子裡面就是sayhello中的this不會指向hello對應的那個函數。如果我們把例子稍微改一下變成

複製程式碼 程式碼如下:

hello:function(sth){
    console.log(this.name " says " sth);
}
//foocoder says hello world

大家應該已經看明白了,這時候,sayhello並非在作為方法調用,所以this指向全局對象。 。 。
這時候問題來了,用node運行最初的例子會顯示undefined says hello world,不知道有沒有大神講解一下。

rule6:eval破壞所有規則

最後以一個例子結束

複製程式碼 程式碼如下:

var name = "clever coder";
var user={
    name:'kkk'
};
user.getName=function(){
    console.log(this.name);
};
var get=user.getName;
get();//clever coder

大家是否明白了?

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板