前端覆盤專題(一)

1、基礎知識

1.var與let/const區別

1.做用域不一樣

var ：函數做用域

var定義的變量做用域爲包含它函數的局部變量，改變量在函數退出時被銷燬。(因此在函數內部用var定義的變量在函數外部是訪問不到的)

let和const:塊級做用域

let和const定義的變量做用域爲包含它的代碼塊。

2.var聲明的變量會變量提高，let和const聲明的不會

3.var能夠重複聲明一個變量，let和const重複聲明一個變量會報錯，const聲明變量的同時要賦初值。

4.let、const聲明的全局變量不會成爲window對象的屬性，var聲明的變量會

2.typeof

typeof 檢測值	返回值
未初始化、未聲明變量	undefined
boolean	boolean
string	string
number	number
object、null	object
function	object
symbol	symbol

typeof原理：

js 在底層存儲變量的時候，會在變量的機器碼的低位1-3位存儲其類型信息👉

000：對象

010：浮點數

100：字符串

110：布爾

1：整數

but, 對於 undefined 和 null 來講，這兩個值的信息存儲是有點特殊的。

null：全部機器碼均爲0

undefined：用 −2^30 整數來表示

因此，typeof 在判斷 null 的時候就出現問題了，因爲 null 的全部機器碼均爲0，所以直接被當作了對象來看待。

3.instanceof原理

每一個 JavaScript 對象均有一個隱式的 proto 原型屬性，而顯式的原型屬性是 prototype。instanceof原理就是先拿到右邊的prototype屬性，在依次檢查左邊原型鏈上的__prop__屬性，直到有相等的就返回true，直到null還未找到就返回false。

4.數值轉換

顯式轉換

將非數值轉換爲數值： Number()、ParseInt()、ParseFloat()

ParseInt()轉換規則： 從第一個非空格字符開始轉換，若是第一個轉換的字符不是數值、+、-則返回naN,直至字符串末尾，因此空字符串也會返回naN。

ParseFloat()轉換規則： 從第一個非空格字符開始轉換，若是第一個轉換的字符不是數值、+、-則返回naN,直至字符串末尾，因此空字符串也會返回naN，只有第一個小數點是有效的後面的都會忽略。

函數	參數	參數-->返回值	true/false	數值	null	undefined	字符串含數值	字符串含數值和+、-	字符串含浮點數	字符串含十六進制數	空字符串	字符串前面的都不含
Number()	任何數據類型		1/0	直接返回	0	naN	十進制數	十進制數	浮點數	十六進制數	0	naN
ParseFloat()	字符串		1/0	直接返回	0	naN	十進制數	十進制數	浮點數	十六進制數	0	naN
### 隱式轉換

換爲字符串：

顯式轉換

toString():null和undefined除外，每一個值都有toString()屬性。

string()轉型函數：null和undefined返回"null"和"undefined",其餘值調用toString()。

隱式轉換

用+給一個值加上一個" "

5. for..in 與 for..of

for in 和 for of 的異同點

比較	for..in	for..of
不一樣點	能夠遍歷普通對象 遍歷出數組的原型對象 能夠遍歷出數組自身屬性 遍歷出來的值是 key 不能夠遍歷 map/set 不能夠迭代 generators IE 支持	不能遍歷普通對象 不會遍歷出原型對象 不會遍歷自身屬性 遍歷出來的值是 value 能夠遍歷 map/set 能夠迭代generators IE 不支持
相同點	能夠遍歷數組 能夠 break 中斷遍歷	能夠遍歷數組 能夠 break 中斷遍歷

2、 手寫實現函數

1.instanceof

function myInstanceof (left, right) {
           const RigPro = right.prototype
           while (true) {
               if (left === null) {
                   return false
               }
               if (left.__proto__ === RigPro) {
                   return true
               }
               left = left.__proto__
           }
       }
複製代碼

2.new關鍵字

new關鍵字作了什麼：

1.在內存中建立一個新對象

2.將這個新對象內部的__proto__屬性賦值爲構造函數的prototype屬性。

3.構造函數的內部的this被賦值爲這個新對象（即this指向新對象）

4.執行構造函數內部的代碼（給新對象添加屬性）

5.若是構造函數返回非空對象，則返回該對象；不然，返回剛建立的新對象。

function myNew (func, ...args) {
            // myNew函數接收兩個參數：構造函數，構造函數所須要的參數
            const newObj = {}
            newObj.__proto__ = func.prototype
            const obj = func.call(newObj, ...args)
            if( ( typeof obj == 'object' || typeof obj == 'function' )&& typeof obj !== 'null' ) {
                return obj
            }
            return newObj
        }
        function Person(name, age) {
            this.name = name
            this.age = age
        }
       const p1 =  myNew(Person, 'lili', 18)
       console.log(p1);
複製代碼

3.call函數

Object.prototype.myCall = function (context, ...args) {
            // 當context爲null或undefined時，將context賦值爲window
            context = context || window
            // 新建一個fn屬性，用來保存當前調用這個函數的this
            context.fn = this
            const result = context.fn(...args)
            delete context.fn
            return result
        }
        const p1 = {
            add: function add (a, b) {
                return a + b
            }
        }
        console.log(p1.add.myCall(p1, 1, 2)); 
複製代碼