this、apply、call、bind

學習自(純紀錄自己學了甚麼，非營利)

https://juejin.im/post/6844903496253177863

this 的指向

this 永遠指向最後調用他的對象

我常拿來判斷的想法

看他是被當作對象內的方法調用還是全局函數

直接來看例子比較好懂

例子

1
2
3
4
5
6
7
8
9
10
11

var name = 'Mike'
let foo = {
    name: 'Mary',
    getName() {
        console.log(this.name)
    }
}
foo.getName() // 很明顯是Mary，因為this指向的是最後調用他的對象
window.foo.getName() // 這也很明顯是Mary，因為會是最後調用的對象(即foo)
let bar = foo.getName // 記住這是賦與內存地址給他，執行的時候並不會變成 window.foo.getName
bar() // Mike (window.bar())

淺談instanceof 和typeof 的實現原理 (轉載)

學習自(純紀錄自己學了甚麼，非營利)

https://juejin.im/post/6844903613584654344

typeof

一般被用於判斷一個變量的類型，可判斷七種類型

number,string,object,boolean,function,undefined,symbol

但有一個很麻煩的事情，只能知道那個變量是object不能知道更精確的類型

1
2
3
4
5
6

let s = new String('abc'); 

typeof  s === 'object'  // true

// 還必須靠instanceof
s instanceof String // true

而且還有一個老梗，就是null也會顯示object (上古bug)

1

typeof null // object

所以typeof通常只被用來檢查基本類型

附註: 有一個不錯的方法

JavaScript 閉包

先來看一下各個不同地方的閉包說法

1. 你不知道的JavaScript: 當函數可以記住並訪問所在的詞法作用域時及形成閉包，即使不是在該函數的詞法作用域內
2. JavaScript高级程序设计: 閉包是指有權訪問令一個函數作用域變量的函數
3. MDN: 閉包（Closure）是函式以及該函式被宣告時所在的作用域環境（lexical environment）的組合。

我自己的理解

如果我們把函數作用域想像成一個書包(從外面是看不到裡面的內容的)，那閉包就很像一個超一流扒手，可以偷窺到你書包的東西。

JavaScript 世界万物诞生记 (原型鍊) (轉載)

學習自(純紀錄自己學了甚麼，非營利)

https://zhuanlan.zhihu.com/p/22989691

可以把prototype想像成那台機器會幹啥(有點像繼承會做的事情)

而proto(p) 則可以想像特性繼承(有點像繼承個性或是特徵)

看完全部再回來

1. 比方說Object的prototype會是NO1是因為他在模仿神創造對象
2. Function是一台機器所以他被歸類在NO2(繼承NO2是機器的特性)，他會創造機器，因此他的prototype是NO2
3. 機器會做甚麼是一定是根據prototype(Animal會吃跟移動，魚會游泳)
4. 靜態特性則是proto(大家都是機器因此proto往上找必定會有NO2)

最終圖

js隱式轉換相關知識

學習自(純紀錄自己學了甚麼，非營利)

https://zhuanlan.zhihu.com/p/38976424

!轉換

轉換成Boolean然後取反，沒啥特別的

[译] 送你 43 道 JavaScript 面试题

學習自(純紀錄自己學了甚麼，非營利)

https://juejin.im/post/6844903869378461710

第三題

1
2
3
4
5
6
7
8
9
10

const shape = {
  radius: 10,
  diameter() {
    return this.radius * 2;
  },
  perimeter: () => 2 * Math.PI * this.radius
};

shape.diameter()
shape.perimeter()

編寫高質量可維護的代碼之優化邏輯判斷

這篇主要是看不同寫法，不一定真的好

學習自(純紀錄自己學了甚麼，非營利)

https://juejin.im/post/6859125809655840776

嵌套優化

製造一個函數當他是紅色水果時打印出紅色水果，如果他是紅色水果數量又大於10打印數量大於10

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function supply(fruit, quantity) {
    const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
    // 条件 1: 水果存在
    if(fruit) {
        // 条件 2: 属于红色水果
        if(redFruits.includes(fruit)) {
            console.log('红色水果');
            // 条件 3: 水果数量大于 10 个
            if (quantity > 10) {
                console.log('数量大于 10 个');
            }
        }
    } else {
        throw new Error('没有水果啦!');
    }
}

01 - JavaScript Drum Kit

本文的代碼是看了Alex大大的JS30系列並搭配一些自身想法完成有興趣可以去yt搜尋Alex宅幹嘛

最終程式碼