对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 可放在浏览器上试试哦

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

上一篇:结合ssh谈MVC架构模式


下一篇:linux 文件内容查看工具介绍 ,tail less more cat 等 转:http://blog.csdn.net/carzyer/article/details/4759593