一、函数补充

1、作用域：2种

	1、全局：随处可用，可以被反复使用。缺点：容易被污染

	2、函数：只能在函数内部调用时使用，不会被污染。缺点：一次性的，是会自动释放的

2、函数的执行原理

       1、程序加载时：
	   创建执行环境栈（ECS）：保存函数调用顺序的数组
	   首先压入全局执行环境（全局EC）
	   全局EC引用着全局对象window
	   window中保存全局变量和全局函数

	2、定义函数时
	   创建出函数对象：封装代码段
	   在函数对象中有一个scope（作用域）属性：记录着此函数来自的作用域是哪里
	   全局函数的scope都是window

	3、调用前
	   在执行环境栈（ECS）压入新的EC（函数的EC）
	   创建活动对象（AO）：保存着本次函数调用时用到的局部变量
	   在函数的EC中有一个scope chain（作用域链）属性引用着AO
	   AO有一个parent属性是函数的scope引用着的对象

	4、调用时：正是因为前面三步，我们才有了变量的使用规则：优先使用局部的，局部没有找全局，全局没有就报错

	5、调用完：函数的EC会出栈，AO自动释放，局部变量也就自动释放了

***两链一包：
	作用域链：以函数的EC的scope chain属性为起点，经过AO，逐级引用，形成的一条链式结构
	    作用：查找变量，带来了变量的使用规则：优先使用局部的，局部没有找全局，全局没有就报错

3、闭包

   1、*****闭包：我们发现全局和函数都有缺点，希望保护一个【可以反复使用的局部变量】的一种词法结构 - 其实还是函数
   何时使用：希望保护一个【可以反复使用的局部变量】的时候
   如何使用：
	1、两个函数进行嵌套
	2、外层函数创建出受保护的变量
	3、外层函数要return出内层函数
	4、内层函数要去操作受保护的变量

		function f1(){
			创建的受保护的变量
			return function(){
				操作受保护的变量
			}
		}

   强调：
	1、判断是不是闭包，有没有两个函数嵌套，返回内层函数，内层函数在操作受保护的变量
	2、外层函数调用几次，就会创建几个闭包，受保护的变量就有了几个副本
	3、同一次外层函数调用，返回的内层函数，都是在操作同一个受保护的变量

   缺点：受保护的变量，永远不会被释放，使用过多，会导致内层泄漏 - 不可多用
   问题：应该在哪里用呢？ - 防抖节流
	1、三个事件需要防抖节流
		1、elem.onmousemove - 鼠标移动事件
		2、input.oninput - 每次输出/改变都会触发
		3、window.onresize - 每次窗口的大小发生变化就会触发

		公式：
		
		function fdjl(){
			var timer=null;//2
			return function(){//3、
				if(timer){clearTimeout(timer);timer=null}//关闭之前的定时器
				timer=setTimeout(function(){//开启定时器，等1s才执行
					//操作由你来书写
				},1000)
			}
		}
		
		var result=fdjl();

二、Object对象

1、封装：创建自定义对象：3种

	1、*直接量方式：适合创建单个对象
		var obj={
			"属性名":属性值,
			...
			"方法名":function(){},
			...
		}
	   强调：1、其实属性名和方法名的双引号可以省略不写 - 暂时建议你加上为了以后学习的json数据格式
		 2、访问对象的属性和方法
			*obj.属性名		===		obj["属性名"]
			*obj.方法名();		===		obj["方法名"]();
			建议使用.访问属性和方法，更简单
			***js中一切都是对象，一切对象的底层都是hash数组
		 3、访问到不存在的属性，返回undefined
		 4、可以随时随地的添加新属性和新方法
		 5、希望获取出对象所有的东西：遍历：for in，obj[i]才能拿到
		 6、***如果你希望在对象的方法里使用对象自己的属性：写为this.属性名
			*****难点：this的指向：
				1、单个元素绑定事件 this->这个元素
				2、多个元素绑定事件 this->当前触发事件的元素
				3、函数中this->谁在调用此方法，this就是谁
				4、定时器中this->window
				5、箭头函数this->外部对象
				6、构造函数中this->当前正在创建的对象

	2、预定义构造函数方式：var obj=new Object();//空对象	-   垃圾
			//需要自己后续慢慢追加属性和方法
			obj.属性名=属性值;
			obj.方法名=function(){};

	以上两个方法都有一个缺陷：一次只能创建一个对象

	3、自定义构造函数方式：2步
		1、创建自定义构造函数
			function 类名(name,age,salary){
				this.name=name;
				this.age=age;
				this.salary=salary;
			}

		2、调用构造函数创建出对象
			var obj=new 类名(实参,...);

