零碎知識點 · 前端筆記

[TOC] # 函數表達式的命名只能在內部訪問，且不能被覆蓋 ``` var q = function test() { test = 233 console.log(test) // ? test() } q() test // undefined ``` # 方法簡寫不能執行 new ``` var o = { foo: function () { console.log(123) }, bar() { console.log(456) } } o.bar() var f = o.foo.bind({}) new f() var p = o.bar.bind({}) new p() //報錯 ``` # {} + [] 與 console.log({} + []) {} + []，前面視為代碼塊，執行后面的 + []，[]轉化為0 console.log({} + []) 把整體作為語句 ``` {} + [] // 0 console.log({} + []) // [object Object] ``` # 如何讓 (a == 1 && a == 2 && a == 3) 的值為true ## 重寫對象的 valueOf 方法如果a是一個對象Object，那在執行a`==`的時候首先會去先執行`valueOf`方法，如果沒有`valueOf`方法，就會去執行`toString`方法。（`toString`方法與`valueOf`類似，這里不再重復） ~~~ const a = { value: 0 } a.valueOf = function () { return this.value += 1 } console.log( a == 1 && a == 2 && a == 3 ); ~~~ ## 重寫數組的 join 方法如果a是一個數組Array，在數組轉換成字符串的時候，數組`toString`會隱含調用`join()`方法 ~~~ let a = [1, 2, 3] a.join = a.shift console.log( a == 1 && a == 2 && a == 3 ); ~~~ ## Proxy ~~~ let a = new Proxy({}, { i: 1, get: function() { return () => this.i++ } }) console.log( a == 1 && a == 2 && a == 3 ); ~~~ ## Symbol.toPrimitive Object 轉換為原始類型會調用什么方法？ * 如果部署了 `[Symbol.toPrimitive]` 接口，那么調用此接口，若返回的不是基本數據類型，拋出錯誤。 * 如果沒有部署 `[Symbol.toPrimitive]` 接口，那么根據要轉換的類型，先調用 `valueOf` / `toString` 1. 非Date類型對象，`hint` 是 `default` 時，調用順序為：`valueOf` >>> `toString`，即`valueOf` 返回的不是基本數據類型，才會繼續調用 `valueOf`，如果`toString` 返回的還不是基本數據類型，那么拋出錯誤。 2. 如果 `hint` 是 `string`(Date對象的hint默認是string) ，調用順序為：`toString` >>> `valueOf`，即`toString` 返回的不是基本數據類型，才會繼續調用 `valueOf`，如果`valueOf` 返回的還不是基本數據類型，那么拋出錯誤。 3. 如果 `hint` 是 `number`，調用順序為： `valueOf` >>> `toString` ~~~ // 部署 [Symbol.toPrimitive] / valueOf / toString 都可以 // 一次返回 1 2 3 即可 let a = { [Symbol.toPrimitive]: (function(hint) { let i = 1 return function() { return i++ } })() } console.log( a == 1 && a == 2 && a == 3 ); ~~~ ## 字符編碼 ~~~ var a? = 1; var a = 2; var ?a = 3; console.log(a? === 1 && a === 2 && ?a=== 3 ); ~~~ ## Object.definedProperty（使用===也返回true） ~~~ var value = 0; //window.value Object.defineProperty(window, "a", { get: function () { return this.value += 1 } }) console.log( a === 1 && a === 2 && a === 3 ); ~~~ # try中有return，finally還會執行嗎 ~~~ function test() { let x = 1 try { ++x; return x; } catch (e) { } finally { ++x; // 3 } return x; // 2 } test() ~~~ ## finally 語句塊還會執行嗎在**try執行完成之后，finally是一定會執行的**。這種特性可以讓程序員避免在`try`語句中使用了`return`,`continue`或者`break`關鍵字 ## try { return } finally{}? try中返回了`x=2`, finally語句又重新設置了`x=3`，為什么返回給主程序的結果是2呢？如果在try中return的情況下，先把try中將要return的值先存到一個本地變量中，即本例中的x=2將會被保存下來。接下來去執行finally語句，最后返回的是存在本地變量中的值，即返回x=2. Notes:還有一點要注意的，如果你在finally里也用了return語句，比如return ++x。那么程序返回值會是3。因為規范規定了，當try和finally里都有return時，會忽略try的return，而使用finally的return。