JS干货分享

JS

 

3.js是一门脚本语言、解释性语言，基于对象、是一门弱性语言。

4.js的组成：ECMAScript 、DOM文档对象模型（Document object model）、BOM浏览器对象模型（Browser object model）。
5.js引入方式 ：内嵌式、行内式、外联式。
外联式：用script标签src 引入。
6.1. 如果script标签是引入外部js文件的作用，那么这对标签中不要写任何的js代码，如果要写，重新写一对script标签，里面写代码。
2. 在一对script的标签中有错误的js代码,那么该错误的代码后面的js代码不会执行
3. 如果第一对的script标签中有错误,不会影响后面的script标签中的js代码执行
7.variable变量。
8.用var声明的变量 ：1.只有数字可以不加引号。2.单引号和双引号一样。3.var可以声明任何类型。
9.变量的命名规则和规范：
l 规则 - 必须遵守的，不遵守会报错
ü 不能是关键字和保留字，例如：for、while。
ü 区分大小写
l 规范 - 建议遵守的，不遵守不会报错
ü 变量名必须有意义
ü 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。
例如：userName、userPassword
10.数据类型：基本数据类型和引用数据类型。传值和传址。
基本：number、string、Boolen、null、undefined。
引用：对象、正则、数组、函数。
11.用typeof 检测数据类型。并不能具体测出对象 正则 数组，而显示object。
12.基本数据类型与引用数据类型的区别：
基本数据类型：按值传递。
引用数据类型：按址传递。
13.5e-324 5乘以10的-324次方 是数字的最小值 用min_value
最小值：Number.MIN_VALUE，这个值为： 5e-324
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
无穷大：Infinity
无穷小：-Infinity
14.isNaN判断 如果是number 返回false 不是数 返回true。
15.\n是换行 \b空格 \r回车
16.str.length 字符串长度
17.typeof(null) //object typeof(undefined) //undefined
18.Number()强制把内容变为数值型
parseInt()只取内容的整数部分
19.isNaN方法中：0,null,空字符串，fasle 类型转换会变为false。undefined会变成true。
console.log(isNaN(NaN)) //括号里为非数字 所以返回true
console.log(isNaN(10)) //数字，返回false
console.log(isNaN("11")) //字符串中的数字可以隐式转换，返回false
console.log(isNaN("NaN")) //非数字，返回true
console.log(isNaN("12.35a")) //非数字，返回true
console.log(isNaN(12.35)) //数字，返回false
console.log(isNaN("blue")) //非数字，返回true
console.log(isNaN(true)) //true可以进行隐式转换为1 数字 所以返回false
console.log(isNaN(undefined)) //非数字true
console.log(isNaN(null)) //null转为数值是0，所以结果是false
20.Number( )可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN.
21.parsetInt()
1.整数部分，只要以数字开头，不需要管小数部分，直接得到整数数字
2.如果是非数字开头，则直接是NaN
22.parseFloat( )
包含整数部分，只要遇到第一个不是数字的字符，停止转换，直接把数字部分输出
23.前置++ 加1，后置++不变。
24.运算符的优先级从高到底
1. () 优先级最高
2. .点运算符
2. 一元运算符 ++ -- !
3. 算数运算符 先* / % 后 + -
4. 关系运算符 > >= < <=
5. 相等运算符 == != === !==
6. 逻辑运算符 先&& 后||
7. 赋值运算符 =
25.window.prompt（）页面弹框 输入内容
26.表达式1 ?表达式2 :表达式3 是对if...elsle语句的简化。
27.所有的switch都可以转换为if ，并不是所有的if都能转为switch。
28.document.write();在浏览器直接显示内容。
29.数组的概念
所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。
数组的定义
数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。
30.什么是函数
把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数，起个名字（函数名），在后续开发中可以反复调用。
函数的作用就是封装一段代码，将来可以重复使用。
函数 ： 函数名+函数体
31.函数的调用结果就是返回值，因此我们可以直接对函数调用结果进行操作。
32.返回值总结：
1. 如果函数没有显示的使用 return语句 ，那么函数有默认的返回值：undefined
2. 如果函数使用 return语句，那么跟再return后面的值，就成了函数的返回值
3. 如果函数使用 return语句，但是return后面没有任何值，那么函数的返回值也是：undefined
4. 函数使用return语句后，这个函数会在执行完 return 语句之后停止并立即退出，也就是说return后面的所有其他代码都不会再执行。
5. 推荐的做法是要么让函数始终都返回一个值，要么永远都不要返回值。
33.函数表达式不会被提升。
34.当出现变量声明和函数同名的时候，只会对函数声明进行提升，变量会被忽略。
35.带var的是局部变量，不带的是全局变量。
36.同名的函数：后面的会覆盖前面的。
37.函数声明会被提升，函数表达式不会被提升。

38.在事件函数中，this指向的是事件源。
在构造函数中，this指向的是构造函数的实例化对象。
在普通函数中，this指向的是window对象。
在对象函数中，this指向的是当前的对象。
定时器函数指向window
数组的元素是函数指向该数组
原型中this 指向实例化对象
自执行函数中this指向window
39.for ...in可以遍历一个对象
for (var key in obj) {
console.log(obj[key])
}
40.key:value 键值对。
41.删除对象的属性：delete obj.name;
42.前置++，先将自身的值自增1，再将自增后的值赋值给变量。
后置++，先将自身的值赋值给变量，然后再自增1。
43.JavaScript中的对象分为4种：内置对象、浏览器对象、自定义对象、DOM对象。
44.Math.PI 圆周率
生成随机数 Math.random()
向下取整/向上取整Math.floor()Math.ceil()
取整，四舍五入Math.round()
绝对值Math.abs()
最大值Math.max()
最小值 Math.min()
正弦Math.sin()
余弦Math.cos()
求指数次幂Math.pow()
求平方根Math.sqrt()
45.instanceof 检测引用数据类型。（数组、对象、正则，函数）。
46. // push() 往数组的末尾增加元素 返回值 是新增元素后数组的个数
// unshift() 往数组的开头增加元素 返回值 是新增元素后数组的个数
// pop() 删除末尾元素 返回值是删除的元素
// shift() 删除开始元素 返回值是删除的元素
// concat() 数组的拼接
reverse() //翻转数组
// join() 分割数组 转换为字符串
// slice(1,3) 截取数组的某几项 参数含义 1代表索引值 代表起始位置
3代表索引值 代表终止位置， 截取内容不包含终止位置
// 返回值：截取后的内容 原数组不变
// splice() 删除/增加/修改数组 参数，如果只有2个参数，第一个是起始位置，
第二个参数是截取的个数，返回值是截取内容 原数组会改变
//第一个值：起始位置 第二个值 删除的个数 第三个值，替换删除的元素 返回结果：删除元素
// sort() 排序 只能排序10以内的数
// indexOf() 检索数组中是否含有某一项 如果有返回索引位置 没有返回-1
// forEach() 循环遍历数组
// instanceof 检测引用数据类型
// isArray() 检测是否是数组
47.str.length字符串长度
// chartAt() 返回指定索引的字符串
// chartCodeAt()返 回ASCII码表
// chartCodeAt()返回ASCII码表 括号内为索引值
// index0f() 检索 是否包含此元素 从前往后。
// lastIndexOf() 从后往前。
//replace(old,new) //替换字符串替换字符串 new替换old
// split 分割字符串必须以str中的内容来进行分割，
同时以传入的参数为分隔符如果str中没有此分隔符则以整个str变为数组输出
// substr()第一个参数是开始索引值第二 个参数是截取个数
// substring() 第一个参数是开始索引值 第二个是结束索引值，但是不包含结束索引元素 返回值是截取的内容
//toUpperCase() //转换大写
//toLowerCase() //转换小写
// trim() 去除首尾空格

48.创建时间对象
var now = new Date();
49.
var data = new Date();
console.log(data);
console.log(data.value0f()); // 1590595200000 1000亳秒=1s
console.log(data.getTime());//1590595200000距 离1970年1月1日的亳秒值
console.log(data.getFullYear()) //2020 年
console.log(data.getMonth() + 1) //5月
console.log(data.getDate()) //29 日
console.log(data.getHours()) //14 时
console.log(data.getMinutes()) //40分
console.log(data.getSeconds()) //32 秒
console.log(data.getDay()) // 星期

