取得 Function 的名稱

前言

  最近看 [ developer.mozilla.org ] Function: name  時發現有些特性跟我想地的不一樣，在此把學習的過程做個紀錄。

內容

  Funciton:name 是個屬性，且是 Read only那如果 Function 被賦値到另一個變數後名稱會不一樣嗎?

範例如下

let fun1 = function(){};
let fun2 = fun1;
//
console.log( fun1.name );//fun1
console.log( fun2.name );//fun1
console.log( new Function().name );//anonymous
console.log( function(){}.name );//

答案是一樣的， Funciton:name 會在第一次被賦值後就不再改變，所以 fun2 還是顯示 fun1 ，JavaScript 的 Function 使用起來很自由，有時盛至不取名就使用，那這些不取名的 Funciton 他們的 Funciton:name 會是什麼?如果是 new 出來的，名稱會是 anonymous ，如果是一般的匿名 Function ，名稱就真的是空字串。

 

參考資料

[ developer.mozilla.org ] Function: name 

 取得 Function 的引數的數量

前言

  由於先前的 初探 Function.toString() 的關係，Funciton:Length  直覺上會認為是回傳程式碼的字數，但事實上不是，在此把學習的過程做個紀錄。

內容

  範例如下

function fun0(){}
function fun1( a ){}
function fun2( a , b ){}
function fun3( a , b , c ){}
//
console.log( fun0.length );//0
console.log( fun1.length );//1
console.log( fun2.length );//2
console.log( fun3.length );//3

Funciton:Length 回傳的是引數數量，並非程式碼的字數，範例分別是分了從沒引數到3個引數的狀況。

參考資料

[ developer.mozilla.org ] Function: length

相關文章與資料

初探 Function.toString()

 初探 Function.bind()

前言

  最近查找 Function 發現裡面有個 Function.bind() ，在此把學習的過程做個紀錄。

內容

  範例如下

let objA = {
  x : 1234,
  getX : function(){
    return this.x;
  }
};
let objB = {
  x : 5566,
};
//
console.log( objA.getX() );//1234
//
x = 9999;
let call = objA.getX;
console.log( call() );//9999
//
let bindCall = objA.getX.bind(objB);
console.log( bindCall() );//5566

Function.bind() 的作用是決定該 Function 在喚起時的 this 會是哪個物件，範例的 objA.getX() 就是單純的成員函式喚起，接著透過 call 來喚起時，如果不做 Function.bind()  的話會得到 9999 ，範例有設定 global 的 x 是 9999 ，最後用 Function.bind()  綁定到 objB 上，要注意 objB 本身是沒有 getX() 的!只是成員也有 x ，綁定完後喚起會得到 objB.x 的內容，也就是 5566。 

參考資料

[ developer.mozilla.org ] Function.prototype.bind()

 初探 Function.toString()

前言

  最近發現 JavaScript 可以在執行的時候，透過 Function.toString() 來返回原始碼，在此把學習的過程做個紀錄。

內容

  範例如下

function myCall(){
  //comment...
  
  return 1234;
}
//
console.log( myCall.toString() );
// "function myCall(){
//   //comment...
  
//   return 1234;
// }"

可以看到 Function.toString() 的結果會是該 Function 的原始碼，比較特別的是返回的原始碼裡不論是空白換行與註解都會完整地返回，雖然不知道這個功能有什麼實用的地方，但還是個有趣的功能。

參考資料

[ developer.mozilla.org ] Function.prototype.toString()

 初探 Nullish coalescing assignment  (??=)

前言

  在先前的 初探 Nullish coalescing operator (??) 介紹過 ?? ，這次來學習跟它很像的 ??=  ，在此把學習的過程做個紀錄。

內容

  範例如下

let obj = {
  a : 1234
};
//
obj.a ??= 5678;
console.log( obj.a );//1234
//
obj.b ??= 9999;
console.log( obj.b );//9999
//
obj.c ??= undefined;
console.log( obj.c );//undefined
//
obj.d ??= null;
console.log( obj.d );//null

??= 是有賦值的特性，並不是像 == 之類比較，賦值的邏輯是當左側是 null 或 undefiend 則給予賦值，範例第一例由於 a 已經有數值，所以賦值不會成功， b 由於本來就沒值，所以賦值成功，如果左側原本沒值，右側賦予 null 或 undefined 會成功嗎?從 c 與 d 的結果來看答案是肯定的!

參考資料

[ developer.mozilla.org ] Nullish coalescing assignment (??=)

相關文章與資料

初探 Nullish coalescing operator (??)

 初探 Nullish coalescing operator (??)

前言

  最近發現新語法 Nullish coalescing operator ，在此把學習的過程做個紀錄。

內容

  範例如下

console.log( 1111 ?? undefined );//1111
console.log( null ?? 1234);//1234
console.log( null ?? undefined ?? 5678);//5678
console.log( null ?? 'abcd' ?? undefined);//"abcd"
console.log( null ?? 5555 ?? undefined ?? 9999);//5555

Nullish coalescing operator 可以理解成處理的雙方只要有一方不是 null 或 undefined ，還可以連續處理多個對象，如範例的第三、第四與第五例，要注意處理都是左方對象優先，第五例回傳的是 5555 而非 9999。

參考資料

[ developer.mozilla.org ] Nullish coalescing operator (??)

 初探 Optional chaining (?.)

前言

  最近發現 JavaScript 有個 Optional chaining 的語法，在此把學習的過程做個紀錄。

內容

  範例如下

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};
const dogName = adventurer?.name;
//Follow code has the same result...
//const dogName = adventurer.dog && adventurer.dog.name;
console.log(dogName);//Alice
//
const catName = adventurer?.cat?.name;
console.log(catName);//Dinah

Optional chaining  用來簡化程式碼，在寫程式常常需要檢查物件是否存在，若存在提取其內容這樣的邏輯，用 ?. 的語法就可以快速完成，範例的 dogName 會先確認 adventurer 是否存在，若存在回傳 aadventurer.name ，若不存在則是回傳 undefined ，這點要注意。這個語法還可以使用在巢狀結構，如範例的 catName 的應用，先確認 adventurer  是否存在，再確認 adventurer.cat 的存在，都沒問題才回傳 adventurer.cat.name 。

參考資料

[ developer.mozilla.org ] Optional chaining (?.)