JavaScript 之面向?qū)ο?[ this關(guān)鍵字 ]

Cristalven 發(fā)布于2019-08-23 11:25 / 1170人閱讀

摘要：關(guān)鍵字描述一般被定義在函數(shù)中使用都會指向一個對象通過調(diào)用函數(shù)的位置來判斷當(dāng)前指定的對象默認(rèn)綁定表示在函數(shù)中使用，在調(diào)用該函數(shù)時，沒有具體的指向目標(biāo)，會默認(rèn)為指向全局對象示例代碼定義一個全局變量定義一個函數(shù)在函數(shù)調(diào)用時無法找到具體的對象，會指

this關(guān)鍵字 描述

this 一般被定義在函數(shù)中使用

this 都會指向一個對象

this 通過調(diào)用函數(shù)的位置來判斷當(dāng)前指定的對象

默認(rèn)綁定

表示在函數(shù)中使用this，在調(diào)用該函數(shù)時，this沒有具體的指向目標(biāo)，會默認(rèn)為this指向全局對象

示例代碼

/* 定義一個全局變量 */
var unm = 100;
/* 定義一個函數(shù) */
function fun() {
    console.log( this.unm );
}
/* 在函數(shù)調(diào)用時this無法找到具體的對象，會指向全局對象 */
fun();// 顯示 undefined（在瀏覽器環(huán)境中會顯示匹配的全局變量數(shù)值）

隱式綁定

表示一個函數(shù)被另一對象所擁有或包含，從形成的上下文關(guān)系，這時this會指向該對象

示例代碼

/* 定義一個函數(shù) */
function fun() {
    console.log( this.name );
}

/* 定義一個對象 */
var obj = {
    name : "唐三",
    /* 該對象的方法為一個指定函數(shù) - 形成上下文關(guān)系 */
    fn : fun
}
/* 調(diào)用指定方法 */
obj.fn();// 顯示 唐三

隱式綁定的丟失

將一個指定對象中的指定方法賦值給一個全局變量，在調(diào)用全局變量時，this將從原本指向具體對象，變成指向全局對象

示例代碼

/* 定義一個函數(shù) */
function fun() {
    console.log( this.name );
}

/* 定義一個對象 */
var obj = {
    name : "唐三",
    /* 該對象的方法為一個指定函數(shù) - 形成上下文關(guān)系 */
    fn : fun
}
/* 調(diào)用指定方法 */
obj.fn();// 顯示 唐三
/* 將指定對象的方法賦值給一個變量 */
var s = obj.fn;
/* 調(diào)用變量 */
s();// 顯示 undefined

顯示綁定

用于處理隱式綁定丟失的一種方法

在調(diào)用函數(shù)時就明確this所指向的對象

示例代碼

/* 定義一個函數(shù) */
function fun() {
    console.log( this.name );
}

/* 定義一個對象 */
var obj = {
    name : "唐三",
    /* 該對象的方法為一個指定函數(shù) - 形成上下文關(guān)系 */
    fn : fun
}
/* 調(diào)用指定方法 */
obj.fn();// 顯示 唐三
/* 將指定對象的方法賦值給一個變量 */
var s = obj.fn;
/* 調(diào)用變量并明確指定this所指定的對象 */
s.apply( obj );// 顯示 唐三

new綁定

通過構(gòu)造函數(shù)所創(chuàng)建的對象，會成為該構(gòu)造函數(shù)中的this所指向的對象

示例代碼

/* 定義一個構(gòu)造函數(shù) */
function Fun() {
    /* this會指向該構(gòu)造函數(shù)所創(chuàng)建的對象 */
    this.name = "唐三";
}

/* 創(chuàng)建對象 */
var obj = new Fun();
console.log( obj.name );// 顯示 唐三

被忽略的this

在使用apply()方法或call()方法來調(diào)用函數(shù)時，將null或undefined做為this綁定的對象傳入時，會被忽略，并將this的綁定方式變成默認(rèn)綁定

示例代碼

/* 定義函數(shù) */
function fun(){
    console.log( this.s );
}
/* 定義全局變量 */
var s = 100;
/* 使用call()方法來調(diào)用指定函數(shù) */
fun.call( null );// 顯示 undefined （在瀏覽器環(huán)境中會顯示 100 全局變量）

間接引用

表示將this從隱式綁定或顯示綁定（有明確的指向?qū)ο螅┳兂赡J(rèn)綁定（指向全局對象）

示例代碼

/* 定義一個函數(shù) */
function fun() {
    console.log( this.s );
}
/* 定義一個全局變量 */
var s = 10;
/* 定義一個對象 */
var obj = {
    s : 20,
    fn : fun
};
/* 調(diào)用方法 */
obj.fn();// 顯示 20

/* 定義另一個對象 */
var x = {
    s : 30
};
/* 將obj對象中的方法新增到新對象中并調(diào)用 */
( x.fu = obj.fn )();// 顯示 undefined（瀏覽器環(huán)境中會顯示 10 全局變量）