第二篇js

模拟重载

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);
}