Object

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

2.如何找到父对象原型（原型对象）：保存一类子对象共有属性】和共有方法的父对象：2种 a.子对象__proto__;前提必须现有一个对象 b.构造函数名：prototype;//构造函数名，几乎人人都有，除了Math/undefind/Null 3.面试题：两链一包：作用域链：查找变量闭包：保护一个可以反复使用的局部变量的一种词法结构原型链：每个对象都有一个属性：proto，可以一层一层的找到每个人的父亲，形成的一条链式结构，就称之为叫做原型链可以找到所有父对象的成员（属性和方法），作用：查找属性和【方法】最顶层是Object的原型，上面放着我们眼熟的toString，怪不得人人都可以使用toString JS种万物皆对象

4.有了原型对象，设置共有属性和共有方法 a.原型对象.属性名=属性值 b.原型对象.方法名=function（）{}

笔试题

1.判断自由和共用：

 1、判断自有：
			obj.hasOwnProperty("属性名");
				如果结果为true，说明一定是自有，如果结果为false，可能是共有可能是没有
2、判断共有：
			if(obj.hasOwnProperty("属性名")==false&&"属性名" in obj){//in 会自动在整条圆形脸上进行查找，找到结果为true，找不到结果为false
				说明是共有
			}else{
				说明是没有
			}

 完整版公式：
			if(obj.hasOwnProperty("属性名")){
				自有
			}else{
				if("属性名" in obj){
					共有
				}else{
					没有
				}
			}

***笔试题2：修改/删除自有和共有

		自有：修改：obj.属性名=新值;
		           删除：delete obj.属性名;
		
		共有：修改：obj.__proto__.属性名=新值;
		           删除：delete obj.__proto__.属性名;

			共有千万不要操作本地：
				修改：会在本地添加同名属性
				删除：没有效果






 笔试题3：如何为老IE的数组添加indexOf方法：如何为一类人添加某个方法
		原理：
		if(Array.prototype.indexOf===undefined){//老IE
			Array.prototype.indexOf=function(key,starti){
				starti===undefined&&(starti=0);
			 	for(var i=starti;i<this.length;i++){
					if(key==this[i]){
						return i;
					}
				}
				return -1;
			}
		}

***笔试题4：判断x是不是一个数组：4种方式 1、判断x是不是继承自Array.prototype： Array.prototype.isPrototypeOf(x);

		2、判断x是不是由Array这个构造函数创建的
			x instanceof Array

		3、只有数组可用：ES5提供的一个叫Array.isArray(x);

		4、最麻烦：输出【对象的字符串】形式
		     在Object的原型上保存着最原始的toString方法
		     最原始的toString方法输出：[object 构造函数名]
		     ***多态：子对象觉得父对象的成员不好用，在本地定义了同名成员，覆盖了父对象的成员
		     如果我们这道题能够跳过数组的爸爸，拿到数组的爷爷上面的toString也就能判断了
		     固定套路：借用：Object.prototype.toString.apply(x);

***笔试题5：实现自定义继承： 1、两个对象之间的继承：子对象.proto=父对象

			2、多个对象之间设置继承：
				构造函数名.prototype=父对象
				注意时机：一定要在创建对象之前

day16

Es5新属性：一、保护对象的得两种方式：四大特性： value:1001//实际保存值得地方 writable：ture //开关控制着此属性是否被修改 enumerable：turn //开关控制着此属性是否可以被 for in遍历； configurable:tuen // 控制着此属性是否被删除如何设置4大属性： Object.defineProperties(对象名，{“属性名”：{四大特性}}) 二、三个级别 1.防扩展：禁止给对象添加属性 Object.preventExtensions(obj); 2.密封：禁止给对象添加属性和删除元素 Object.seal（obj） 3.冻结：禁止给对象添加属性和删除元素和修改元素 Object.freeze（obj）；

****## 数组的新API

判断

every: (每一个)：要求每一个元素都要满足我们的条件，结果才为turn，只要一个不满足就为false 语法： var bool=every(function(val,i,arr){ return 判断条件； })

