对js的基础语法总结(持续更新)

对js的基础语法总结

一、const、let、var 区别

变量提升在下方会有代码演示

	let	var	const
变量提升/预解析	❌	✔	❌
重复定义	❌	✔	❌
作用域	块级作用域	函数作用域	块级作用域
常量是否可变	✔	✔	❌
对象/数组是否可变	✔	✔	✔
需要初始化	❌	❌	✔

二、防抖与节流

1、防抖

例子：如同公交车，上来个人等2s保证安全在发车，如果等的期间还有人来，则重新等到安全

实现：

• 利用setTimeout作为定时器
• 当在定时器未消失时，再次触发 则会将定时器【清除】+【重做】=》重新计时间
• 由于setTimeout内部函数是做完后执行，因此要想立即执行 添加了callNow作为临时参数

function debounce(func,wait){
	let timeout;
	return function(){
		if(timeout) clearTimeout(timeout)	//若存在，则清空定时器
		let callNow = !timeout;			
		timeout = setTimeout(()=>{	//增加定时器
			timeout=null;							//时间到了，清除定时器
		},wait)
		if(callNow) func.apply(this)
	}
}

2、节流

例子：如同拿工资，你一次把工资取完，只有在公司打钱的那一天，卡里才能拿得到钱。你急着要钱，不好意思么有，你时间到了不去拿钱，之后去拿还能拿。

实现：

• 一样利用setTimeout作为定时器
• 当在定时器未消失时，不做操作
• 当在定时器不存在时，生成定时器，时间到了去执行，也可像防抖那样利用临时变量去实现立即调用

function throttle(func,wait){
	let timeout;
  return function(){
    if(!timeout){
    	timeout = setTimeout(()=>{	//增加定时器
    		timeout=null;							//时间到了，清除定时器
      	func.apply(this)
      },wait)
    }	
	}
}

三、变量提升+作用域

1、来一个开胃菜

//看一下下面输出什么
var length = 100
function f1(){
  console.log(this.length)
}
var obj = {
  x:10,
  f2: function (f1){
    f1();
    arguments[0]();
  }
}
obj.f2(f1,1)

//考点：预解析+作用域+arguments

懵了吧 我开始也是！！

(1) 先介绍arguments ->是函数内置参数

先！把下面代码放在浏览器运行一下

function a(){
  console.log(arguments)
}
a(1,2,3,4,'s','d')

• 即使你不接受形参 一样会将你的实参存在arguments中
• arguments是一个对象 {"0": 1,"1": 2,"2": 3, "3": 4,"4": "s", "5": "d"}
• 【注意】：arguments有作用域是它本身

(2) 逐层分析调用者&作用域

• 通过调用者确定作用域【注意arguments作用域是arguments本身】
• 无调用者 =》作用域是window
• 通过作用域确定this指向

function f1(){
  console.log(this.length)
}
var obj = {
  x:10,
  f2: function (f1){
    f1();						//无调用者 =》作用域window
    arguments[0]();	//无调用者 =》作用域arguments
  }
}
obj.f2(f1,1)				//调用者obj =》作用域obj

(3) 分析函数执行顺序

• 主函数 obj.f2(f1,1) 这没跑了 就是调用obj的f2
• 从而执行 //函数一 f1() //函数二 arguments[0]();
  • 此时这俩的作用域都是obj 因为通过上面的obj调用的
• 首先是第一个f1()=》console.log(this.length) 此时无调用者因此作用域指向window，获取到的length也就是全局中的100
• 第二个函数arguments[0]()=》f1() 此时无调用者，但是arguments有自己作用域因此作用域指向arguments，所以调用获取到的length是arguments的长度

因此最后答案是100 ,2 可放在浏览器上试试哦