50.NaN属性代表数字值的特殊值，该属性用于指示某个值不是数字。
51.typeof（NaN）===number 成立
null==undefined 成立
NaN不等于NaN
52.l 文档：一个网页可以称为文档
l 节点（node）：网页中的所有内容都是节点（标签、属性、文本、注释等）
l 元素：网页中的标签
l 属性：标签(元素)的属性
53. 事件三要素：
l 事件源:触发(被)事件的元素
l 事件类型:事件的触发方式(例如鼠标点击或键盘点击)
l 事件处理程序:事件触发后要执行的代码(函数形式)
54.return false 可以组织a链接跳转。
55.style是和px一起用的。
56.style="resize: none;"文本域禁用
57.
1,id获取元素

<script>
vardiv=document.getElementById('main');
console.log(div);
</script>

2,点击事件

<script>
varbox=document.getElementById('box');
box.onclick=function(){
console.log('代码会在box被点击后执行');
};
</script>

3,innerText获取文本内容
innerHTML 元素的所有节点（包括标签等都可以获取）
4,根据标签名获取元素
获取元素为伪数组
拥有length属性,(索引为非负整数)不具有数组所具有的方法
伪数组，就是像数组一样有length属性，也有0、1、2、3等属性的对象，看起来就像数组
一样，但不是数组
document.getElementsByTagName("标签的名字")
5,事件中的this
当在事件中表示当前元素的时候，可以使用this
6.dom操作页面元素的。
7.dom树

58.onmouseout 鼠标移出
onmouseover鼠标移入
59.onfocus 事件在对象获得焦点时发生，用于input
onblur 事件会在对象失去焦点时发生，
60.根据name名获取元素：getElementsByName
根据类名获取元素：getElementsByClassName
61.除了byid 剩下的获取的都是集合。
62.//获取元素的所有方式
//获取单个元素，可以直接使用方法: ID, queryselector
//获取集合，拿出来集合中的某一项使用方法:ByClassName，ByTagName
ByName queryselectorAll
63.//两者区别: innerHTML 可以设置标签 而innerText只能设置文本，不识别标签
64.js中做累加操作时需要给变量外层加Number（）转换为数值类型，再累加。
65.获取属性：Api名称 getAttribute("自定义属性的名字")
设置属性：setAttribute("属性的名字","属性的值");
移除属性：my$("dv").removeAttribute("属性名称");
66.this.disabled=true this.checked=true this.selected=true
67.节点三要素：
// nodeType nodeName nodevalue
// nodeType : 1---标签, 2----属性， 3----文本 8--注释
// nodeName : 返回的是大写标签名 返回小写属性名 #text
// nodeValue : null 返回属性值 文本内容
68.// children 获取的是直接子元素 childNodes获取的是所有子元素(包含空格和注释)
children： 获取子元素节点，无兼容问题
childNodes：
　　IE：获取子元素节点
　　非IE（chrome，Firefox等）：获取子节点，包括元素节点和文本节点
69.获取父级节点 parentNode属性
获取父元素节点，无兼容问题
获取第一个儿子元素节点,firstChild与firstElementChild
firstChild：
　　IE6,7,8：获取第一个子元素节点
　　非IE6,7,8：获取第一个子节点，元素节点/文本节点
firstElementChild：
　　IE6,7,8：不支持
非IE6,7,8： 获取第一个子元素节点
获取最后一个子元素节点,lastChild与lastElementChild
lastChild：
　　IE6,7,8：获取最后一个子元素节点
　　非IE6,7,8：获取最后一个子节点，元素节点/文本节点
lastElementChild：
　　IE6,7,8：不支持
　　非IE6,7,8：获取最后一个元素节点
获取后一个兄弟元素节点，nextSibling与nextElementChild
nextSibling：
　　IE6,7,8：获取后一个兄弟元素节点
　　非IE6,7,8：获取后一个兄弟节点，元素节点/文本节点
nextElementChild：
　　IE6,7,8：不支持
　　非IE6,7,8：获取后一个兄弟元素
获取前一个兄弟元素节点previousSibling与previousElementChild
previousSibling：
　　IE6,7,8：获取前一个兄弟元素节点
　　非IE6,7,8：获取前一个兄弟节点，元素节点/文本节点
previousElementChild:
　　IE6,7,8：不支持
非IE6,7,8：获取前一个元素节点
70. createElement使用js动态创建新元素。
appendChild添加元素。
removeChild删除节点。
var op =document.createElement('p');
op.innerHTML = '我是新创建的'
// insertBefore(插入的新元素，要插入到哪个元素前面)
oDiv .insertBefore(op,p1);
71.event.stopPropagation();阻止事件冒泡（用的多）非IE
event.cancelBubble = true; IE
兼容性代码
event = event || window.event;
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
72.绑定事件的新方式:addEventListener和attachEvent方法.
oDiv . addEventListener( ' click '，方法名，是否冒泡)
Dom二级事件不加on
Dom零级事件+on
为一个元素绑定多个事件，但方法名不一样可用DOM二级，不会覆盖。
73.Event事件的兼容写法
获得event对象兼容性写法
event || (event = window.event);
获得target兼容型写法
event.target||event.srcElement
74.移除解绑事件
对象.removeEventListener("没有on的事件类型",函数名字,false);
75.clearInterval清空定时器
clearTimeout清空定时器
setT imeout只在规定时间内执行一次
setInterval(处理函数，执行时间) 在规定时间内重复执行
76.如何阻止冒泡（存在兼容性）
e.stopPropagation(); 谷歌和火狐支持,
window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持
77.冒泡：子元素传到父元素 捕获：父元素传到子元素
78.onkeyup键盘抬起
onkeydown键盘按下
79.// https: 协议www. baidu. com:8080 域名+端口号 ?后面的叫query ，相当于传递的值。
// https:/ /www. baidu. com: 8080?name= 'zs ' &age=18
80. 字符串方法：
//length返回字符串长度
// charAt() 返回指定索引的字符串
// charCodeAt()返回ASCII码表
// charCodeAt()返回ASCII码表 括号内为索引值
//concat 字符串拼接 返回值是一个字符串
// index0f('l') 第一次出现的位置 返回索引值
// index0f('l',5) 从第5个开始查找出现l的索引值 返回索引值
// lastIndexOf() 字母最后出现的索引值 返回索引值
// replace( 'old', 'new') 返回值是一个字符串，原字符串是不改变的 。
// split 分割字符串必须以str中的内容来进行分割， 返回值是一个数组
//同时以传入的参数为分隔符如果str中没有此分隔符则以整个str变为数组输出。
// substr()第一个参数是开始索引值第二 个参数是截取个数 返回值是截取内容
// substring() 第一个参数是开始索引值 第二个是结束索引值，但是不包含结束索引元素 返回值是截取的内容
// toLocaleuppercase() //变大写 返回值是字符串
// toUpperCase() 变大写 返回值是个字符串
// toLocaleLowerCase()变小写 返回值是个字符串
//toLowerCase() 变小写 返回值是个字符串
// trim() 去除首尾空格 返回值是字符串
数组方法：
push() 往数组的末尾增加元素 返回值 是新增元素后数组的个数
unshift() 往数组的开头增加元素 返回值 是新增元素后数组的个数
pop() 删除末尾元素 返回值是删除的元素
shift() 删除开始元素 返回值是删除的元素
concat() 数组的拼接 返回值是一个数组
join() 分割数组 转换为字符串 返回值为一个字符串
翻转数组reverse() 返回值还是一个数组
slice() 截取数组的某几项 参数含义 1代表索引值 代表起始位置 3代表索引值 代表终止位置 截取内容不包含终止位置 // 返回值：截取后的内容 原数组不变
splice() 删除/增加/修改数组 参数，如果只有2个参数，第一个是起始位置，第二个参数是截取的个数，返回值是截取内容 原数组会改变
第一个值：起始位置 第二个值 删除的个数 第三个值，替换删除的元素 返回值：删除元素
sort() 排序 只能排序10以内的数 返回值还是数组
sort(function(a,b){return a-b}) a-b 从小到大排序 b-a 从大到小排序
indexOf() 检索数组中是否含有某一项 如果有返回索引位置 没有返回-1 返回值：数值类型
forEach() 循环遍历数组的方法 返回内容加索引
arr2.forEach(function (ele, index) {
console.log(ele + '------' + index)
})
instanceof 检测引用数据类型 返回值：布尔类型。
isArray() 检测是否是数组 返回值：布尔类型。
//时间方法
var data =new Date();
//1590595200000 距离1970年1月1日的毫秒值 返回值：数值类型
console.log(data.getTime());
//2020 年 获取当前年份 返回值：数值类型
console.log(data.getFullYear())
//5 月 获取当前月份 返回值：数值类型
console.log(data.getMonth())
//29 日 获取当前日期 返回值：数值类型
console.log(data.getDate())
//14 时 获取当前小时 返回值：数值类型
console.log(data.getHours())
//40 分 获取当前分钟 返回值：数值类型
console.log(data.getMinutes())
//32 秒 获取当前秒 返回值：数值类型
console.log(data.getSeconds())
// 星期 获取当前星期 返回值：数值类型
console.log(data.getDay())
81.window.onload = function( ){}保证html和css执行完毕后，再执行js。
82.offsetWidth=width+左右border+左右的padding
offsetHeight=height+上下border+上下padding
offsetLeft：当父元素没有定位的时候，元素本身距离body最左侧的距离（包含margin）
当父元素有定位的时候，元素本身距离父元素最左侧的距离（包含padding、border）
offsetTop：当父元素没有定位的时候，元素本身距离body最上侧的距离（包含margin）
当父元素有定位的时候，元素本身距离父元素最上侧的距离（包含padding、border）
clientWidth=width+左右padding 常用于获取一屏的宽度
clientHeight=Height+上下padding常用于获取一屏的高度
clientLeft=左border(border-left)
clientTop=上border(border-top)
scrollWidh=width+左右的padding(:可视区域宽度+被隐藏区域宽度)
scrollHeight=height+上下的padding(:可视区域高度+被隐藏区域高度)
scrollLeft=被卷去的宽度 （有滚动条）
scrollTop=被卷去的高度（有滚动条）
如果没有滚动条，里面元素超出父元素，则指的是父元素顶部距离子元素卷去的宽度和高度。
onscroll是滚动条滚动事件
浏览器被卷去的高度
出现滚动条的时候 要用pageX和pageY 而不用clientX/Y。
获取浏览器宽度：
var clientwidth
= document . documentElement .clientwidth | | document . body .clientwidth;