2、继承

1、*****继承：父对象的成员（属性和方法），子对象可以直接使用
	为什么：代码重用！节约内存空间！提升网站性能！
      何时继承：只要多个子对象公用的属性和【方法】，都要集中定义在父对象中

2、***如何找到父对象（原型对象）：保存一类子对象共有属性和共有方法的父对象
	1、对象名.__proto__;//必须先有一个对象
	2、构造函数名.prototype;//构造函数名：Array/Object/String/Number/Boolean/RegExp/Date...几乎人人都有，除了Math

3、两链一包：作用域链（查找变量）、原型链（查找属性和方法）、闭包（保护一个反复使用的局部变量）
	每个对象都有一个属性：.__proto__，可以一层一层的找到每个人的父亲，形成的一条链式结构，我们就称之为叫做原型链
	可以找到所有父对象的成员（属性和方法），作用：查找找共有属性和共有方法
	最顶层是Object的原型，上面放着toString方法，所以人人都可以使用toString
	JS万物皆对象

4、有了原型对象，设置共有的属性和方法
	原型对象.属性名=属性值
	原型对象.方法名=function(){};

	
		

5、如何实现自定义继承
	1、两个对象之间继承：子对象.__proto__=新父对象
	2、多个对象之间继承：构造函数名.prototype=新父对象
		时机：应该在开始创建对象之前设置好继承关系

三、ES5和ES6

1、ES5：

1、保护对象：保护对象的成员（属性和方法）

  如何保护：
1、四大特性 - 每一个属性或方法都有四大特性
	如何设置四大特性：
		Object.defineProperties(obj,{
			"属性名":{
				value: 实际保存值的地方,
				writable: true/false,//开关：控制着这个属性是否可以被修改
				enumerable: true/false,//开关：控制着这个属性是否可以被for in循环遍历到
				configurable: true/false,//开关：控制着这个属性是否可以被删除
			}
		})

2、三个级别：
	1、防扩展：禁止给对象添加新属性
		Object.preventExtensions(obj);

	2、密封：禁止给对象添加新属性和删除属性
		Object.seal(obj);

	3、冻结：禁止给对象添加新属性和删除属性和修改属性
		Object.freeze(obj);

	其实保护对象对我们程序员并不重要：为什么
		1、如果你用的是面向过程，你保护个屁
		2、别人基本不可能知道我们的对象名叫什么
		3、前辈们都没有保护，你保护个啥

	学习的目的：应付鄙视和面试

2、*****数组的新的API：3组6个

1、判断：判断结果一定是一个布尔值
	every：每一个 - 要求每一个元素都要满足，结果才为true，只要有一个不满足，结果则为false - 类似&&：碰到false就不会再执行后续操作了
		语法：arr.every(function(val,i,arr){
				//val - 当前值
				//i - 当前下标
				//arr - 数组本身
				return 判断条件
		      })

	some：有一些 - 要求每一个元素都不满足，结果才为false，只要有一个满足，结果则为true - 类似于||：碰到true就不会再执行后续操作了
		语法：arr.some(function(val,i,arr){
				return 判断条件
		      })

