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

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

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

this關(guān)鍵字 描述

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

this 都會(huì)指向一個(gè)對(duì)象

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

默認(rèn)綁定

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

示例代碼

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

隱式綁定

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

示例代碼

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

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

隱式綁定的丟失

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

示例代碼

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

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

顯示綁定

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

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

示例代碼

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

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

new綁定

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

示例代碼

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

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

被忽略的this

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

示例代碼

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

間接引用

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

示例代碼

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

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