JavaScript学习
JavaScript ⭐⭐⭐⭐⭐
数组对象
数组属性与方法
属性：
length 获取或设置数组长度
方法：
(1)push()方法:当前最后面添加元素，返回当前数组长度
(2)pop()方法:去掉数组最后一个元素，返回除去元素
(3)unshift()方法:数组最前面添加元素，返回当前数组长度
(4)shift()方法:数组最前面移出元素，返回移出元素
(5)concat()方法:拼接数组或字符串，返回新数组,原来数组不变
(6)slice(start,end)方法:截取数组元素，返回新数组，原来数组不变
slice取值情况：左闭右开
slice(1)为索引1到最后元素
slice()为复制原来数组
slice(1,-1)为索引1到索引为-1
(7)reverse()方法:反转原来数组，返回一个新数组
(8)toString()方法:将数组元素转换为字符串并用逗号隔开
(9)join()方法:将数组元素用指定符号隔开并转换为字符串
(10)splice(index,howmany,add,add...)方法:在指定位置删除并添加元素，返回一个新数组
(11)indexOf()方法:查找某一元素在数组中第一次出现的位置并返回当前索引，没有找到返回-1
(12)lastIndexof():查找某一元素在数组中最后一次出现的位置并返回位置索引
es6新方法：
(13)Array.from()方法用于将两类对象转为真正的数组
eg: let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
(14)Array.of()方法用于将一组值，转换为数组
eg:Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
数组迭代
1.forEach （主遍历）
写法：数组.forEach(function(item,index){代码体,_arr})
item:代表当前遍历得这一项得元素
index:代表当前遍历得这一项得索引
_arr:代表当前正在遍历得数组
eg:
var arr=[a,b,c,d];
arr.forEach(function(item,index,_arr){
console.log(item+","+index);
console.log(_arr);
})
2.map方法（主计算）
定义：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
var arr=[11,23,67,43,54];
var newArr=arr.map(function(item,index,_arr){
console.log(item+','+index);
var x=item*2;
return x;
})
//newArr的结果为[22,46,134,86,108]
3.filter方法（主条件）
定义：对数组的每一项运行给定函数，返回满足条件的项并组成数组，与map相似
eg:var arr=[11,23,67,43,54,98];
var newarr=arr.filter(function(item,index,_arr){
return item%2==0;
})
console.log(newarr);// [54,98]
4.every方法（主与操作，全真为真才输出）
定义：对数组中的每一项运行给定函数，如果函数对每一项都返回true，则返回true，若一项为假，返回false
eg：
var arrs=[11,23,44,38,67];
var result=arr.every(function(item,index,_arr){
return item>10;
})//返回result结果为true的一项
5.some方法（主或操作，一真为真）
定义：对数组的每一项运行给定函数，如果函数任一项返回为true，则返回true
eg：
var arr=[11,23,87,44,67];
var result=arr.some(function(item,index,_arr){
return item>90;
})
数组归并(求和)
reduce方法
格式：var result=arr.reduce(function(prev,current,index,_arr){/*代码*/})
参数：prev 前一项
current 当前项
index 索引
eg:
var arr=[1,2,3,4,5];
var result=arr.reduce(function(prev,current,index,_arr){
var sum=prev+current;
return sum;
})
数组排序
sort方法 将数组排序，返回一个新数组
eg: var arr=[8,5,6,3,4,1];
arr.sort(function(a,b){
return a-b;//从小到大
return b-a;//从大到小
return 0;//不换位置
})
String对象
属性和方法：
(1)length属性:返回当前字符串的长度，它不能赋值
(2)索引取值:可以像数组一样通过索引取里面的某一个字符，但是不能赋值
(3)concat()拼接字符串,返回一个新的字符串
(4)slice(start?,end?)方法,用于截取当前的字符串形成一个新的字符串
(5)substring(start,end?)方法,返回一个新的字符串,不能为负数
(6)substr(start,length?)方法，start代表开始索引，length代表截取字符串的长度
(7)indexOf/lastIndexOf查找匹配的字符串，与数组里面的用法保持一致，找到以后返回索引 ，找不到返回-1
(8)split()方法 ，将字符串按照指字符隔开变成数组
(9)charAt(index)通过索引来取字符串里面的某一个字符
(10)startsWith()判断某个字符串是否以什么开始
(11)endsWith()判断某个字符串是以否是什么结尾
(12)includes()判断是否包含某个字符串，包含就是true,不包含是false
(13)trim()/trimLeft()/trimRight()用于去除字符串左右的空格，返回去除空格以后的字符串
(14)replace()方法，查找符合要求的字符串，然后替换成指定的字符串，并返回替换以后的结果
(15)padStart(maxLength,fillString)方法与padEnd(maxLength,fillString)方法,两个方法是一组方法，可以将字符串以指定的格式进行齐位数，如1要成三位数格式的字符串001。
DOM操作
通过JavaScript获取页面元素
(1)document.getElementById("div1");通过ID来获取页面的元素,通过这种方式去获取，永远只能够获取到0个(null)或1个,ID名称重复的情况下，则找到的永远是第一个
(2)document.getElementsByClassName("div2");通过class名称来获取页面元素,获取的是一个HTMLCollection的集合（类数组），具备数组的特性，不具备数组的方法
(3)document.getElementsByTagName("p");通过标签名称来获取页面元素
(4)document.getElementsByName("sex");通过name名称来获取页面上面的元素,获取的是一个NodeList的集合
(5)document.querySelector("#div1");通过querySelector()来获取元素,通过选择器来选择元素，如果找到了元素就返回1个元素，如果找不到就返回null,即使找到了多个元素，也只返回第1个元素 (6)document.querySelectorAll(".div2");通过querySelectorAll()来获取元素
Element属性
(1)children属性，获取当前元素下面的子级元素
(2)parentElement属性，用于获取当前元素的父级元素
(3)nextElementSibling属性，用于获取当前元素的下一个兄弟元素
(4)previousElementSibling属性，用于获取当前元素的前一个兄弟元素
(5)className属性，获取或设置当前元素的class名称
(6)classList属性，返回当前元素的class名称集合
(7)firstElementChild属性，获取当前元素下面的第一个子元素，相当于children[0]
(8)lastElementChild属性，获取当前元素下面的最后一个子元素
(9)innerText属性，获取或设置当前元素里面的文本内容
(10)innerHTML属性，获取或设置当前元素内部的HTML内容
(11)tagName当前属性会返回当前元素的标签名称（这个标签名称是全大写的
(12)value属性，它是表单元素里面才会有属性，可以对这个属性取值与赋值
(13)childElementCount当前元素的子元素的个数
Element常用方法
(1)createElement()方法，根据标签名创建一个标签元素
(2)appendChild()方法，向当前元素里面的最后去追加一个新的元素
(3)remove()方法，删除当前的元素（里面的子元素也会一并删除）
(4)removeChild()方法，删除指定的子元素，返回这个删除的子元素
(5)cloneNode()克隆一个相同的元素出来接收一个参数，这个参数是布尔类型，默认是false,如果给它一个参数true，则代表要克隆子元素
(6)insertAdjacentElement()方法，向指定的位置插入元素
常用内置对象
Math对象
(1)Math常数
Math.PI圆周率，约于等 3.14
Math.E,自然对数的底数，约等于2.718
Math.LN10,10的自然对值，约等于2.302
Math.LN2，2的自然对值，约等 于0.693
Math.SQRT2,2的平方根，约等于1.414
Math.SQRT1_2，0.5的平方根，约等于0.707
(2)Math方法
Math.abc()绝对值
Math.round()四舍五入
Math.floor()向下取整，返回小于或等于这个数的大最大整数
Math.ceil()向上取整，返回大于或等于这个数的最小整数
Math.pow(x,n)函数，取x的n次方的结果
Math.max()方法，用于求一系列数中的最大值
Math.min()方法 ，用于求一系列数中的最小值
Math.sqrt(n)取数字n的平方根
Math.random()获取0~1之间的一个随要数
Date对象
Date.now()方法，返回当前的时间。要注意，它返回的是一串数字，这个数字是时间戳，指的是从1970-1-1到现在的毫秒数
getFullYear()获取当前的年份的方法
getMonth()获取当前月份的方法 0~11
getDate()获取当前天数
getDay()获取星期几 0~6
getHours()获取小时数
getMinutes()获取分钟
getSeconds()获取秒钟
BOM编程
BOM全称：Browser Object Model，浏览器对象模型 ，它主要是将JavaScript与浏览器的特性进行了结合，主要就是浏览器里面的几个大对象
location对象
location指浏览器的地址栏对象
1. href 属性，返回当前浏览器地址栏里面的地址，如果对其赋值，则会跳转到新的网页地址
2. protocol 属性，返回 lcoation 地址中的协议，如 http:
3. hostname 属性，返回当前地址中的主机名称
4. port 属性，返回当前地址中的端口号， https 协议默认的端口号是 443 ， http 的协议默认是 80
5. host 属性，返回当前地址中的主机名称与端口号 hostname:port
6. pathname 属性，返回当前地址中的主机后面的路径名，如 /webExp/music/01.html
7. origin 属性，返回当前地址中的域信息，域包含协议，主机名与端口号
protocal//hostname:port 如 http://127.0.0.1:5500
8. search 属性，返回当前地址中的 ? 后面的的内容，如
http://127.0.0.1:5500/01location.html?username=biaogege&age=18 当中的 search 指的就是问题后面的内容 ?username=biaogege
9. hash 属性，返回当前地址中的哈希值，也就是 # 后面的东西，如
http://127.0.0.1:5500/01location.html#abcdefg 它的的hash就是 #abcdefg
10. assign() 方法，载入一个新地址，页面会跳转到这个新地址，与 href 属性的操作是一样的
11. replace() 方法，将当前地址替换成一个新的地址，跳转新的地址的网页，在访问的历史记录当中替换了这条记录
12. reload() 方法，重新加载当前页面，相当于刷新当前页面
history对象
history指当前浏览器的浏览记录
1. length 属性代表有几条历史记录，该属性只读
2. back() 相当于浏览器的后退功能，直到退到第一个就不能退了
3. forward() 相当于浏览器的前进功能，直到前进到最前面一个
4. go(step) ，在历史记录当中前进名后退，如果 step 是正数，则是前进，如果是负数则是后退，可以一次退多次或进多次
navigator对象
navigator指浏览器本身
1. appName 当前浏览器的名称
2. appVersion 浏览器的版本。一般不与实际的浏览器版本对应
3. cookieEnabled 是否启用了cookie
4. onLine 表示浏览器是否连接到了因特网
5. userAgent 浏览器的用户代理字符串，我们可以通过这个属性来判断用户在打开某一个网页的时候使用的是什么设备
6. maxTouchPoints 支持的最大触摸点数
7. getUserMedia() 获取电脑多媒体设备，如视频与音频
8. geolocation ，地理定位，它里面有一个 getCurrentPosition 的方法，可以实现浏览器的定位，定位成功以后里面有两个属性 coords 以及 timestamp coords 代表定位成功以后的坐标信息
latitude 纬度
longitude 经度
accuracy 准确性
speed 速度
altitude 海拔高度
altitudeAccuracy 海拔高度的准确性
heading 指南针方向
screen对象
当前的设备的屏幕对象
1. width 代表当前屏幕的宽度
2. height 代表当前屏幕的高度
3. colorDepth 颜色深度
4. orientation 屏幕的方向
5. availWidth 屏幕的可用宽度
6. availLeft 可用位置开始的横坐标
7. availTop 可用位置开始的纵坐标
window对象(重点)
window对象是Web浏览器端的最高对象，我们之前所学习的所有东西全都是直接或间接的来自于window。它指的就是当前的窗口
1. alert(message:string) 信息弹窗提示框
2. confirm(message:string):boolean 询问框，它有两个按钮选择，一个确定，一个取消。当点击取消的时候返回 false ，点击确定的时候返回 true
3. prompt(message?: string, _default?: string): string ,它会在页面弹出一个信息输入框，返回值是你输入的内容，如果点击了取消，则返回 null
4. open(url?: string, target?: string, features?: string, replace?: boolean): Window
第一个参数url代表要打开网页的地址，第二个参数target代表新网页打开的方式，第四个参数是否以replace的形式打开 ，它的第三个参数是新网页窗口打开的样式信息，它的参数如下
样式行为 说明
channelmode=yes|no|1|0 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes|no|1|0 是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes|no|1|0 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的window，还必须在影院模式。仅限IE浏览器
height=pixels 窗口的高度。最小.值为100
left=pixels 该窗口的左侧位置
location=yes|no|1|0 是否显示地址字段.默认值是yes
menubar=yes|no|1|0 是否显示菜单栏.默认值是yes
resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes
scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes
status=yes|no|1|0 是否要添加一个状态栏.默认值是yes
titlebar=yes|no|1|0 是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是yes
top=pixels 窗口顶部的位置.仅限IE浏览器
width=pixels 窗口的宽度.最小.值为100
5. close() 方法，关闭当前页面
6.onbeforeunload 事件，这个事件表示当一个网页要准备关闭的时候，它会触发
```js
window.onbeforeunload = function (event) {
event = event || window.event;
var msg = "你确定要关闭当前的这个页面，不考虑一下吗？";
event.returnValue = msg;
return msg;
}
7.onload 事件
window对象的onload事件比较特殊，它代表的是当前的浏览器中页面上面所有的元素已经加载好了，并且连 <img>,<link>,<script>,<audio>,<video> 的 src,href 等属性也加载完成onload事件不仅是加载完成了网页的DOM结构，连网页DOM中的 src 或 link 属都要加载完才会触发
事件
事件流来源
事件冒泡：事件由当前元素依次向上触发
事件捕获：事件由父到子依次向下触发
事件流：解决事件冒泡和捕获
DOM0级事件：事件没有标准化
DOM2级事件：事件流
事件三大要素：
(1)事件源：触发当前事件的DOM元素
(2)事件监听器：监听事件是否被触发，如果触发则调用相应的回调函数
(3)事件对象：event对象 -- 保存当前触发事件的相关信息，保存在回调函数的形参中，IE8及以下为：window.event
DOM0级事件
(1)HTML侵入式
<input type="button" onclick="checkit();">
(2)事件绑定
document.getElementById("").onclick = function(){
//事件处理函数
}
(3)移除事件
document.getElementById("").onclick = null;
注意：1.同一事件只能绑定一次
2.默认事件冒泡
DOM2级事件:
(1)事件绑定
event:事件名-不加"on"
function：事件处理函数
false：事件冒泡
true：事件捕获
格式:addEventListener(event,function,false/true)
(2)事件移除
格式：removeEventListener(event,function,false/true)
注意：1同一事件可以绑定多次
2.只能移除由addEventListener绑定的事件，不能移除匿名函数
3.阻止事件传递冒泡：`event.stopPropagation()`
作用：不影响当前元素的事件触发，但是会阻止把事件分派到其他节点
4.阻止默认行为：`event.preventDefault()`
DOM3级事件：
（1）在DOM2事件基础上，新增了事件（scroll，mousewheel，focus...）
（2）允许自定义事件
IE8及以下兼容：
1.绑定事件
attachEvent(event,function);//event需要加"on"
2.移除事件
detachEvent(event,function)
3.阻止事件传递
event.cancelBubble = true
4.阻止默认行为
event.returnValue = false
事件绑定格式
//DOM2级事件绑定
document.querySelector(".child").addEventListener("click",function(){
console.log("child点击事件");
},false);
function check(){
console.log("parent点击事件");
}
document.querySelector(".parent").addEventListener("click",check,false);
//DOM2级事件移除
//document.querySelector(".parent").removeEventListener("click",check);
document.querySelector(".child").addEventListener("click",function(event){
//event兼容写法
var e = event || window.event;
console.log(event);
e.stopPropagation(); //阻止事件传递
},false);
//不能移除DOM2级事件
document.querySelector(".parent").onclick = null;
事件委托
指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件。
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
client,scroll和offset
元素位置
offset偏移量(内容+内边距+边框)
offsetHeight: 元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。
offsetWidth: 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。
offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离
client可视区(内容+内边距)
clientWidth：元素内容区宽度加上左右内边距宽度。
clientHeight：元素内容区高度加上上下内边距高度。
scroll滚动条(内容+内边距)
scrollHeight：在没有滚动条的情况下，元素内容的总高度。
scrollWidth：在没有滚动条的情况下，元素内容的总宽度。
scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置
坐标位置
(1)clientX/Y：鼠标相对于浏览器左上角的坐标轴
(2)pageX/Y：鼠标相对于浏览器左上角的坐标轴 -- 计算滚动条的高度
pageX/Y = clientX/Y+滚动条高度
(3)offsetX/Y：鼠标相对于事件源左上角的坐标轴
(4)screenX/Y：鼠标相对于显示器左上角的坐标轴
防抖与节流
防抖(debounce)
防抖一：点击多次只获取最后一次
var btn=document.queryselector("button");
var timer=null;
btn.onclick = function(){
clearTimeout(timer);
timer=setTimeout(()=>{
console.log("发送请求")
}，1000)
}
节流(throttle)
节流一：每隔一秒执行一次函数
var btn=document.queryselector("button");
var flag=true;
btn.onclick = function(){
if(flag){
flag=false;
console.log("发送请求")；
setTimeout(()=>{
flag =true;
},1000)
}
}
面向对象（入门）
创建对象
第一种：
利用字面量创建
var obj={
name:lht,
age:23,
SayHi:function(){
console.log(999);
}
}
第二种：利用new Object创建对象
var obj=new Object();
obj.name="lht";
obj.age=23;
obj.SayHi=function(){
console.log(444);
}
第三种：利用构造函数创建对象
function star(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
}
var ldh=new star("刘德华",55,"男");
console.log(ldh.name);//刘德华
调用对象
(1)调用对象的属性---对象名.属性名
(2)利用HashMap调用----对象名['属性名']
(3)调用对象的方法-----对象名.方法名()
(4)利用new关键字调用----构造函数使用
创建多个对象
方法一：工厂模式(没有解决对象关联和识别)
function CreatePerson(name,age,job){
var obj=new Object();
obj.name=name;
obj.age=age;
obj.job=job;
return obj;//关键点
}
var person1=CreatePerson('lht',18);
var person2=CreatePerson("刘德华"，55);
方法二：构造函数模式
function person(name,age){
this.name=name;
this.age=age;
this.SayName=function(){
alert(this.name);
}
}
var person1=new person('lht',23);
var person2=new person('刘德华'，55)
构造函数
new关键字的过程：
（1）new调用一个空对象
（2）this指向空对象
（3）给这个空对象的构造函数添加属性和方法
（4）返回这个对象
构造函数与普通函数的区别；
（1）构造函数使用new来调用，普通函数用函数名()调用
（2）构造函数返回值一定是对象，普通函数返回值为对象或其他
（3）构造函数this指向当前对象，普通函数this指向window
（4）通过new执行构造函数可以不用括号
this指向
1.普通函数的调用，this指向Window,在严格模式下('use strict'),this指向undefined
2.在构造函数种，this指向实例化的对象
3.在事件回调种，this指向事件源(谁触发的事件)
4.对象中的方法调用，this指向调用它的对象
5.'call/apply/bind'时,this指向参数中的第一个参数(对象),如果不指定参数(包含null和undefined),在非严格模式下指向window，严格模式(包含null和undefined)下为undefined
面向对象(基础)
对象特殊属性
object.defineProperty()定义一个对象属性
(1)configurable:能否被delete属性删除，默认为true
(2)enumberable:能否通过for-in返回属性，默认为false
(3)writeable:能否修改属性的值，默认为true
(4)value:修改属性数据值，默认为undefined;
格式：Object.defineProperty(需要设置特殊属性的对象,"属性名",{
value:属性值,
configurable:属性是否能被删除,默认为false
enumerable:是否能被遍历,默认false
writable:是否能被修改，默认为false
})
eg: var person={
name:'李磊',
age:20,
sex:'男'
}
Object.definedProperty(person,"height",{
value:178,//属性值
configurable:false,
enumerable:false,
writable:false
})
console.log(person);
//name:'李磊', age:20,sex:'男'
person.sex="女";//修改属性
delete person.age;//删除属性
person.height=160;
//遍历对象
for(var key in person){
console.log(person[sky])
}
Object.defineProperties()定义多个对象属性
访问器(读取器)属性
访问器用来给对象的属性赋值(setter)和取值(getter),不能用于方法中，在`defineProperty` 中使用和Object.create()使用
用法1:
Object.defineProperty(obj,'属性名'，{
get:function(){
return 值;//最终获取到的值
}
set:function(val){
//val 为所赋的值
}
})
用法2:在Create()使用----可以指定创建对象的prototype
Object.create(proto,{
attr:{
configurable:false,
get:funtion(){
return val;
}
set:function(v){
console.log(v);
},
attr2:{
configurable:false,
get:funtion(){
return val;
}
set:function(v){
console.log(v);
}
}
}
})
获取属性的自身描述符
1.getOwnPropertyDescriptor():获取指定对象的自身属性描述符。自身属性描述符是指直接在对象上定义而非从对象的原型继承的描述符
Object.getOwnPropertyDescriptor(obj,attrname);
//返回configurable,value,enumberable,writable,get,set等自身属性描述符，但是，绑定在原型对象的属性无法获取
2.getOwnPropertyDescriptors(obj):返回指定对象的自身属性描述符
遍历对象属性
1.for...in：不能遍历enumerable=false的属性
2.Object.keys(obj)：获取指定对象的所有enumrable=true属性，并返回一个属性数组，然后通过forEach遍历属性数组
var keys = Object.keys(obj);
keys.forEach(function(k){ //k：就是属性
obj[k];
})
3.Object.getOwnPropertyNames()：获取指定对象的所有属性，并返回一个属性数
判断对象包含某个属性
1.遍历判断
2.in操作符："attr" in obj 判断attr属性是否在obj中，如果存在返回true
3.`obj.hasOwnProperty("attr")`：判断对象是否拥有某个属性，是Object原型对象上的方法
面向对象(高级)
原型和原型链
封装
封装函数格式
(function(){
//构造函数
function Dialog(container,text,time){
this.dialog = document.querySelector(container); //获取对话框
this.text = text || "这是一个提示框"; //提示内容
this.time = time || 2000; //提示框显示的时长
/*this.options = {
text:text,
time:time
}*/
}
//显示提示框
Dialog.prototype.show = function(callback){
this.dialog.innerHTML = this.text; //将提示内容显示到提示框
this.callback = callback || function(){}; //回调函数
this.dialog.style.opacity = 1; //显示提示框
var _self = this;
//计算显示的时长
setTimeout(function(){
_self.hide();
},this.time);
this.callback(); //执行回调函数
return this; //将当前对象返回 -- 链式调用
}
//关闭提示框
Dialog.prototype.hide = function(callback){
this.callback = callback || function(){};
this.dialog.style.opacity = 0; //关闭提示框
this.callback(); //调用回调函数
return this;
}
//测试方法
Dialog.prototype.test = function(callback){
this.callback = callback || function(){};
console.log(666);
this.callback();
return this;
}
window.Dialog = Dialog; //将Dialog暴露出来
})();
var box = new Dialog("#dialog");
box.show(function(){
console.log("显示完成...");
}).test();
继承
组合继承：构造函数+原型对象
方法一：call()/apply()/bind()
格式；fun.call(thisArg,attr,attr... )
作用:(1)调用函数 (2)改变this指向
缺点：无法表示子类和父类的继承关系，子类直接到object，无法继承原型属性/方法
eg:
function Father(uname,age){
this.uname=uname;
this.age=age;
}
function Son(uname,age){
Father.call(this,uname,age);
}
var son=new Son('刘德华'，'56');
console.log(son);/子获取到父亲的属性/
方法二：将父的实例绑定到子的原型对象上--需要手动指定constructor
//1.单个实例继承父
cat1.__proto__ = new Animal([args..]);
cat1.__proto__.constructor = Cat; //指定构造函数
//2.所有实例继承父
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
var cat1 = new Cat("橘猫","黄色","喵喵~~","小鱼干");
//注意：必须将实例化写在最后
第三种.所有实例继承父（传参）
function Cat([args...]){
//Cat.prototype = new Animal([args...]); //错误，相当于重新创建了一个新的prototype，new的时候用的是本身自带的
this.__proto__ = new Animal([args...]);
this.__proto__.constructor = Cat;
}
var cat1 = new Cat("橘猫","黄色","喵喵~~","小鱼干");
对象的深拷贝
1.简单深拷贝
//数组深拷贝
var arr=[1,2,3];
var arr2=[];
// 第一种 遍历
for(var i in arr){
arr2.push(arr[i]);
}
arr2.push(4);
// 第二种 concat
arr2=arr2.concat(arr);
// 第三种 slice
var arr2=arr.slice(0);
arr2.push(4);
console.log(arr,arr2);// arr=[1,2,3] arr2=[1,2,3,4]；
2.对象深拷贝
var simpleObj={
x:1,
Y:2,
Z:3
}
var newObj={};
/第一种/ 只能拷贝为enumberable为true的元素
for(var x in simpleObj){
newObj[x]=simpleObj[x];//---HashMap方法
}
newObj.w=4;
console.log(newObj, simpleObj);//newObj={x:1,Y=2,Z=3,W=4} simpleObj={x:1,Y=2,Z=3}
/第二种/ 可以拷贝enumerable为false的属性
var keys = Object.getOwnPropertyNames(simpleObj);
keys.forEach(function(k){
newObj[k] = simpleObj[k];
});
/第三种/ 利用assign拷贝--不能拷贝enumerable为false的属性
Object.assign(newObj,simpleObj....);
newObj.w = 4;
3.复杂深拷贝()
对象的深拷贝
var oldVal={
x:1,
y:null,
Z:[1,2,3],
W:{
name:['李雷','韩梅梅',{a:1,b:2},'Lily'];
}
}
function deepCopy(oldVal){
//先判断数据类型是否是简单数据类型
if(typeof oldval !='object'|| oldVal==null)
return oldVal;
//剩下的就是Object类型
if(Array.isArray(oldVal)){//判断是否是数组
//数组
var newVal=[];
for(var i=0;i<oldVal.length;i++){
newVal.push(deepCopy(oldVal[i]));
}
}
var newVal={};//最终返回的值
var keys=Object.getOwnPropertyNames(oldVal);
keys.forEach(function(k){
newVal[k]=deepCopy(oldVal[k]);
});
return newVal;
}
var newVal=deepCopy({x:1,y:2,Z:{m:1,n:2,Z:{a:1,b:2}}});
console.log(newVal)
多态
1.通过数据类型，个数，顺序实现同一个函数有多个不同的函数体就是多态
2.JS是弱类型语言，数据类型由所赋的值来决定的
3.JS不支持多态
宏任务和微任务
宏任务:常见的定时器,用户交互事件等等
微任务:Promise相关任务,MutationObserver等
宏任务和微任务执行原则
第一个原则：全局的同步代码运行结束时开始执行
第二个原则：同一层级下微任务永远比宏任务先执行即Promise.then比setTimeout先执行
第三个原则：每个宏任务,都单独关联了一个微任务队列
function app() {
setTimeout(() => {
console.log("1-1");`第三个`(异步代码宏任务)
Promise.resolve().then(() => {
console.log("2-1");
});
});
console.log("1-2");----`第一个`(同步代码)
Promise.resolve().then(() => {
console.log("1-3"); `第二个`(异步代码微任务)
setTimeout(() => {
console.log("3-1");
});
});
}
app();
结果为：1-2 1-3 1-1 2-1 3-1
版权声明：本文为残星落影原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。