2、遍历：将数组中每一个元素取出来执行 相同 或 相似的操作
	forEach：遍历数组，直接修改原数组
		语法：arr.forEach(function(val,i,arr){
				直接做操作
		      })

	map：遍历数组，不修改原数组，返回一个新数组
		语法：var newArr=arr.map(function(val,i,arr){
				return 操作;
		      })

3、汇总和过滤：
	过滤：筛选出自己想要的，但是不会修改原数组
		语法：var newArr=arr.filter(function(val,i,arr){
				return 判断条件;
		      })

	汇总：把数组中的每个元素都汇总到一起
		语法：var result=arr.reduce(function(prev,val,i,arr){
				return prev+val;
		      },基础值)

以上6个API的底层都是for循环，目的 - 简化for循环

3、Object.create()：希望根据父对象创建子对象，继承自动设置完毕

语法：var 子对象=Object.create(父对象,{
		"自有属性":{四大特性},
		...
      })

4、严格模式：

开启：在你的任何作用域的顶部都可以加上这句话："use strict"
功能：1、禁止给未声明的变量赋值 - 解决了全局污染
      2、静默失败升级为错误

5、*****call/apply/bind：不是自己的方法也可以使用

call/apply：【临时替换函数中的this】 - 借用
	语法：函数名.call(借用的对象,实参,...); - 单独传入每一个实参
	      函数名.apply(借用的对象,[实参,...]); - 只能传入一个实参，是一个数组，但是其实apply也会悄悄的将数组打散
	强调：call/apply，相当于立刻调用函数，立刻执行

bind：【永久替换了函数中的this】 - 买
	3件事：
	1、创建了一个和原函数功能完全相同的新函数
	2、将新函数中的this永久的绑定固定为了指定的对象，别人借不走
	3、将新函数中的部分参数永久固定
	语法：var 新函数=原函数.bind(指定对象,永久固定参数,...); - 不是立刻执行，需要自己调用
	强调：bind绑定的新函数是没有办法被call/apply借走的

个人更推荐：call/apply - 借，白嫖
固定套路：
  1、Math.max/min.apply(Math,arr)
  2、Object.prototype.toString.call/apply(arr)==="[object Array]"
  3、***类数组转为普通数组：保存一下=Array.prototype.slice.call/apply(类数组)

2、ES6：简化了语法 - 变化较大

1、*模板字符串：可以再字符串中放入变量，不需要在做字符串的拼接了，简化了输入法的切换，${}还实现了一个简单的js环境
	语法：`我的名字叫${name}`

2、*块级作用域：尽量以后创建变量【优先】使用let关键字
	let 变量名=值;
	作用：
	  1、禁止了声明提前
	  2、添加了块级作用域：一个{}就是一个块
	  3、记录着当前触发事件的元素的下标

3、***箭头函数：简化回调函数
	公式：去掉function，在()和{}之间添加=>，如果形参只有一个，省略()，如果函数体只有一句话，省略{}，如果函数体只有一句话并且是return，return和{}都省略
	特殊：千万不要将事件也简化为箭头函数 - this会失效 - 暂时

4、for of循环 - 垃圾
	for(var v of arr){
		v;//当前元素
	}

	缺点：1、不能修改原数组，只能返回新数组
	      2、不支持hash数组，不支持对象

四、dom

1、什么是DOM：Document Object Model（文档对象模型）

将每一个标签/元素/属性/文本/注释，看做了一个DOM节点/元素/对象（提供了操作这些东西的属性和方法）

DOM：原本是可以操作一切结构化文档的 HTML 和 XML，后来为了方便各类开发者分为了3个部分

 1、核心DOM：【无敌】，既可以操作HTML 和 XML
	    缺点：API比较繁琐

2、HTML DOM：只能操作HTML，API简单，缺点：比如属性部分，只能操作标准属性，不能操作自定义属性

3、XML DOM：只能操作XML，XML基本已经被淘汰了 - 现在最流行的数据格式json代替了

开发建议：优先使用HTML DOM，HTML DOM实现不了的时候在用核心DOM进行补充

