必需知道的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