必需知道的javaScript基礎知識

1.閉包

MDN的解釋：閉包是函式和宣告該函式的詞法環境的組合
百度解釋：閉包就是能夠讀取其他函式內部變數的函式

1.1 閉包的作用：隱藏變數

• 可以讀取到其他函式內部的變數
• 可以將變數儲存在記憶體中

1.2 實現一個節流函式

節流函式原理：當持續觸發事件時，保證一定時間段內只呼叫一次事件處理函式(縮減執行頻率)

const throttle=(fn,delay=500)=>{
        //私有變數flag
	let flag=true
	return (...args)=>{
		if(!flag)return
		flag=false
                setTimeout(()=>{
		fn.apply(this,args)
		falg=true
	},delay)
    }
}function fn(){
    console.log('fn')
}

//讀取其他函式內部的變數
throttle (fn)

複製程式碼

• 瀏覽器的縮放（resize）
• 拖拽時固定時間內只執行一次，防止超高頻次觸發位置變動
• 避免短時間內多次觸發動畫引起的效能問題

那麼問題來了節流函式和防抖函式有什麼區別呢？

const debounce=(fn,delay)=>{
	let timer=null
	return (...args)=>{
		 clearTimeout(timer)
		timer=setTimeout(()=>{
		fn.apply(this,args)
		},delay)
	}
}


複製程式碼

1.3 節流函式和防抖函式有什麼區別呢？

• 防抖是按照最後一次觸發為下一次事件執行的時間計算點，
  前面的沒滿足間隔時間的都從最後這一次開始來決定什麼時候執行延時事件；
• 節流函式是按照第一次觸發事件作為時間計算點，後面沒到間隔時間的事件都忽略

2.原型鏈

在javascript中，每個物件都有一個指向它的原型(prototype)物件的內部連結。每個原型物件又有自己的原型，直到某個物件的原型為null為止，組成這條鏈的最後一環

2.1關於繼承

拷貝繼承

function Person() { }
Person.prototype.age = 10
Person.prototype.sex = "男"
Person.prototype.height = 100
Person.prototype.play = function () {
    console.log("玩的開心");
}
var obj2 = {}
for (var key in Person.prototype) {
    obj2[key] = Person.prototype[key]
}
obj2.play()



複製程式碼

2.2 淺拷貝

 淺拷貝：拷貝就是複製。就相當於把一個物件中的所有的內容，複製一份給另一個物件

直接複製，或者說，就是把一個物件的地址給了另一個物件，他們指向相同，兩個物件

之間有共同的屬性或者方法，就都可以使用

var obj1 = {
    age: 10,
    sex: "男",
    car: ["賓士", "寶馬", "特斯拉", "蘭博基尼"],
    dog: {
        name: "跳跳",
        age: 5,
        color: "黑白色"
    }
}
//另一個物件
var obj2 = {}
//寫一個函式：把一個物件的屬性複製到另一個物件中 淺拷貝
//把a物件中的所有的屬性複製到物件b中
function extend(a, b) {
    for (var key in a) {
        b[key] = a[key]
    }
}
extend(obj1, obj2)
console.dir(obj2);
console.dir(obj1);


複製程式碼

2.3 深拷貝

深拷貝：把一個物件中所有的屬性或者方法，一個一個的找到，並且在另一個物件中開闢相應的空間

一個一個的儲存到另一個物件中

簡單實現const newObj=JSON.parse(JSON.stringify(oldObj))

var obj3 = {}
//把物件a中的所有的資料深拷貝到物件b中
function shenExtend(a, b) {
    for (var key in a) {
        //先獲取a物件中每個屬性的值
        var item = a[key]
        //判斷這個屬性的值是不是陣列
        if (item instanceof Array) {
            //如果是陣列，那麼在b物件中新增一個新的屬性，並且這個屬性值也是陣列
            b[key] = []
            //呼叫這個方法，把a物件中這個陣列的屬性值一個一個的複製到b物件的這個陣列屬性中
            extend(item, b[key])
        } else if (item instanceof Object) {
            //如果是物件型別，那麼在b物件中新增一個新的屬性，並且這個屬性值也是空陣列
            b[key] = {}
            //呼叫這個方法，把a物件中這個物件的屬性值一個一個的複製到b物件的這個屬性物件中
            extend(item, b[key])//把資料塞進去
        } else {
            //如果是普通資料型別，就直接複製
            b[key] = item
        }
    }
}
shenExtend(obj1, obj3)
console.dir(obj3);


複製程式碼

3.遞迴

程式呼叫自身的程式設計技巧稱為遞迴（ recursion）

簡單遞迴實現

/**
 *遞迴實現： 求n個數字的和
 */
function getSum(number) {
    if (number == 1) {
        return 1  //最後一次.getSum(1)執行結果為1，開始往外走 2+getSum(1) 結果2+1 ……
    }
    return number + getSum(number - 1)
    //2.執行5+getSum(4),此時等待，程式碼不計算， 進入函式number=4……
}
console.log(getSum(5));  //1.進去函式 number=5



複製程式碼