2、DOM树：树根：document - 不需要我们创建，一个页面只有一个document：由浏览器的js解释器自动生成 可以通过数个你找到每一个DOM节点/元素/对象，提供了很多很多的API

3、每个DOM元素都有三大属性：

1、xx.nodeType：描述节点的类型
	document节点：9
	元素节点：1
	属性节点：2
	文本节点：3

	以前有用：判断xx是不是一个页面元素 - 因为以前我们找元素的方法和大家现在不一样

2、xx.nodeValue：描述节点值，说白了就是获取属性值
	以前有用：因为我们获取一个属性值没有现在这么容易

3、***xx.nodeName：描述节点名称 - 判断xx是什么标签 - 后期搭配上事件委托（利用冒泡）
	注意：返回的是一个全大写的标签名

4、*通过 关系 获取元素

父：xx.parentNode;
子：xx.children; - 集合
第一个儿子：xx.firstElementChild;
最后一个儿子：xx.lastElementChild;
前一个兄弟：xx.previousElementSibling;
后一个兄弟：xx.nextElementSibling;

5、*****递归：简单来说就是函数中，又一次调用了函数自己，迟早有一天会停下来

何时使用：遍历DOM，专门用于【遍历层级不明确】的情况 - 不光可以遍历层级不明确的DOM树，还可以遍历层级不明确的数据
如何使用递归：2步
	function 函数名(root){
		1、第一层要做什么操作就直接做

		2、判断他有没有下一级，如果有下一级再次调用此方法，但是传入的实参是下一级		
	}

	函数名(实际的根节点)

	算法：深度优先！优先遍历当前节点的子节点，子节点遍历完毕才会调到兄弟节点
	缺点：同时开启大量的函数调用，消耗能存，只有一个情况采用：【遍历层级不明确】

	递归 vs 循环
	递归：优点：直观、易用
	      缺点：性能较低
	循环：优点：性能高，几乎不占内存
	      缺点：难得一匹

6、遍历API：【遍历层级不明确】的情况：TreeWalker：一个在DOM树上行走的人

缺点：1、会自动跳过根节点的操作
      2、只能遍历层级不明确的DOM树，而不能遍历层级不明确的数据
如何：固定公式：
1、创建tw对象：
	var tw=document.createTreeWalker(根元素,NodeFilter.SHOW_ALL/SHOW_ELEMENT);

2、反复调用nextNode方法找到没一个元素
	while((node=tw.nextNode())!==null){
		node要做什么操作
	}

7、*API直接查找元素

1、按照HTML的特点去查找元素

1、id：var elem=document.getElementById("id值")
2、class/标签名：var elems=document.getElementsByClassName/TagName/Name("class/标签名");
建议：表单控件元素尽量可以不写class，因为必须要写name

2、按照CSS的选择器去查找元素

1、单个元素：var elem=document.querySelector("任意css选择器");
	强调：万一选择器匹配到多个元素，只会返回第一个
	      没找到null

2、多个元素：var elems=document.querySelectorAll("任意css选择器");
	强调：找到了集合，没找到空集合
	更适合做复杂查找

面试题：getXXX 和 querySelectorXXX 有什么区别？
	返回结果不同：
		1、getXXX：HTMLCollection - 是一个动态集合
		2、queryXXX：nodeList - 是一个静态集合

		动态集合：根据DOM树的改变，动态集合也会悄悄改变，每一次修改DOM树，getXXX都会悄悄再次查找元素
		    缺点：每次都会悄悄重新查找，效率较低，不能使用forEach

		静态集合：每次修改DOM树，静态集合都不会发生变化，只会认准你找的时候的第一次找到的元素
		    优点：每次不会悄悄重新查找，效率较高，支持forEach

3、操作元素：

1、元素的内容：3个

1、*innerHTML：获取 和 设置元素的内容，并且识别标签 - 没有兼容性问题，老IE也支持
	获取：elem.innerHTML;	-   往往用于判断
	设置：elem.innerHTML="新内容"	-   添加/修改

