模拟重载
1、当函数出现同名参数时，则保留最后一个传入的实参
当实参的个数满足传入参数个数时，即最后一个形参就是实参的值
当实参的个数小于形参个数时，则最后一个形参的值是undefined
undefined和任何数值进行数值运算结果都是NaN，除了字符串拼接
function sum(a,a){
return a+a;
}
sum(10,20); // 输出的是40
sum(10); // 输出的是NaN
// 相当于第二个实参未定义，传入的是一个未定义的值，即a undefined
2、arguments对象：
函数内部特有的，arguments对象存储了传入的所有实参，是伪数组
伪数组的特点：
·具有length的属性
·按索引方式存储数据
·不具有数组的push、pop等方法
arguments对象包含函数运行时的所有参数，利用这个对象模拟函数重载
function sum(){
console.log(arguments[0]+arguments[1]);
}
4、eval函数：将字符串转为js代码并执行
eval(函数);
5、instanceOf：判断一个变量是否是某个对象的实例（判断左边的变量是否是右边类型的实例），返回值为布尔型
6、作用域：目的是为了提高diamond的可靠性，最重要的是减少命名的冲突
全局作用域：整个script标签|一个单独的js文件
局部作用域（函数作用域）在函数内部就是局部作用域
es6新增的块级作用域：{}
作用域链：内部函数访问外部函数的变量，采取的是链式方式查找的方式来决定取哪个值（就近原则）。直接站在目标处一层一层往外找
对象
1、创建对象
1、构造函数式创建对象：
构造函数名首字母要大写（对开发人员而言，函数的第一个字母大写约定俗成的表示一个类(类的模板)）
不需要return就可以返回结果
2、构造函数和对象的区别
对象：是一个具体的事物
构造函数：泛指某一大类，类似java中的类
利用构造函数创建对象的过程称为对象的实例化（通过new关键字创建对象的过程）
3、new关键字执行的过程：
new 构造函数 ---- 可以在内存中创建一个空的对象
this就会指向创建的空对象
执行构造函数李的代码，给这个空对象添加属性和方法
返回这个新对象，所以构造函数里面不需要return
function Person(name, age, sex){
this.name = name;
this.age = age;
this.sex = sex;
this.sayName = function(){
alert(this.name);
}
}
var p1 = new Person('zs', 13, '男'); // 调用构造函数必须使用new
4、for in遍历对象：for(var key in obj){ }
5、工厂模式创建对象(用js模拟类)：
function createFunction(name,sex,age){
var obj = new Object();
obj.name = name;
obj.sex = sex;
obj.age = age;
obj.sayName = function(){
alert(this.name);
}
return obj; //不要忘记了
}
//创建类的实例：
var p1 = createFunction('zs','男',20);
var p2 = createFunction('ls','男',18);
p1.sayName();
2、内置对象
1、js中的对象：自定义对象、内置对象、浏览器对象
2、Math对象：不是一个构造器
封装自己的数学对象：
var myMath = {
PI:3.1415926,
max:function(){
var max = arguments[0];
for(var i = 0; i <arguments.length; i++){
if(arguments[i] > max){
max = arguments[i];
}
}
return max;
},
min:function(){
var min = arguments[0];
for(var i = 0; i <arguments.length; i++){
if(arguments[i] < min){
min = arguments[i];
}
}
return min;
}
}
3、三个取整的方法：
（1）Math.floor()：向下取整，往最小取值
（2）Math.ceil()：向上取整，往最大取值
（3）Math.round()：四舍五入，但是.5特殊，往大的取（如-1.5，取整为-1）
4、随机数方法：
（1）random() ---- 返回一个大于等于0小于1的小数
（2）想要得到两个数之间的随机整数，并且包含这2个整数：
function getRandom(min, max){
return Math.floor(Math.random()*(max - min + 1)) + min;
}
console.log(getRandom(1, 10));
// 随机点名：
// console.log(arrName[getRandom(min, max)]);
5、Date日期对象：
是一个构造函数，必须使用new来调用创建我们的日期对象
（1）格式化日期：
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1; // 返回的月份小一个月，记得+1
var dates = date.getDate();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day = date.getDay();
console.log(year + '年' + 'month' + '月' + dates + '日' + arr[day]);
（2）封装时分秒函数：
var date = new Date();
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
function getTime() {
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s;
}
console.log(getTime());
（2）获得总的毫秒数：不是当前时间的毫秒，是现在的时间距离1970.1.1的总的毫秒数
1）通过valueOf() getTime():
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
2）简单的写法（最常用的写法）:
var date1 = +new Date();
console.log(date1);
3）H5新增的获得总毫秒数：
console.log(Date.now());
3、简单数据类型、复杂数据类型
1、简单数据类型（值类型）：number、string、boolean、undefined、null
null返回的是空对象：object（如果有个变量以后打算存储为对象，但是还没有想好存什么时可以使用null）
（1）简单数据类型存放在栈中，栈中直接开辟一个空间，存放的是的值
（2）函数的形参可以看作是一个变量，当把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间的值复制一份给形参，那么在函数内部做任何修改，都不会影响外部的值类型变量
2、复杂数据类型（引用类型）：通过new关键字创建的对象（系统对象、自定义对象）
（1）引用类型变量（栈空间）存放的是地址，真正的对象实例在堆空间中（先在栈中存放一个地址，者这个地址指向堆中的存放的数据）
（2）函数的形参可以看作一个变量，当把引用类型变量传给形参时，是把变量在栈空间里保存的地址复制给形参，这时形参和实参保存的是指向同一个存储在堆空间的数据，所以操作的是同一个对象（保存的同一个地址，操作的同一个对象）
html元素：
1、获取浏览器视口的大小：
var html = document.documentElement;
html.clientWidth;|html.clientHeight;（不包括滚动条的部分）
window.innerWidth;|window.innerHeight;（包括滚动条的部分）
2、获取html元素的宽高：
先获取元素
元素名.offsetWidth|元素名.offsetHeight;
事件
1、事件传播|事件传递|事件流
1、一个事件发生后，会在子元素和父元素之间传播，这种传播分为三个阶段
第一阶段：从window对象传到目标节点（上层传到底层），称为“捕获阶段”
第二阶段：在目标节点上触发，称为“目标阶段”
第三阶段：从目标节点又传导回window对象（底层传回上层），称为“冒泡阶段”
事件冒泡+事件捕获+事件真正的触发者等各个分支构成了js的事件机制
2、非IE浏览器的事件绑定
1、事件绑定名称：事件绑定发生在哪里就称为什么事件
（1）、html事件：事件绑定发生在页面内（可一次性绑定多个函数、可一次性绑定多个事件、支持冒泡）
<标签 on事件名 = “调用函数1();调用函数2()…”></标签>
修改功能需要不断地修改源码（耦合性太高）
html事件的解绑：相当于正常的修改元素的属性
** 元素.removeAttribute(‘on事件名’);**
（2）、DOM0事件：在js脚本中，直接通过“on+事件名”方式绑定的事件称为DOM0事件
** 元素.on事件名 = function(){}**
元素[‘on事件名’] = function(){}
注意：dom0事件绑定有名函数不要加上()：
function test(){
console.log('我被点击了');
}
button.onclick = test; // 不能写成button.onclick = test(); 否则不用单机就会执行test函数
当元素绑定多个相同类型dom0事件（如onclick事件），则只有最后一个事件生效
可以绑定不同类型的事件
>dom0事件的解绑：
**直接将对应的属性值置为空：button.onclick = '';**
**dom0和html事件实质都是对元素属性的操作**
（3）、DOM2事件
元素名.addEventListener(事件类型,函数,指定事件是否在冒泡或捕获阶段执行); ---- false默认事件句柄再冒泡阶段执行，true事件句柄再捕获阶段执行
DOM0中:on+'type'
DOM2中:'type'
div1.addEventListener('click',function(){
console.log('我是div1，被点击了');
})
注意：
1)当不写true或false的时，dom2默认事件冒泡
2)dom2可以一次性绑定多个事件，执行顺序按照绑定的顺序依次进行
3)事件流的执行顺序：先执行捕获再执行冒泡。事件真正的触发者先执行捕获还是冒泡要看声明的顺序：
var div1 =document.querySelector('.div1');
var div2 =document.querySelector('.div2');
window.addEventListener('click',function(){
console.log('我是window，被点击了，我是冒泡');
})
window.addEventListener('click',function(){
console.log('我是window，被点击了，我是捕获');
},true)
div1.addEventListener('click',function(){
console.log('我是div1，被点击了，我是冒泡');
})
div1.addEventListener('click',function(){
console.log('我是div1，被点击了，我是捕获');
},true)
div2.addEventListener('click',function(){
console.log('我是div2，被点击了，我是冒泡');
})
div2.addEventListener('click',function(){
console.log('我是div2，被点击了，我是捕获');
},true)
4)匿名函数无法进行事件的解绑，外部函数或有名函数可以执行事件的解绑（如果采用事件捕获，则在解绑函数中也要将true写上）
function test(){
console.log("测试解绑事件");
}
btnCancle.onclick = function(){
div2.removeEventListener('click',test)
}
div2.addEventListener('click',test)
3、IE中的绑定事件：（在非IE浏览器不能被检测）
1、IE浏览器对HTML事件和DOM0事件没有兼容性问题
2、addEventListener：在IE9内可以使用事件捕获
3、IE8及其以下不支持addEventListener（使用attachEvent进行事件绑定，但是attachEvent非IE浏览器不支持）
4、IE8及其以下中的DOM2事件支持事件冒泡，但是不支持事件捕获
5、在IE9浏览器内如果一个元素绑定多个DOM2事件，则按绑定顺序依次执行，IE8及其以下中则按绑定顺序逆序执行
6、匿名函数无法解绑，外部函数或有名函数可以解绑（使用detachEvent解绑）
4、文档的加载顺序：onload
先触发DOMContentLoaded事件，后触发load事件
即：先将DOM树加载了，再加载DOM树的內容（如媒体文件）【先加载布局再加载页面內容】
html的执行顺序：
解析HTML语句;
加载外部脚本和样式表文件;
解析并执行脚本代码;
DOM树构建完成;
DOMContentLoaded执行;
加载图片等外部文件;
页面加载完毕;
load执行.
5、定时器：定时执行|间隔执行，每隔多长时间执行一次
setInterval(function(){
// 定时执行的代码
},毫秒数)
// 当文档加载完成后终止定时器
var t = setInterval(function(){
if(document.readyState === 'complete'){
console.log('---->'+document.readyState);
clearInterval(t);
}
}, 1000)
6、延时执行：setTimeout
setTimeout(function(){
console.log('setTimeout');
}, 3000);
7、onresize + setTimeout:
onresize：当尺寸发生改变的时候调用的事件
window.onresize = function(){
delayShow();
}
// 判断是否可以进门：
var flag = true;
function delayShow(){
if(flag){
// 随手关门
flag = false;
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
// 延时一秒再将flag变为true
setTimeout(function(){
flag = true;
}, 1000)
}
}
8、焦点事件：js当前正在和用户发生交互的节点称为焦点（form中常用）
1、语法：获得焦点和失去焦点可以使用DOM0和DOM2事件进行绑定
2、使用dom2绑定不支持事件冒泡，但是支持事件捕获
9、滚动事件：scroll事件会在文档或元素发生滚动操作时触发（首先有滚动条）
属性：scrollTop|scrollLeft表示文档滚动的距离（没有单位）
1、文档的滚动事件：
IE：document.documentElement.scrollTop|scrollLeft
非IE：document.body.scrollTop|scrollLeft;
注意：scrollTop|scrollLeft都是可读可写的属性（没有单位）
兼容性写法：
window.onscroll = function(){
// console.log('documentElement', document.documentElement.scrollTop); // 当没有<!DOCTYPE html>时值非IE为0；有的话，IE和非IE都有值
// console.log('body', document.body.scrollTop); // 当没有<!DOCTYPE html>时非IE有值，否则为0；IE浏中不管有没有<!DOCTYPE html>都为0
// 兼容性写法：
var tempScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(tempScrollTop);
}
2、元素的滚动事件：
没有兼容性问题；
scrollTop|scrollLeft都是可读可写的属性（没有单位）
元素出现滚动条的方式：
overflow:scroll;|overflow-x:scroll;|overflow-y:scroll;|overflow:auto;
10、键盘事件：当用户敲击键盘时触发的事件
1、keydown：键盘按下
2、kepress：键盘按下（只捕获能够显示再屏幕中的字符，即不捕获功能键）
3、keyup：键盘弹起
4、event.keyCode：返回按键的编码值
5、event.key：获取按键
11、触摸事件
1、PC端无法响应触摸事件
2、可以使用dom0和dom2事件进行绑定
3、可以响应click事件
4、触摸对象的属性
this对象
this代表函数运行时，自动生成的一个用来指代函数调用者的对象，只能在函数内部使用**（谁调用就指向谁）**
1、html事件绑定中，this指向window对象
2、DOM0和DOM2指向当前元素（谁调用指向谁）
注意：当事件冒泡时，this指向当前的元素：
<div class="box">
<p class="p1">123456789</p>
</div>
<script>
var box = document.querySelector('.box');
var p1 = document.querySelector('.p1');
box.onclick = function(){
console.log('target',event.target); // 事件真正触发者：p1
console.log('currentTarget',event.currentTarget);
console.log(this); // 事件监听者div
} // 点击p1时，this指向的div，不是事件真正的触发者（div调用this）
</script>
event事件
1、非IE中的event事件：
1.1 event对象及event对象方法
事件对象（event对象）：事件触发时，会自动生成一个描述世间所有信息相关信息的对象（比如触发事件的元素、事件的类型）
IE中不支持event对象
event的兼容性写法：
box.onclick = function(event){
var event = event||window.event;
console.log(event);
}
1.2 event中常用的属性和方法
event.type：触发事件的具体属性
event.bubbles：判断当前时间是否支持冒泡
event.eventPhase：事件传导至当前节点时处于什么状态：
1：事件处于捕获状态
2：事件处于真正的触发者
3：事件处于冒泡状态
event.target|event.currentTarget：事件真正的触发者|事件的监听者
1.3 取消节点默认行为+取消事件传递
1、取消事件传递：event对象提供了一个名为stopPropagation的方法，用来阻止事件从当前节点传播到下一个节点，可以阻止冒泡和捕获
event.stopPropagation();
2、取消节点默认行为：event对象提供了一个名为prevenDefault的方法，用来取消节点的默认行为（如点击a标签会跳转到默认节点，则阻止a的跳转）
event.prevenDefault();
2、IE中的event事件：
2.1 event对象及event对象方法
1、在IE浏览器下使用srcElement返回当前事件的触发者，不支持target
兼容性写法：
var target = event.target||event.srcElement;
2、cancelBubble属性用来阻止事件在当前节点上的冒泡行为：
event.cancelBubble = false; // 默认值
event.cancelBubble = true; // 阻止冒泡
3、returnValue：是否取消当前节点的默认行为：
event.returnValue = false; // 取消默认的行为
event.returnValue = true; // 默认值
2.2 event中常用的属性和方法
2.3 event对象在不同的浏览器下的区别：
1、非IE中event对象的默认值时undefined，IE中event对象的默认值是null
// 直接在公共区域输出
console.log(event);
event对象的兼容性写法：
box.onclick = function(event){
var event = event||window.event;
console.log(event);
}
|