例：arr【1,2,3,4,5，】//判断数组里面数字是不是偶数 var bool=every（function（val,i,arr）{ for(var i=0;i<this.length;i++){ return val%2==0} }） console.log（bool）//false

val：当前元素；i:当前元素的下标；arr：数组本身

some：（有一些）要求只要一个人元素满足，结果为turn，全部都不满足就为false

语法：var bool=arr.some(functin(val,i,arr){ return 判断条件 }) //是否包含偶数 // var arr1=[1,2,3,4,5]; // var arr2=[2,4,6,8,10]; // var arr3=[1,3,5,7,9];

	// console.log(
		// 	arr1.some(val=>val%2==0)
		// )
		// console.log(
		// 	arr2.some(val=>val%2==0)
		// )
		// console.log(
		// 	arr3.some(val=>val%2==0)

遍历

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

var arr[1,2,3,4,5] arr.forEach(function(var,i,arr){ arr[i]*=2 }) console.log(arr)

map:遍历数组，不修改原数组，返回一个新数组 var newArr= arr.map(function(){ return 操作 )

汇总和过滤

过滤：过滤不会修改原数组，但是会得到过滤出来的新数组

var subArr=arr.filter(function(val,i,arr){ return 判断条件 }) var arr=[1,2,3,4,5,6];

// var subArr=arr.filter(function(val,i,arr){ // return val%2==0; // }) // // console.log(arr); // console.log(subArr);

汇总：把数组每一个元素混合在一起 var sum=arr.redu(function(prew,val,i,arr){ return prew+val })

ES6 call/apply/bind；不是自己的方法也可以使用；call apply 临时替换了函数中的this 语法：函数名.call(借用的对象，实参)；单独传入每一个实参函数名.apply（借用的对象，ARR），只能传入一个实参，是一个数组 apply会悄悄打撒数组立刻调用立刻执行

bind：永久替换函数中的this 1.创建了一个和原函数完全相同功能的新函数 2.将新函数中的this永久绑定为指定对象，别人借不走 3.将函数中的部分参数永久固定语法： var 新函数=原函数.band（指定对象，永久实参，。。。）不是立即执行，需要调用

固定套路：
   1.Math.max/min.apply(Math arr);
   2.Object.prototype.toString.call/apply(类数组)

day17找元素和找数据

1、什么是DOM：Document Object Model（文档对象模型） - 操作HTML文档将每个元素/标签/文本/属性/注释都会看作是一个DOM节点/元素/对象

面试题：HTML/XHTML/DHTML/XML?
1、HTML - 网页
2、XHTML - 更严格的网页
3、DHTML - Dynamic：动态的网页，其实并不是新技术，也不是新概念，而是现有技术的一个整合统称：让我们的网页再离线版也能具有动态效果
		DHTML:HTML+CSS+JS
4、XML - 全部自定义，数据格式：淘汰了：JSON数据格式

DOM：原本是可以操作一切结构化文档的 HTML 和 XML，后来为了方便各类开发者分为了3个方向 1、核心DOM：【无敌】，既可以操作HTML也可以操作XML 缺点：API比较繁琐，getAttribute/setAttribute()

2、HTML DOM：只能操作HTML，API简单：缺点：自定义的东西操作不了

3、XML DOM：只能操作XML - 不会学习他

开发建议：优先使用HTML DOM，HTML DOM实现不了再用核心DOM补充

、DOM树：树根：document - 不需创建，一个页面只有一个document，由js解释器自动创建作用：通过树根，可以找到想要的DOM元素/节点/对象

3、每个DOM元素都有三大属性： 1、elem.nodeType：描述节点类型 document 节点：9 element 节点：1 attribute 节点：2 text 节点：3

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

2、elem.nodeValue：获取【属性节点】的值

3、***elem.nodeName：获取节点名称/标签名注意：返回的是一个全大写组成的标签名

4、*通过关系获取元素父：xx.parentNode 子：xx.children - 只能找到儿子第一个儿子：xx.firstElementChild; 最后一个儿子：xx.lastElementChild; 前一个兄弟：xx.previousElementSibling; 后一个兄弟：xx.nextElementSibling;

*****递归：简单来说就是函数中再次调用了函数本身，迟早有一天会停下来何时使用：遍历DOM树，专门用于【遍历层级不明确】的树状结构如何使用： function 函数名(根){ 1、第一层要做什么直接做 2、判断它有没有下一级，如果有下一级，则再次调用此函数，但是传入的实参是自己的下一级 } 函数名(实际的根)

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

递归 vs 循环递归：优点：直观，易用缺点：性能较差循环：优点：性能较好缺点：难得一批

遍历层级不明确的API：TreeWalker：一个在DOM树上行走的人缺点：只能遍历层级不明确的DOM树，不能遍历层级不明确的数据如何使用：2步 1、创建TW var tw=document.createTreeWalker(根元素,NodeFilter.SHOW_ELEMENT) 2、反复调用tw的nextNode函数找到节点 while((node=tw.nextNode())!=null){ node要干什么 }

7、*直接找元素： 1、通过HTML的一些特点找元素你会的：id/class/标签新的：通过name找元素：var elems=document.getElementsByName("name值") 2、通过css选择器查找元素：2个方法 - 更适合用于复杂查找（多句才能找到最终元素） 1、var elem=document.querySelector("任意css选择器"); 只会找到一个元素，如何同时匹配多个，也只会返回第一个没找到null 2、var elem=document.querySelectorAll("任意css选择器"); 找到了是一个集合没找到是一个空集合面试题：getXXXX和queryXXXX的区别？返回的结果不一样： 1、getXXXX：返回的是一个动态集合HTMLCollection 特点：每一次DOM树修改过后，js都会悄悄的再次查找元素，保证数据和页面对应，效率相对较低 2、queryXXX：返回的是一个静态集合Nodelist 特点：只管查找的一次找出来的结果，后续DOM树的修改，我们的数据也不会变化，效率相对较高优点：1、查找简单 2、还支持forEach

day18 1、创建元素&渲染页面：3步

1、先创建空标签
	var elem=document.createElement("标签名");
	
2、为其添加必要属性和事件
	elem.属性名="属性值";
	elem.on事件名=function(){操作}

3、渲染DOM树/页面：3种
                *1、父元素.appendChild(elem);//elem追加到父元素里面，当最后一个儿子
	2、父元素.insertBefore(elem,已有子元素);//elem追加到父元素里面，插入在已有子元素的前面 - 影响其他元素的下标，不推荐
	3、父元素.replaceChild(elem,已有子元素);//elem追加到父元素里面，新元素替换掉已有子元素 - 不推荐

2、删除元素：elem.remove();

HTML DOM：简化核心DOM开发，核心语法太繁琐，提供了一些常用的对象 1、image对象：垃圾，仅仅只是简化了创建部分创建：var img=new Image(); - 不是人人都可以简化为构造函数创建方式

2、form对象：垃圾，仅仅只是简化了查找部分
	查找form元素：var form=document.forms[i];
	以及找表单控件：var inp=form.elements[i];

3、*select对象：牛逼：提供了2个属性，2个方法，1个事件
	属性：
		1、select.options === select.children; 获取select里面的所有的option
		2、*select.selectedIndex - 获取当前选中项的下标，一定是搭配联动一起使用

	方法：
		1、*sel.add(option); - 完全相当于appendChild
		2、elem.remove(i); - 当时当remove删除元素出现过后，他就当场淘汰了

	专属事件：onchange - 选中项发生了变化才会触发

4、*option对象：仅仅只是简化了创建部分
	创建：var opt=new Option("innerHTML","value")

	一句话完成4个操作：sel.add(new Option("榴莲","榴莲"));
		1、创建了空的option	
		2、为option设置了innerHTML
		3、为option设置了value
		4、上树

js笔记

Object

笔试题

day16

判断

遍历

汇总和过滤

day17找元素和找数据

day18 1、创建元素&渲染页面：3步