2、textContent：获取 和 设置元素的文本，不能识别标签 - 有兼容性问题老IE不支持
	获取：elem.textContent;	-   往往用于判断
	设置：elem.textContent="新文本"	-   添加/修改
	解决：innerText - 小三上位了，此方法本来是属于老IE的，但是现在主流浏览器也支持

3、*value：获取 和 设置input的内容
	获取：input.value;	-   往往用于判断
	设置：input.value="新文本"	-   添加/修改

2、元素的属性：

1、*获取属性值： - 往往用于判断
	核心DOM：elem.getAttribute("属性名");	-   虽然API比较繁琐，但是无敌的

	HTML DOM：elem.属性名	  -	虽然简单，但是不能操作自定义属性

2、*设置属性值： - 添加/修改
	核心DOM：elem.setAttribute("属性名","属性值");	-   虽然API比较繁琐，但是无敌的

	HTML DOM：elem.属性名="属性值"	  -	虽然简单，但是不能操作自定义属性

3、删除属性值：
       *核心DOM：elem.removeAttribute("属性名") - 完整删除整个属性节点

	HTML DOM：elem.属性名=""	  -  删不干净，只能删掉属性值，属性节点依然存在，而有的属性，只需要写出属性名就已经有作用（比如：href、disabled、readonly）了

4、判断有没有 - 垃圾
	elem.hasAttribute("属性名"); - 结果是一个布尔值，但是没有用，只能判断有没有，不能判断具体属性值是什么
	真正推荐判断，你还是使用获取属性值

建议：以后优先使用HTML DOM，HTML DOM实现不了在用核心DOM补充
	小心：1、class要写为className
	      2、不能操作自定义属性

3、元素的样式：

1、内联样式：
	优点：1、优先级高	2、不会牵一发动全身
	获取：elem.style.css属性名;
	设置：elem.style.css属性名="css属性值";

	特殊：1、css属性名,把横线去掉换成小驼峰命名法
	      2、获取也只能获取内联样式 - 小缺点

2、样式表：
	//1、获取你想要操作的样式表
	var sheet=document.styleSheets[i];
	//2、获取所有样式规则
	var rules=sheet.cssRules;
	//3、数出 你需要操作的某个样式规则
	var rule=rules[i];
	//4、对此规则做获取或者设置
	console.log(rule.style.background);
	rule.style.background="purple";

创建元素：2步

1、创建空标签：var elem=document.createElement("标签名");
	 比如：var a=document.createElement("a");

2、添加必要的属性 和 事件
	elem.属性名="属性值"
	elem.on事件名=function(){操作}

以上两步只是在js内存中创建出了元素，还需要渲染到DOM树上

渲染页面方式：3种

   *1、父元素.appendChild(新);//新元素会追加到父元素中当最后一个儿子
2、父元素.insertBefore(新,已有子元素);//新元素会追加到父元素中当儿子，会插到已有子元素的前面
3、父元素.replaceChild(新,已有子元素);//新元素会替换到父元素中当儿子，会替换已有子元素

删除元素：elem.remove();

HTML DOM常用对象：HTML DOM就是对核心DOM进行了简化：

1、Image对象：图片对象：
   简化了创建方式：var img=new Image();
   不是人人都能简化创建，只有个别可以

2、Form对象：表单对象：
   简化了查找元素：var form=document.forms[i];//获取页面上的第i个form元素
   简化了查找表单控件元素：var inp=form.elements[i]//获取此form表单中的第i个表单空间元素

3、*Select对象：
	属性：1、select.options === select.children 获取到select下面的所有option
	      2、*select.selectedIndex;//获取到选中项的下标


	方法：1、*select.add(option);//将option上树
	      2、select.remove(i);//删除下标为i的option

    *专属事件：onchange - 选中项发生改变后才会触发

4、*Option对象：
   简化了创建方式：var opt=new Option("innerHTML","value");
   建议你，如果以后希望创建出opt并且放到select中：一句话完成4个操作
	select.add(new Option("innerHTML","value"))