JS 知識點雜記

2021-10-12 04:50:18 字數 3751 閱讀 9567

this 指向

在 js 中,將乙個變數賦值為nullundefined幾乎沒有什麼區別,它們都是虛值(falsy),在判斷語句中都會被轉為false

雖然它們非常類似,但是還是有一些區別的:

null表示沒有物件,即該處沒有值。典型的用法是:

作為函式的引數,表示該函式的引數不是物件。

作為物件原型鏈的終點

object.

getprototype

(object.prototype)

;// null

undefined表示缺少值,即是此處可能會有乙個值,但是還沒有定義。典型語法是:

變數被宣告了,但是沒有複製時,就等於undefined呼叫函式時,應該提供的引數沒有提供,該引數就等於undefined物件沒有賦值的屬性,該屬性的值為undefined函式沒有返回值時,預設返回undefined

var i;

i // undefined

function

f(x)f(

)// undefined

var o =

newobject()

;o.p // undefined

var x =f(

);x // undefined

綜上,我們可以知道:

因此設定乙個值為null是合理的,如:obj.val = null;

但是設定乙個值為undefined是不合理的,如obj.val = undefined;,因為在我們定義obj.val之前,我們呼叫obj.val同樣能夠得到undefined,這樣做不是多此一舉了嗎。

因此,任何乙個存在引用的變數值為undefined都是一件錯誤的事。

這樣,判斷乙個值是否存在,就可以使用obj.val === undefined

在一些使用廣泛的庫(比如jquery)中的深度拷貝函式會忽略undefined而不會忽略null,也是針對這個語義的理解。

ref:阮一峰部落格

函式的呼叫方式決定了this的值(執行時繫結)。

es5 引入了bind方法來設定函式的this的值,es2015 引入了箭頭函式,箭頭函式不提供自身的this繫結,this的值將保持為閉合詞法上下文的值。

可以使用globalthis來獲取全域性物件,無論**是否在當前上下文中執行。

在函式內部,this的值取決於函式被呼叫的方式。

在嚴格模式下,如果進入執行環境時沒有設定this的值,this會保持為undefined,如:

functionf2(

)f2()

=== undefined;

// true

functionf1(

)f1()

=== window;

// 在瀏覽器中,全域性物件是 windowf1(

)=== globalthis;

// 在 node 中

this在 類 中的表現與在函式中類似,因為類本質上也是函式。

在類的構造器中,this是乙個常規物件。類中所有非靜態的方法都會被新增到this的原型中:

class

example

first()

second()

static

third()

}new

example()

;// ['constructor', 'first', 'second']

如:

function

foo1()

letfoo2=(

)=>

this

;let obj =

;//foo1 返回的 this 為 obj,foo2 返回的 this 為全域性物件,因為函式是根據執行的物件來繫結 this 的,而箭頭函式是建立的時候就繫結了上下文環境

console.

log(obj.

foo1()

, obj.

foo2()

);

// obj 物件中有乙個 foo 方法,這個方法中使用了箭頭函式返回了乙個 this

// 因此箭頭函式返回的這個 this 被繫結到了外層函式的 this

// 而 foo 的值可以在呼叫中設定,進而設定返回的 this

let obj =

}// 作為 obj 物件的乙個方法來呼叫,它的 this 會繫結到 obj 上

let fn = obj.

foo();

// fn === obj

// 但是,若只是引用 obj 方法,沒有呼叫它

let fn2 = obj.foo;

// 那麼呼叫箭頭函式後,this 指向 window,因為它從 foo 繼承了this。

fn2(

)=== window;

// true

當乙個函式用作建構函式時(使用new關鍵字),它的this被繫結到正在構造的新物件。

當函式被用作事件處理函式時,它的this指向觸發事件的元素。

當**被內聯 on-event 處理函式 呼叫時,它的this指向***所在的dom元素:

"alert(this.tagname.tolowercase());"

>

show this

<

/button>

上面的 alert 會顯示button

注意只有外層**中的this是這樣設定的:

"alert((function())());"

>

show inner this

<

/button>

在這種情況下,沒有設定內部函式的this,所以它指向global/window物件(即非嚴格模式下呼叫的函式未設定this時指向的預設物件)。

這種情況下,若想要正確設定this,可以使用bind

"alert((function()).bind(this)());"

>

show inner this

<

/button>

ref: mdn

知識點雜記

三 c 相關 1.qstring與qchar類 關於qchar類詳細的文章 1 qchar轉char型別 char a qchar qch a qch.tolatin1 qchar char 還有 toutf82 qstring轉qchar型別 qstring str abcde qchar b n...

前端知識點雜記

css display屬性 block css1 塊物件的預設值。將物件強制作為塊物件呈遞,為物件之後新增新行 可以定義高度和寬度 none css1 隱藏物件。與 visibility 屬性的hidden值不同,其不為被隱藏的物件保留其物理空間 inline css1 內聯物件的預設值。將物件強制...

Python 知識點雜記

輸入以空格分隔的陣列時,可使用字串的split函式按空格分隔,例如dir input split 得到了陣列dir 但是該陣列是以字串形式儲存的,所以此時,我們可以使用map函式,例 dir map int,input split 來獲得乙個int陣列。或者,如果需要使用數量已知的變數去儲存,可以直...