83.opacity：0-1 0是完全透明 1完全不透明。
84.animate(元素 , 目标长度,step)
oSpan[i] . setAttribute( ' index' ,i);
85.浏览器顶级模型为：window
html的顶级元素为：document
86. pageX/Y：相对于文档边缘,包含滚动条距离（获取超出一屏的鼠标坐标）
clientX/Y：鼠标相对于当前页面坐标且不包含滚动条距离（获取当前坐标）
clientWidth：获取元素自身的宽度（不含边框）
clientHeight：获取元素自身的高度（不含边框）
clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。客户区指的是当前窗口。
clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。
87.json格式：{"width" :"1000"，"height" :”2000"}
88.获取元素的高级用法（了解）
getComputedStyle与currentStyle（兼容性写法）
var style = window.getComputedStyle("元素", "伪类");获取属性
// 获取元素的属性兼容写法
function getCss(ele, attr) {
return window.getComputedStyle
? window.getComputedStyle(ele, null)[attr]
: ele.currentStyle[attr];
}
89. //阻止事件的默认行为
event.preventDefault();
//这是IE中的处理阻止默认行为
event.returnValue = false;。
event.stopPropagation();阻止事件冒泡（用的多）非IE
event.cancelBubble = true; IE
90.nodeName判断返回大写的标签名。
toLowerCase返回小写的标签名。
target.nodeName.toLowerCase()=='li'用来判断是否是该标签
91.事件委托要加给父类 如给li加事件委托 要给ul 加 oul.onmouseover
92.ul>(这是第$个)li*10
93.如果调用构造函数时需要用return，不调用不用加。
94.每个实例对象都有__proto __属性，
__proto__属性指向的是构造函数的原型。
95.系统构造函数与 普通构造函数区别：
1.获取元素的属性或者方法，系统函数可以直接使用对象名.属性/方法，而普通构造函数需要使用this.属性名/方法
2.属性和方法可以直接使用，而普通构造函数需要创建实例对象使用
96.创建构造函数多了容易浪费内存空间，需要把要使用的方法放在构造函数的原型上，通过原型找到它，实现数据共享。
97.栈是先进先出，栈里边存的是值和址 。
堆：根据栈里边存储的地址找到具体内容（比如函数体放在堆中）
想要实现数据共享解决内存占用的问题，需要在构造函数的原型上写方法，这样可以实例对象相同的时候，直接去堆中查找对应的方法，而不需要每次都创建一个新的内存空间。

98.p1.__proto__.sex属性必须加上__proto__才可以。
p1.play()方法可以直接打点写
99.Math . round(Math. random( )* (m-n)+n); 随机数。
100.暴露属性给window: //自调用函数
(function (window) {
var num = 1;
window.num = num;
})(window)
console.log(num);
101.原型上添加方法：数据共享和节省空间。
102.系统构造函数: string Array object Math Date Number Regexp
103.贪吃蛇思路：
1. 点击游戏开始
2. 蛇出现 食物出现
3. 开始控制蛇头方向去撞击食物
4. 碰撞到食物，食物消失，蛇身拉长。如果撞墙，游戏结束。
5. 继续下一轮
104.面向对象：封装、继承、多态。
105.基本数据类型的值是存在栈里边的，引用数据类型的值存在堆中，引用数据类型其地址存在栈中。（面试）
106
自调用：（函数体）（）；
检测对象的类型，用 instanceof 。
任何函数都有一个prototype属性，它本身是一个对象。（面试）
构造函数有一个prototype属性，它本身是一个对象，我们称为原型。（面试）
构造函数的prototype属性和方法，都可以被构造函数实例化对象所继承。（面试）
构造函数的prototype原型对象有个constructor属性，指向的是当前原型对象所在的构造函数。（面试）
实例化对象有个__proto__属性，它是一个指针，指向的是构造函数的原型prototype。（面试）
原型：函数的prototype属性，它本身是一个对象。
原型属性的查找规则：
从构造函数本身查找，如果有就返回，停止查找，
如果构造函数本身没有，继续从原型中查找，如果有就返回，停止查找
如果原型没有，就返回undefined
原型作用优点：
节省内存空间。
继承。（实现数据共享）通过原型继承: 可以继承父类的属性，方法。

继承：借用构造函数继承、拷贝继承、原型继承和混合继承。
缺点：:每次创建的实例化对象获取到的属性的值都是一样的，如果想要修改每个实例对象的属 性或者方法，需要单独给实例对象设置。
原型函数中，this指向是的实例化对象。
把构造函数的原型写成字面量函数形式，就会丢失constructor属性。
107.Student . prototype= new Person( ' ls' ,18);可以改变原型指向。（原型new另外的构造函数。）
109.重点:通过prototype改变的指向从而 可以使用Person的属性和方法。
110.这是通过call方法来改变thi s的指向
Person.call( this, name ,age);
//借用构造函数:构造函数名称.call(当前对象，属性1,属性2，。。。。。。)
// call()该方法是用来改变this指向的，call中 的第一个参数就是this的指向，后面依次传入属性即可
111. call()和 apply() 用来改变this指向的 。 call()传递的是单个的值，而apply()传递的是数组。
112.this指向
// 1.普通函数 window
// 2. 构造函数中 实例化对象
// 3.绑定事件 事件源 （事件点前面的元素）
// 4.定时器 window
// 5.自执行函数 window
113.自定义函数: function fn(){} //函数声明 在ie8种使用if.. .else时会有bug。
匿名函数: var fn1=function(){} //函数表达式 //如果需要做if判断，需要用函数表达式的写法
自调用函数: (function(){})()
114.arguments是伪数组。 console.log(arguments)可以拿到函数的属性。
函数的caller fn.caller 打印出来是调（谁调用这个函数）。
caller是函数调用者
callee 是函数本身
115.闭包：函数A里边嵌套函数B，函数A调用，会形成一个私有的作用域。
作用：避免变量污染。
116. 闭包拿到索引值。

<li><input type="button" value="赞(1)" id=" inp1"></li>
<li><input type= "button" value=" 赞(1)"></li>
<li><input type="button" value="赞(1)"></li>
<li><input type="button" value="赞(1)"></li>
(function (i) {
objInp[i].onclick = function () {console . log(i)}
})(i)

117.原型链最终指向null
118.“所有的函数都是一个对象,所有的对象,都可以用构造函数创建。
119. bind() ：用来复制一份
函数名.bind(对象,参数1，参数2.。。。。。); 返回值是复制之后的这个函数或者对象
120.局部变量变为全局变量，挂载到window上。
121.回调函数就是函数当参数。
122.“闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。”
123.检测数据类型方式 一、typeof
二、 instanceof
三、constructor object. prototype. tostring.call();
四、constructor
124.instanceof语法规则：fun instanceof Function 。
125.constructor检测数据类型语法：arr.constructor==Array
126.静态成员：函数内部供自己使用的变量
实例成员：实例化对象。
127.// js回收机制有2种方式: 1.标记2.计数
// 1.标记
从你定义变量开始浏览器就会做标记，后期回收器会根据你的标记来判断你是否需要删除
// 2.计数
定义完变量后，只有由其他变量调用 则会累加次数，直到你的次数为0.就会删除
128.//内存泄漏:
// 1、闭包
// 2.定时器如何不清除会因引起内存泄漏
// 3.全局变量，全局变量生命周期会持续到浏览器关闭页面。
//4、for(){} odiv不用了之后应该 让odiv=null 清空。
129.//浏览器的重排和重绘：
//通过js改变页面的样式叫重绘
//通过js改变页面的结构叫重排
130.//如何优化：
// 如果是要修改样式:我们需要用类名的方式。
// 如果是创建元素，需要在body里面设置完成，通过display来切换即可。
131.深拷贝与浅拷贝出现的根源就在于引用数据类型。当我们定义a=[0,1,2,3,4]，b=a时，其实复制的是a的引用地址，而并非堆里面的值。因为指向了相同的地址，所以当我们更改a时b会改变，更改b时a也会改变，这就是浅拷贝。而深拷贝改变的是内容。
深拷贝是内容拷贝,浅拷贝是地址拷贝
132.callee 返回一个正在被执行函数的引用，通过Arguments调用。
function Person(name) {
this.name = name;
console.log(arguments);
}
caller 返回一个调用当前函数的引用 如果是由顶层调用的话 则返回null 是实例化对象的一个属性。
133.总结：递归：方法自己调用自己
// 深拷贝与浅拷贝区别： 前者是拷贝的值，后者是拷贝的地址
// 注意点：如果拷贝的对象中有方法，不能单纯的只判断object，而应该是单独判断是否是function类型。
134.自调用函数:自己调用自己
自调用函数:(function(){函数})
自调用(自执行函数)的作用:主要用来分割作用域
135.回调函数：
回调函数在执行完毕后，根据不同的情况，可能调用不同的函数，我们可以调用这个函数
回调函数本质是一个参数。
136.//正到表达式:规则表达式。按照一定的规则组合起来的表达式
//作用:匹配字符串
//语法:
元字符
137. * :除了\n以外的其他所有字符
[]:范围。
[1-9]:从1到9中的任意一个字符
[a-z]:从a-z中的任意一个字符
[A-Z]:从A-Z中的任意一个字符
[a-zA-Z]:从所有字母中的任意一个字符
[0-9a-zA-Z]:所有数字或者字母中的任意一个
| :或者 [0-9]|[a-z]:从0-9或者a-z之间选择任意一个字符
(): 优先级最高， [0-9]|([a-z])|[A-Z];
()()():从左往右开始计算
限定符 以^开头 以$结尾
+ :表示的是前面的表达式出现1次到多次 [a-z][9]+ 'm99' 'm999999' 'a99999'
* ：表示的是前面的表达式出现0次到多次 [0-9][A-Z]* '5ML'
? :表示的前面的表达式出现0次到1次，
最多是1次，最少是0次 [0-9][v]? '9v' '9' '3' [0-9]?[r] '5r' 'r' '8r'
注意：前面的表达式指的就是紧挨着的这个表达式，并不是前面所有的表达式
{0,}:与*一样，代表前面表达式出现o到多次
{0,1}:与?一样，代表前面表达式出现0到1次
{1,}:与+一样，代表前面表达式出现1到多次
[3,5]{4,5}; ”3333' '4444' ' 55555'
\d:数字中的一个
\D:非数字
\s:空白符
\S:非空白符
\w:非特殊字符
\W:特殊字符
^ 以……开头 $以……结尾
test（正则）检测验证匹配正则
138.var reg = /^([A-Z0-9]{6,18})(\W|\-)+@[A-Z0-9]+\.([A-z]{2,3})$/;匹配邮箱的正则表达式
139. [^a-zA-Z ] 以括号里的参数取反。
140.var reg =/[o]/g; //global 全局替换
var reg =/[o]/gi; //ignore 忽略大小写
141.//注意点:想要获取字符串的具体的值，需要在正则匹配的时候进行分组，然后通过正则的构造函数中的$符，获取对应的分组内容。
142.var arr = str . match(/ \d+/g); match方法可以拿出字符串中数字
143.

var str = '2020-06-23';
var reg = /(\d{4})\-(\d{2})\-(\d{2})/; //分组提取
// console.log(reg.test(str));
if(reg.test(str)){
console.log(RegExp.$3)
}

RegExp（正则）
144.

var str = 'zs:1000,lisi:500,wangwu:2000';
var arr = str.match(/\d+/g);
console.log(arr)

match 匹配提取内容
145.var reg3= /[a\-Z]/g;
console. log(reg3. test(str3))
/ /Range out of order in character class
字符类中的"范围违背了character类" 在里边加一个转义字符 \ 就行。
146.阻止锚点跳转：JavaScript：；
147.name属性：只有input有这个属性。
149. 获取当前屏幕滚动条的距离：
document.documentElement.scrollTop
document.body.scrollTop -= step
150[...new Set([1,1,1,2,2,3])] 的返回值是去重的数组。
151.function addEvent(obj ，type , fn){
obj . addEventL istener(type, fn, false);
}
addEvent (window, ' scroll' ,function( ){
console. log(456)
})
addEvent (window, ' scroll' , function(){
console. log(789)
}) dom二级事件 绑定onscroll事件。

报错信息总结：
JS中常见的 “函数名 is not a function” 错误 是函数括号加错了。
timer is not defind是定时器作用域问题拿不到 然后在外面定义timer就行了。
”style“ is not defind是角标索引溢出了 应该把边界值判断提前。
152.onmouseenter和onmouseleave阻止冒泡。相当于onmouseover和onmouseout。
js基础总结
第一章JavaScript初识
1.js特点：脚本语言、解释性语言、基于对象的语言。
2.js能做什么:数据处理、数据验证、网页特效、服务端、游戏。
3.js三大核心：ECMAScript 、DOM文档对象模型（Document object model）、BOM浏览器对象模型
4.js代码书写：外部引入、script标签、html文档书写
5.js打印方式：alert方法、console.log
6.//单行注释、多行注释/**/
7.js变量概念：存储数据的容器，在内容中开辟一个空间来存储数据。
8.创建一个变量 var a; a=1;
创建一个变量并且赋值 var a=1;
创建多个变量 var age,name,shengao
9.js变量规范：变量名不能够是关键字，不能以数字开头，特殊符号$ _
起名要有一定的词义（见名知意）
起名要遵循驼峰命名法。
区分大小写的
js引入方式 ：内嵌式、行内式、外联式。
外联式：用script标签src 引入。
js数据类型
10.基本数据类型（数值、字符串、null、undefined、Boolen）
数值：整数、负数、小数、科学计数、八进制、十六进制、NaN not a number(不是一个数值，自己跟自己不相等)
字符串：返回值1或NaN 字符串长度 str.length 字符串连接 +
null 返回值 null undefiend返回值 undefiend Boolen返回值true或flase
11.引用类型：object、正则、函数、数组
12.检测数据类型：typeof检测
13.类型强转：转字符串：对象.toString()或String()
14.转number类型：parseInt()转整的，遇到第一个不是数字的会转成NaN
parseFloat()转小数的
Number()方法，只要有一个不是数值就NaN
15.Bollean：转换为false的，0，null，undefiend，NaN,空字符串。
js运算
16.算数运算：+ - * / %
前++ 后++ 前-- 后--（前置++，先将自身的值自增1，再将自增后的值赋值给变量。 后置++，先将自身的值赋值给变量，然后再自增1。）前置++加1，后置++不变
17.逻辑运算：操作符 && || ！ 与或非（与 && 读作and 同时为true 结果为true，有一个false就是false）（|| 有一个为true就为true）（! 颠倒黑白，取反）
18.比较运算：== 只比较内容、===比较内容与类型、！= 只比较内容、！== 比较类型
19.赋值运算：=
+= -= *= /=
1. () 优先级最高
2. .点运算符
2. 一元运算符 ++ -- !
3. 算数运算符 先* / % 后 + -
4. 关系运算符 > >= < <=
5. 相等运算符 == != === !==
6. 逻辑运算符 先&& 后||
7. 赋值运算符 = */
//false 0 null undefined 空字符串。进行隐式转换会变为false 其他的都会转换为true
第二章JavaScript流程控制
分支结构
20.if ：语法 if（条件）{执行语句}单独写
if（条件）{}else{}
if（）else if{}else if{}else{}
switch分支：switch case 跳出循环 加break
循环结构
21.while语法：while（条件）{执行的语句}
一般应用场景：不确定循环次数。
22.for语法 for（）{} 一般应用场景：确定运行次数时。
23.do{循环体}while（条件） do while不管条件满不满足，都会执行一次。
补充知识点
24.新的输出方式：document.write() 接收输入：prompt
第三章 JavaScript中数组与函数
数组
25.语法与特点：
写法[],每个成员用逗号来分割。
与其他语言的区别，在其他语言中，往往数组是一种数据类型。
引用类型中的一种表现形式。
26.数组的创建：
[];空数组
一般是放的同一个数据类型
以逗号分割 放到中括号里。
27.数组的取值：数组【下标】
28.数组的长度：.length
29.数组的遍历
for循环 退出条件：长度。超过长度，我们是以下标取值的，所以就是undefined了
for(var i = 0; i < arr.length; i++)数组遍历的固定结构
30.数组的替换：如果有 就是替换 语法：arr【5】=“玉栋”
没有就是新增
31.与其他语言中数组的不同
在其他语言中有的有索引数组和关联数组的区分，比如下方就是一个关联数组 ['name'=>'dongxue','age'=>18]
32.数组方法：
push（）往数组末尾增加元素 返回值 是新增元素后数组的个数。
unshift（）往数组的开头增加元素 返回值是新增元素后数组的个数。
pop（）删除末尾元素 返回值是删除的元素
shift（）删除开始元素 返回值的删除的元素
concat（）数组的拼接
join（）分割数组 转换字符串
slice（）截取数组的某几项 参数含义 第一个代表起始索引值 第二项代表终止索引值 截取内容不包含终止位置 返回值：截取后的内容 原数组不变
splice（）删除/增加/修改数组 参数，如果只有2个参数，第一个是起始位置 第二个参数的截取个数，返回值是截取内容 原数组会改变
sort（）排序 只能排序10以内的数。
indexOf（）检索数组中是否含有某一项 如果有，返回索引位置 ；没有，返回-1.
forEach(ele,index)循环遍历数组
instanceof检测引用数据类型
函数
33.函数定义：把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数，起个名字（函数名），在后续开发中可以反复调用。
函数的作用就是封装一段代码，将来可以重复使用。
34.return关键字：函数的运行结束，如果没有return，结果是undefiend，没有值。
35.函数的命名：遵守驼峰命名法和由数字、字母、下划线、$组成，不能以数字开头。
36.函数的创建：第一种function函数名（）{方法体}
第二种var 变量=function（）{}
37.函数的调用：函数名（）
函数是可以被多次重复的调用的
38.函数的参数：参数可以写n多个
形参：在函数定义时占位的参数
实参：调用函数时，实际传入的值。
39.算法：递归算法（自己调用自己）（必须要有边界条件）（从大问题到小问题 最终回到大问题）（案例阶乘）
阶乘和：
<script>
//输入弹框
var n = window.prompt("请输入一个数：")
//定义函数
function fn(n) {
//定义变量初始化值 因为是乘法所以不能为0
var res = 1;
//定义阶乘和 并初始化值
var sum = 0;
//遍历数组
for (var i = 1; i <= n; i++) {
//n项阶乘值
res = res * i
sum = sum + res;
}
//打印阶乘和
console.log(sum);
//返回值
return res
}
//调用
fn(n);
</script>
第四章 JavaScript函数
函数的知识点
40.函数的命名规则（遵守驼峰命名法和由数字、字母、下划线、$组成，不能以数字开头。）
41.伪数组：arguments他是存在于函数内部的，可以接收传递过来的参数
42.函数的覆盖问题：重复定义会覆盖前面的
匿名函数
43.函数是一种数据：（变量=）（函数是可以被typeof检测的）（函数可以传入，回调函数）（函数可以被return出来的）
函数自调用写法
44.函数自调用写法：（函数）（）
~函数（）
（函数（））
45.函数提升：牢记函数提升会在第一位
函数表达式不会被提升，函数声明可以。
46.变量提升：与我们的作用域是息息相关的
作用域链
47.一个函数就会创造一个作用域
48.作用域有一个全局作用域
49.作用域会在当前链上找，找不到再一层一层的向上找
绘制作用域链的步骤:
（1）看整个全局是一条链, 即顶级链, 记为 0 级链
（2） 看全局作用域中, 有什么成员声明, 就以方格的形式绘制到 0 级练上
（3）再找函数, 只有函数可以限制作用域, 因此从函数中引入新链, 标记为 1 级链
然后在每一个 1 级链中再次往复刚才的行为

50.补充：
必须要加var 不加var就会产生变量污染，一定要避免。
隐式全局变量var a=5,b=5,c=9 b和c是隐式全局变量
var a=b=c=20 //b和c就是隐式全局变量
对象
51.引用类型中的其中一个{}
52.语法：{ 一个个的键值对 }，必须写逗号。
53.this：
在事件函数中，this指向的是事件源。
在构造函数中，this指向的是构造函数的实例化对象。
在普通函数中，this指向的是window对象。
在对象函数中，this指向的是当前的对象。
定时器函数指向window
数组的元素是函数指向该数组
原型中this 指向实例化对象
自执行函数中this指向window
54.对象遍历：for…in for（var x in object）{}
55.对象中的属性只能有一个，新增如果有的话就是覆盖。
56.对象属性的删除：delete关键字
第五章 JavaScript内置对象

扩展知识
57.引用类型与基本类型数据的区别：引用数据类型按址传递，基本数据类型按值传递
58.短路写法：var a = 1 || null 哪个是true 去哪个的值，如果两个都是false呢,取后面这个（后面会用于解决浏览器兼容性问题）
基本包装类型
59.字符串创建的形式：字面量和构造函数 new String()
60.Number的创建：字面量和构造 new Number()
61.boolean
string

62.字符串方法：
charat()根据位置找字符
charCodeAt() 根据位置找字符，返回的是ascall编码对应的值
chartCodeAt()返 回ASCII码表
concat 字符串拼接
index0f() 检索 是否包含此元素
lastIndexOf() 从后往前 检索 是否包含此元素
replace( 'old', 'new')原字符串是不改变的
split 分割字符串必须以str中的内容来进行分割，
同时以传入的参数为分隔符如果str中没有此分隔符则以整个str变为数组输出
substr()第一个参数是开始索引值 第二 个参数是截取个数
substring() 第一个参数是开始索引值 第二个是结束索引值，但是不包含结束索引元素 返回值是截取的内容
toLocaleuppercase()、toUpperCase()变大写
toLocaleLowerCase()、toLowerCase()变小写
trim() 去除首尾空格
字符串处理
63. concat
64.slice 字符区间，但是开头0的话，包括0，结尾到end的话，不包括
65.substirng（）跟slice认为是一样的
66.substr(截取位置，长度)
67.trim()去除空格
68.search参数可以是正则表达式。
69.replace是替换 参数1 查找，参数2是替换 （参数1可以写正则）
70.split根据字符串某个分割 切割为数组
71.formCharCode 挂载在String对象下的
js-API总结
第一章 JavaScript-API（DOM操作）
api
72.webapi
73.api的概念：API是提供给不bai同语言的一个接口，也就du是对应的函数里面提zhi供了相应的方法。
js构成
74.dom、bom、ecma核心语法
事件
75.点击事件 onclick
76.如何绑定事件 元素.具体事件 = 事件执行函数
77.事件三要素：事件源、事件类型、事件处理程序
获取dom
78.document.getElementById(id名)就可以获取id为这个的元素对象
doucment.getElementsByTagName 根据标签获取元素，得到一个伪数组，数组存的是dom元素对象
for循环获取到的伪数组给每一个元素绑定事件
属性操作
79.普通元素属性（未列全，左侧为举例）href、src 属性、img的width
80.innerText：获取元素的文本值
81.表单部分属性：value获取值的、selected 下拉框、checked 复选框、disabled 禁用
82.样式处理：元素对象.style.属性名
注意:例如z-index加杠的属性要加 驼峰命名法 小驼峰，class要获取className
第二章 JavaScript-API(获取DOM元素方法与事件)
83.阻止a链接跳转：事件执行逻辑代码中 return false
84.新事件:鼠标移入 onmouseover或者onmouseenter（可以阻止多层元素嵌套所造成的冒泡）
鼠标移出 onmouseout或者onmouseleave（可以阻止多层元素嵌套所造成的冒泡）
获取焦点 onfocus
失去焦点 onblur
85.获取元素新方法：
根据name名获取元素 getElementsByName()
根据class名获取元素 getElementsByClassName()
86.根据选择器来获取元素：
querySelector（）
querySelectorAll（）
第三章 JavaScript-API(DOM节点操作、事件、BOM)
节点
87.节点增删改查：
获取子节点 childNodes（任何浏览器都支持）
获取子节点的第一个 firstChild（任何浏览器都支持）
获取最后一个子元素节点,lastChild与lastElementChild
获取前一个兄弟元素节点previousSibling与previousElementChild
获取后一个兄弟元素节点，nextSibling与nextElementChild
获取父节点 parentNode
增删改：增（insertBefore（节点，节点位置）在节点位置之前插入）
（节点1.appendChild（节点2） 把节点2新增节点1中）
改： 改变节点上的内容（更改属性，更改样式）。
删
88.判断节点：nodeType
nodeName 返回节点名，名是大写
兼容性
89.具体的：
innertText与Textcontent
事件对象
节点操作中的
事件对象获得target兼容型写法
创建元素
90.innertHtml、创造节点 createElement（元素名）、document.write()
91.事件三要素：事件源、事件类型、事件处理程序
事件
92.事件对象：事件兼容性
（获得event对象兼容性写法 event || (event = window.event);）
（获得target兼容型写法 event.target||event.srcElement）
93.事件委托要加给父类 如给li加事件委托 要给ul 加 oul.onmouseover
94.事件新绑定方法：dom二级事件：addeventlister('不加on的事件'，执行的函数,false)
兼容性问题 对象.attachEvent("有on的事件类型",事件处理函数)
95.解绑事件：removeEventListener('不加on的事件',执行的函数,false)
对象.onclick = null
96.新事件：window.onload加载事件
键盘事件:onkeypress（高级）(功能键不可以获取到)
onkeyup 键盘弹起
onkeydown:可以获取到对应的一些功能键
键盘按下
不区分大小写
bom
97.window大全局（在js中是浏览器独有的）
98.定时器:setinteval(回调函数，每隔多少时间)
clearInterval(定时器id) 清理定时器
第四章 JavaScript-API(动画以及封装)
动画原理
99.如何实现？动画的封装
offset系列
100.offsetWidth=width+左右border+左右的padding
offsetHeight=height+上下border+上下padding
offsetLeft：当父元素没有定位的时候，元素本身距离body最左侧的距离（包含margin）
当父元素有定位的时候，元素本身距离父元素最左侧的距离（包含padding、border）
offsetTop：当父元素没有定位的时候，元素本身距离body最上侧的距离（包含margin）
client系列
101.pageX/Y：相对于文档边缘,包含滚动条距离（获取超出一屏的鼠标坐标）
clientX/Y：鼠标相对于当前页面坐标且不包含滚动条距离（获取当前坐标）
102.获取文档根节点document
document.body
document.title
scroll系列
103.scrollWidh=width+左右的padding(:可视区域宽度+被隐藏区域宽度)
scrollHeight=height+上下的padding(:可视区域高度+被隐藏区域高度)
scrollLeft=被卷去的宽度 （有滚动条）
scrollTop=被卷去的高度（有滚动条）
如果没有滚动条，里面元素超出父元素，则指的是父元素顶部距离子元素卷去的宽度和高度。
onscroll是滚动条滚动事件
阻止默认事件
104.//阻止事件的默认行为
event.preventDefault();
event.returnValue = false;。（IE）
event.stopPropagation();阻止事件冒泡（用的多）非IE
event.cancelBubble = true; IE
JavaScript计算属性操作
105.getComputedStyle
currentStyle
106.用typeof 检测数据类型。并不能具体测出对象 正则 数组，而显示object。
JavaScritp-高级（总结）
第一章 JavaScript-高级（面向对象）

什么是面向对象编程
107.面向对象编程 —— Object Oriented Programming，简称 OOP ，是一种编程开发思想。它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。
面向对象的三大特征
108.封装、继承、多态。
js创建对象的三种方式
109.字面量、内置构造函数（new Object）、自定义构造函数
额外技巧:
110.利用自调用函数把局部变量变为全局变量
好处:不污染外部变量、对象可以暴露给window直接使用
js设计模式
111.工厂模式有返回值，自定义构造函数没有返回值。
原型链
112.原型三成员：实例对象、构造函数、原型对象
113.原型三成员之间的关系：实例对象与构造函数的关系、
实例对象与原型对象的关系（__proto__）
构造函数与原型对象的关系（prototype、sonstructor）
构造函数有一个prototype属性，它本身是一个对象，我们称为原型。（面试）
构造函数的prototype属性和方法，都可以被构造函数实例化对象所继承。（面试）
构造函数的prototype原型对象有个constructor属性，指向的是当前原型对象所在的构造函数。（面试）
实例化对象有个__proto__属性，它是一个指针，指向的是构造函数的原型prototype。（面试）
原型：函数的prototype属性，它本身是一个对象。
114.原型链查找规则：
从构造函数本身查找，如果有就返回，停止查找，
如果构造函数本身没有，继续从原型中查找，如果有就返回，停止查找
如果原型没有，就返回undefined
115.原型链最终指向null 。
116.原型链的优点：节省内存空间和实现数据共享。
第二章 JavaScript-高级(面向对象巩固--贪吃蛇)
游戏操作步骤分析
117.游戏开始--蛇出现 食物出现--开始控制蛇头去撞击随机出现的食物--碰撞到食物，食物消失，蛇身体拉长，如果撞墙游戏结束--继续下一轮
功能实现拆分
118.场景搭建(阶段一：)设置一个map地图，设置结构和样式
119.分析对象：
食物对象（属性：水平坐标 X 垂直坐标 Y 宽 高 颜色
方法：渲染方法 render() 食物删除方法 remove（））
蛇对象（属性：蛇节的宽、蛇节的高、
蛇的身体（每一个蛇节的信息(水平坐标X/垂直坐标Y/颜色：color)）移动的方向 direction
方法:渲染方法 render（）、小蛇移动方法 move()、小蛇删除方法 remove（））
游戏对象（属性：地图、蛇、食物
方法：游戏初始化 init()、小蛇跑起来 runSnake、设置用户按键 bindKey（））
实现逻辑
120.实例化该游戏 new Game(场景)：传参-传入地图
内部过程：游戏的构造函数中进行初始化属性对应的场景 蛇 食物
121.执行初始化init方法：初始化（渲染）蛇-内部过程-先删除自己原来的再重新渲染
初始化（渲染）食物-内部过程-先删除自己原来的再重新渲染
调用蛇跑起来方法 runSnake()：传参-食物对象
地图对象也就是一个dom而已
内部过程：设置定时器让蛇动起来
绑定按键bindkey（）-内部过程-给文档绑定键盘按钮移动事件
第三章 JavaScript-高级(面向对象之继承)
原型
122.原型指向null
什么是继承
123.继承可以使得子类具有父类的属性和方法或者重新定义、追加属性和方法等。
如何实现继承
124.原型继承：通过把构造函数的prototype指向一个对象，从而改变原型的指向
缺陷：父级类别中的方法不能继承
125.构造函数中借用call来实现继承：call可以改变this的指向
126.深拷贝与浅拷贝出现的根源就在于引用数据类型。当我们定义a=[0,1,2,3,4]，b=a时，其实复制的是a的引用地址，而并非堆里面的值。因为指向了相同的地址，所以当我们更改a时b会改变，更改b时a也会改变，这就是浅拷贝。而深拷贝改变的是内容。
深拷贝是内容拷贝,浅拷贝是地址拷贝
函数
127.this指向：
普通函数-window
对象方法-该方法所属对象
事件绑定方法-绑定事件对象
构造函数-实例对象
定时器函数-window
128.函数也是对象：函数是由new Function 构造函数的形式创造出来的
第四章 JavaScript-高级(函数高级应用)
函数进阶
129.函数的三种定义方式：函数声明、函数表达式、js内置构造函数的形式
130.函数的调用方法：（）方法：最基本的形式：普通调用、自调用函数
几种变形的容易迷惑的形式：对象中、数组中、回调函数
call 、apply、bind：
方法解释：
call语法：函数.call(对象，参数1，参数2......)
对象.方法.call(对象,参数1，参数2......)
作用：改变调用该方法的对象
apply语法：函数.apply（对象,[参数1，参数2，参数3......]）
对象.方法.apply(对象,[参数1,参数2,参数3......])
作用：改变调用该函数或者方法的对象
bind语法：函数.bind(对象)，其实相当于对象.函数(),所以函数里面的this就是该对象了
改变调用该函数或者该方法的对象，返回一个函数，需要调用
差别差异汇总：相同点（apply与call与bind都可以改变this的指向、apply与call是一种调用函数的方式、第一个参数都是对象）
不同点（apply与call的参数不同，apply的第二个参数是数组、bind返回值是一个函数，需要调用）
高阶函数
131.函数可以作为参数：回调函数
132.函数可以作为返回值：return function(){}
133.函数的其他成员：arguments实参列表、caller函数的调用者、length 形参列表、name 函数的名称、callee函数本身
134.函数闭包：闭包概念：闭包定义-定义在一个函数内部的函数
闭包本质-闭包就是将函数内部和函数外部连接起来的一座桥梁
135.闭包的作用：可以在函数外部读取函数内部成员
让函数内成员始终存活在内存中
136.函数递归：函数内部自己调用自己
137.递归应用场景：深拷贝、菜单树、遍历dom树
第五章 正则表达式
课程复习
138.函数的新调用方式的区别：apply、call、bind（）
139.闭包：闭包模式：函数模式闭包
对象模式闭包
闭包作用：缓存数据
延长作用域链
缺点：函数中的变量不能及时的释放
140.递归：函数中自己调用自己
递归一般用在遍历上
递归轻易不要用，效率很低
深浅拷贝案例
遍历dom树
正则表达式
141.概念：正则表达式：用于匹配规律规则的表达式，正则表达式最初是科学家对人类神经系统的工作原理的早期研究，现在在编程语言中有广泛的应用。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。
142.正则的作用：匹配、提取、替换
l 给定的字符串是否符合正则表达式的过滤逻辑(匹配)
l 可以通过正则表达式，从字符串中获取我们想要的特定部分(提取)
l 强大的字符串替换能力(替换)
143.正则特点：
l 灵活性、逻辑性和功能性非常的强
l 可以迅速地用极简单的方式达到字符串的复杂控制
l 对于刚接触的人来说，比较晦涩难懂
144.正则的组成：
普通字符：普通数字，字母，中文，符号，特殊字符.....
145.特殊字符：
常用元字符：
\d 匹配数字、\D 匹配任意非数字
\w 字母数字或者下划线、\W 任意非字母数字或者下划线
\s任意空白字符、\S 任意不是空白的字符
. 除换行符以外的字符 ^ 匹配行首以谁开始 $ 匹配行尾以谁结束
限定符：
* 重复0次或者多次 + 重复1次或者多次 ？ 重复0次或者1次
{n}重复n次 {n,}重复n次或更多次 {n,m}重复n次到m次
其他：
一个字符 [ ] [^]匹配非中括号以内的内容 \转义符
| 或者，选择两者中的一个。注意|将左右两边分为两部分，而不管左右两边有多长多乱
分组()：小例子： eg：gr(a|e)y匹配gray和grey
[\u4e00-\u9fa5] 匹配汉字
在js中使用正则
146.创建正则对象：new Regex('\d', 'i');
var reg = /\d/i;
参数：i 忽略大小写
g 全局匹配
gi 全局匹配+忽略大小写
147.正则验证:方式 正则.test（字符串）-返回true或者fasle
148.正则提取:str.match()
语法:字符串.match(正则对象)/返回值为数组/技术细节
正则对象.test(str):如果分组检测成功，
在原生的RegExp对象中将以$1、$2、$3.......等形式来存储提取的结果
149.正则替换:str.replace(正则，替换的具体内容)
150.正则替换:返回值:一个部分或全部匹配由替代模式所取代的新的字符串。
Javascript中类型转换的情况以及结果
if中的条件会被自动转为Boolean类型
* 会被转为false的数据
* 会被转为true的数据
参与+运算都会被隐式的转为字符串
* 会被转为空字符串的数据
* 会被转为字符串的数据
* 会被转为数据类型标记的数据
参与*运算都会被隐式的转为数字
* 会被转为0的数据
* 会被转为1的数据
* 会被转为NaN的数据
== 运算符
* 为true的时候
* 为false的时候
if中的条件会被自动转为Boolean类型

if(false) console.log(2333)
if('') console.log(2333)
if(null) console.log(2333)
if(undefined) console.log(2333)
if(NaN) console.log(2333)
if('test') console.log(2333) // 2333
if([]) console.log(2333) // 2333
if({}) console.log(2333) // 2333

参与+运算都会被隐式的转为字符串
转换为空字符串
'str-' + '' // str-
'str-' + [] // str-
b. 转成字符串的数据
'str-' + '1' // "str-1"
'str-' + 1 // "str-1"
'str-' + false // "str-false"
'str-' + true // "str-true"
'str-' + null // "str-null"
'str-' + undefined // "str-undefined"
'str-' + NaN // "str-NaN"
c.转成数据类型标记
'str-' + {} // "str-[object Object]"
'str-' + {a:1} // "str-[object Object]"
参与*运算都会被隐式的转为数字
会被转为0的数据
3 * '' // 0
3 * [] // 0
3 * false // 0
会被转为1的数据
2 * '1' // 2
2 * [1] // 2
2 * true // 2
会被转为NaN的数据
2 * {} // NaN
2 * {a:1} // NaN
4. == 运算符
a.会被转为true
0 == false // true
0 == '' // true
0 == '0' // true
0 == [] // true
0 == [0] // true
1 == true // true
1 == '1' // true
1 == [1] // true
[1] == true // true
[] == false // true
b.会被转为false
0 == {} // false
0 == null // false
0 == undefined // false
0 == NaN // false
1 == {} // false
1 == null // false
1 == undefined // false
1 == NaN // false
[] == [] // false
[1] == [1] // false
[1] == {} // false
[1] == {a:1} // false
[1] == false // false
[1] == null // false
[1] == undefined // false
[1] == NaN // false
{} == {} // false
{a:1} == {a:1} // false
PS:空数组[]，在+运算符下是转为空字符串''，在*运算符下是转为数字0。但在if语句中，则转为true
2.window.location用法
URL即:统一资源定位符 (Uniform Resource Locator, URL)
完整的URL由这几个部分构成：
scheme://host:port/path?query#fragment
scheme(通信协议):常用的http,ftp,maito等
host(主机): 服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
port(端口号):整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
path(路径):由零或多个"/"符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
query(查询):可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页）传递参数，可有多个参数，用"&"符号隔开，每个参数的名和值用"="符号隔开。
fragment(信息片断):字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。(也称为锚点.)
对于这样一个URL
http://www.x2y2.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere

我们可以用javascript获得其中的各个部分
1, window.location.href
整个URl字符串(在浏览器中就是完整的地址栏)
本例返回值: http://www.x2y2.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere
2,window.location.protocol
URL 的协议部分
本例返回值:http:
3,window.location.host
URL 的主机部分
本例返回值:www.x2y2.com
4,window.location.port
URL 的端口部分
如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符
本例返回值:""
5,window.location.pathname
URL 的路径部分(就是文件地址)
本例返回值:/fisker/post/0703/window.location.html
6,window.location.search
查询(参数)部分
除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值
本例返回值:?ver=1.0&id=6
7,window.location.hash
锚点
本例返回值:#imhere <src="http://feeds.feedburner.com/~s/fisker?i=http://www.x2y2.com/fisker/post/0703/window.location.html" type="text/javascript" charset="utf-8">
复习笔记关于构造函数和原型问题
关于构造函数的一些问题
1)函数中出现的私有变量都是把它看做普通函数执行的时候产生的，和我们的当前的实例(p1/p2)是没有任何的关系的，也就是p1/p2并没有num这个属性，只有this.xxx=xxx这样设置添加的才是我们实例的私有属性
//2)不需要写return，浏览器也会把创建的实例进行返回(浏览器默认返回的是一个对象数据类型)，但是如果我自己写了呢?
//自己手动返回一个基本数据类型值：对我们创建的实例是没有任何的影响的
//return 12;
//自己手动返回一个引用数据类型值:会把浏览器默认返回的实例覆盖掉，那么此时我们创建出来的p1/p2就不在是CreateJsPerson这个类的一个实例了
//return {};
//3)如果在创建的时候不需要给形参传递值,后面的小括号可以加也可以不加
//new CreateJsPerson();
//new CreateJsPerson;
//4)如何的检测某一个实例是否属于这个类-->instanceof
//5)hasOwnProperty:检测某一个属性是否为当前的对象的私有属性(不管公有属性是否存在，只要私有中有就返回true，没有就返回false)
//in:用来检测某一个属性是否属于这个对象 (既可以检测私有的,也可以检测公有的)
//检测attr是否为obj的一个公有的属性
function hasPubProperty(attr, obj) {
return (attr in obj) && (!obj.hasOwnProperty(attr));
}
isPrototypeOf 与 hasOwnProperty 的区别
1、isPrototypeOf
isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的原型链中，是则返回true，否则返回false。
格式如下：
object1.isPrototypeOf(object2);
object1是一个对象的实例；
object2是另一个将要检查其原型链的对象。
原型链可以用来在同一个对象类型的不同实例之间共享功能。
如果 object2 的原型链中包含object1，那么 isPrototypeOf 方法返回 true。
如果 object2 不是一个对象或者 object1 没有出现在 object2 中的原型链中，isPrototypeOf 方法将返回 false。
2、hasOwnProperty
hasOwnProperty判断一个对象是否有名称的属性或对象，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。
如果该属性或者方法是该 对象自身定义的而不是器原型链中定义的 则返回true;否则返回false;
格式如下：
object.hasOwnProperty(proName);
判断proName的名称是不是object对象的一个属性或对象。

原型类问题
//接下来的每一句话都是规定，不要问我为什么
//1、所有的函数数据类型(实名函数、匿名函数、类)都天生自带一个属性:prototype(原型),并且这个属性对应的属性值是一个对象数据类型的,浏览器会默认的给它开辟一个堆内存
//函数原型的作用：存储类中所有公有的属性和方法

//2、在浏览器默认给prototype开辟的堆内存中有一个天生自带的属性constructor,存储的值是当前函数本身
//console.log(CreateJsPerson.prototype.constructor === CreateJsPerson);//-->true

//3、每一个对象数据类型(普通对象、数组、正则、时间、实例、函数的prototype属性...)都有一个天生自带的属性:__proto__(IE浏览器也存在这个属性但是给保护起来屏蔽掉了,不允许我们自己使用)
//__proto__这个属性指向的是当前对象所属类的原型，例如：
//console.log(p1.__proto__ === CreateJsPerson.prototype);//-->true

//4、查找过程-->原型链模式
//每一个实例在使用自己的属性和方法的时候，首先先找自己的私有属性，私有属性中存在就不在查找了,我们使用的就是私有的属性和方法;私有的如果不存在，浏览器默认根据__proto__找所属类prototype上的公有的属性和方法,如果公有中存在,则使用公有的;如果公有的还没有,则继续同过__proto__往上找,一直找到Object.prototype为止;
//关于this的查找问题
//1、Fn这个类中this.xxx=xxx中的this是当前Fn的一个实例
//2、Fn类中某些方法中的this(例如:sum这个公共方法中的this)
//1)首先看sum这个方法执行前有没".","."前面是谁,那么sum中的this就是谁
//2)执行sum中的代码,然后把this是谁用代码给描述出来
//3)按照原型的查找机制分析结果即可
以下{}括号中的内容对应的是上面的关于this的查找问题
{function Fn() {
//this-->f
this.index = 100;
}
Fn.prototype.sum = function () {
console.log(this.index);
};
var f = new Fn;
f.sum();//this->f
// console.log(f.index); -->100

f.__proto__.sum();//this->f.__proto__
// console.log(f.__proto__.index); -->原型上没有index属性，则往上一级查找，直到找到Object的原型为止 -->undefined

Fn.prototype.sum();//this->Fn.prototype
// console.log(Fn.prototype.index); 和上面的情况一样，是直接的查找原型上的index -->undefined

//f.__proto__.__proto__.sum();//Uncaught TypeError: f.__proto__.__proto__.sum is not a function}

//构造函数模式和工厂模式的区别:
//一般情况下，我们如果是通过构造函数模式来创建一个类的话，我们的类名的第一个字母要大写(这不是规范而是大家约定俗称的一个规律)
//1)在执行的时候，我们的构造函数模式是通过 new CreateJsPerson() 来执行的-->我们把CreateJsPerson称之为一个类，而通过类创建出来的结果(p1)就是当前类的一个实例
//2)类也是一个函数，所以也会像普通函数执行一样:形成一个私有的所用域,形参赋值,预解释,代码从上到下执行
//但是构造函数模式在代码执行之前，浏览器默认首先会创建一个对象数据类型的值(不用自己手动的进行创建了)，并且会默认的把这个对象数据类型的值进行返回(不用自己手动的return返回了)
//3)把浏览器默认创建的那个对象当做当前函数执行的整体(this)，然后通过this.xxx=xxx这种方式给默认创建的对象增加属性名和属性值
//浏览器默认创建的这个对象其实就是我们当前类的一个实例
//在构造函数模式创建一个类的时候，方法执行，里面的this(this.xxx=xxx)其实就是我们当前类的一个实例-->this的第四种情况

//1)函数中出现的私有变量都是把它看做普通函数执行的时候产生的，和我们的当前的实例(p1/p2)是没有任何的关系的，也就是p1/p2并没有num这个属性，只有this.xxx=xxx这样设置添加的才是我们实例的私有属性
//2)不需要写return，浏览器也会把创建的实例进行返回(浏览器默认返回的是一个对象数据类型)，但是如果我自己写了呢?
//自己手动返回一个基本数据类型值：对我们创建的实例是没有任何的影响的
//return 12;
//自己手动返回一个引用数据类型值:会把浏览器默认返回的实例覆盖掉，那么此时我们创建出来的p1/p2就不在是CreateJsPerson这个类的一个实例了
//3)如果在创建的时候不需要给形参传递值,后面的小括号可以加也可以不加
//new CreateJsPerson();
//new CreateJsPerson;
//4)如何的检测某一个实例是否属于这个类-->instanceof
//所有的对象数据类型({}、[]、/^$/、Date还有我们的实例也是对象数据类型)都是Object这个类的一个实例 -->Object是所有对象数据类型的基类
//5)hasOwnProperty:检测某一个属性是否为当前的对象的私有属性(不管公有属性是否存在，只要私有中有就返回true，没有就返回false)
//in:用来检测某一个属性是否属于这个对象 (既可以检测私有的,也可以检测公有的)