1、Function
作用域：2种
1、全局：随处可用，可以被反复使用。缺点：容易被污染
2、函数：只能在函数内部调用时使用，不会被污染。缺点：一次性的，是会自动释放的
***函数的执行原理：
1、程序加载时：
创建执行环境栈（ECS）：保存函数调用顺序的数组
首先压入全局执行环境（全局EC）
全局EC引用着全局对象window
window中保存全局变量和全局函数
2、定义函数时
创建出函数对象：封装代码段
在函数对象中有一个scope（作用域）属性：记录着此函数来自的作用域是哪里
全局函数的scope都是window
3、调用前
在执行环境栈（ECS）压入新的EC（函数的EC）
创建活动对象（AO）：保存着本次函数调用时用到的局部变量
在函数的EC中有一个scope chain（作用域链）属性引用着AO
AO有一个parent属性是函数的scope引用着的对象
4、调用时：正是因为前面三步，我们才有了变量的使用规则：优先使用局部的，局部没有找全局，全局没有就报错
5、调用完：函数的EC会出栈，AO自动释放，局部变量也就自动释放了
***两链一包：
作用域链：以函数的EC的scope chain属性为起点，经过AO，逐级引用，形成的一条链式结构
作用：查找变量，带来了变量的使用规则：优先使用局部的，局部没有找全局，全局没有就报错
1、*****闭包：我们发现全局和函数都有缺点，希望保护一个【可以反复使用的局部变量】的一种词法结构 - 其实还是函数
何时使用：希望保护一个【可以反复使用的局部变量】的时候
如何使用：
1、两个函数进行嵌套
2、外层函数创建出受保护的变量
3、外层函数要return出内层函数
4、内层函数要去操作受保护的变量
function f1(){
创建的受保护的变量
return function(){
操作受保护的变量
}
}
强调：
1、判断是不是闭包，有没有两个函数嵌套，返回内层函数，内层函数在操作受保护的变量
2、外层函数调用几次，就会创建几个闭包，受保护的变量就有了几个副本
3、同一次外层函数调用，返回的内层函数，都是在操作同一个受保护的变量
缺点：受保护的变量，永远不会被释放，使用过多，会导致内层泄漏 - 不可多用
问题：应该在哪里用呢？ - 防抖节流
1、三个事件需要防抖节流
1、elem.onmousemove - 鼠标移动事件
2、input.oninput - 每次输出/改变都会触发
3、window.onresize - 每次窗口的大小发生变化就会触发
公式：
function fdjl(){
var timer=null;//2
return function(){//3、
if(timer){clearTimeout(timer);timer=null}//关闭之前的定时器
timer=setTimeout(function(){//开启定时器，等1s才执行
//操作由你来书写
},1000)
}
}
var result=fdjl();
2、Object：对象：Array、Function、RegExp、String...对象具有属性和方法，都是预定义好的，现在学会自定义对象
面向对象：三大特点：封装、继承、多态： 1、***开发方式：面向对象 和 面向过程; 1、面向过程：经过 - 开始->结束，我们一直以为的开发方式就是面向过程，先干什么再干什么最后干什么 2、面向对象：对象（属性和方法），js有一句话万物皆对象：假设一个人是一个对象的话： 属性：姓名、身高、体重、性别 方法：吃饭、睡觉、拉粑粑 为什么要面向对象：现实中所有的数据都必须包含在一个事物中才有意义 何时使用面向对象：以后做任何操作都要封装在一个对象中
2、封装：创建自定义对象：3种
1、*直接量方式：适合创建单个对象
var obj={
"属性名":属性值,
...
"方法名":function(){},
...
}
强调：1、其实属性名和方法名的双引号可以省略不写 - 暂时建议你加上为了以后学习的json数据格式
2、访问对象的属性和方法
*obj.属性名 === obj["属性名"]
*obj.方法名(); === obj["方法名"]();
建议使用.访问属性和方法，更简单
***js中一切都是对象，一切对象的底层都是hash数组
3、访问到不存在的属性，返回undefined
4、可以随时随地的添加新属性和新方法
5、希望获取出对象所有的东西：遍历：for in，obj[i]才能拿到
6、***如果你希望在对象的方法里使用对象自己的属性：写为this.属性名
*****难点：this的指向：
1、单个元素绑定事件 this->这个元素
2、多个元素绑定事件 this->当前触发事件的元素
3、函数中this->谁在调用此方法，this就是谁
4、定时器中this->window
5、箭头函数this->外部对象
6、构造函数中this->当前正在创建的对象
2、预定义构造函数方式：var obj=new Object();//空对象 - 垃圾
//需要自己后续慢慢追加属性和方法
obj.属性名=属性值;
obj.方法名=function(){};
以上两个方法都有一个缺陷：一次只能创建一个对象
3、自定义构造函数方式：2步
1、创建自定义构造函数
function 类名(name,age,salary){
this.name=name;
this.age=age;
this.salary=salary;
}
2、调用构造函数创建出对象
var obj=new 类名(实参,...);
面向对象：
优点：1、逼格高，所有的属性和方法都保存在了一个对象之中 - 更符合现实，更有意义
2、每个功能特地分开书写，越细越好 - 便于维护
3、铁索连舟 - 一个方法触发多个方法联动
缺点：对新手不友好，this的指向非常恶心
------------------day15-2022.4.19--------------------
1、Object：三大特点：封装、继承、多态
1、*****继承：父对象的成员（属性和方法），子对象可以直接使用
为什么：代码重用！节约内存空间！提升网站性能！
何时继承：只要多个子对象公用的属性和【方法】，都要集中定义在父对象中
2、***如何找到父对象（原型对象）：保存一类子对象共有属性和共有方法的父对象
1、对象名.__proto__;//必须先有一个对象
2、构造函数名.prototype;//构造函数名：Array/Object/String/Number/Boolean/RegExp/Date...几乎人人都有，除了Math
3、面试题：两链一包：作用域链（查找变量）、原型链（查找属性和方法）、闭包（保护一个反复使用的局部变量）
每个对象都有一个属性：.__proto__，可以一层一层的找到每个人的父亲，形成的一条链式结构，我们就称之为叫做原型链
可以找到所有父对象的成员（属性和方法），作用：查找找共有属性和共有方法
最顶层是Object的原型，上面放着我们很眼熟的toString方法，怪不得人人都可以使用toString
JS万物皆对象
4、有了原型对象，设置共有的属性和方法
原型对象.属性名=属性值
原型对象.方法名=function(){};
***继承具有非常多的鄙视题：
1、判断是自有还是共有：
1、判断自有：obj.hasOwnProperty("属性名");
如果为true，说明是自有，如果为false，可能是没有或共有
2、判断共有：
if(obj.hasOwnProperty("属性名")==false&&"属性名" in obj){//in关键字会查找整条原型链
共有
}else{
没有
}
完整版：
if(obj.hasOwnProperty("属性名")){
自有
}else{
if("属性名" in obj){
共有
}else{
没有
}
}
2、修改&删除：自有和共有
自有：修改：obj.属性名=新值;
删除：delete obj.属性名;
共有：修改：原型对象.属性名=新值; - 千万不要直接在本地做操作，非常危险，添加上一个同名属性
删除：delete 原型对象.属性名; - 如果对本地删除，没有任何效果的
3、如何为老IE的数组添加indexOf方法 - 如何为一类人添加共有方法
//判断是不是老IE
if(Array.prototype.indexOf===undefined){
//我为数组类添加了一个indexOf方法
Array.prototype.indexOf=function(key,starti){
//原理
//用户如果没有传入开始位置，则设置为0
starti===undefined&&(starti=0);
//从开始位置处，循环当前数组的每一个元素
for(var i=starti;i<this.length;i++){
//每一个元素和用户传入的关键字进行比较，如果比较到了
if(this[i]==key){
//返回下标
return i;
}
}
//没找到返回-1
return -1;
}
}
4、判断x是不是一个数组 - 4种方式
1、判断x是不是继承自Array.prototype;
Array.prototype.isPrototypeOf(x);//true说明是一个数组
2、判断x是不是由Array这个构造函数创建的
x instanceof Array;//true说明是一个数组
3、Array.isArray(x);//true说明是一个数组，只有数组可以这么判断，ES5提供的一个新方法，老IE都不支持
4、输出【对象的字符串】形式
在Object的原型上保存着最古老最原始的toString方法
原始的toString输出形式：[object 构造函数名]
***多态：多种形态：子对象觉得父对象的成员不好用，在本地定义了同名成员覆盖了父对象的成员
固定套路：借用：Object.prototype.toString.apply(x)
if(Object.prototype.toString.apply(obj)==="[object Array]"){
console.log("数组")
}else{
console.log("不是数组")
}
5、如何实现自定义继承
1、两个对象之间继承：子对象.__proto__=新父对象
2、多个对象之间继承：构造函数名.prototype=新父对象
时机：应该在开始创建对象之前设置好继承关系
-----------------------day16-2022.4.20--------------------
1、ES5： 1、保护对象：保护对象的成员（属性和方法） 如何保护： 1、四大特性 - 每一个属性或方法都有四大特性 如何设置四大特性： Object.defineProperties(obj,{ "属性名":{ value: 实际保存值的地方, writable: true/false,//开关：控制着这个属性是否可以被修改 enumerable: true/false,//开关：控制着这个属性是否可以被for in循环遍历到 configurable: true/false,//开关：控制着这个属性是否可以被删除 } })
2、三个级别：
1、防扩展：禁止给对象添加新属性
Object.preventExtensions(obj);
2、密封：禁止给对象添加新属性和删除属性
Object.seal(obj);
3、冻结：禁止给对象添加新属性和删除属性和修改属性
Object.freeze(obj);
其实保护对象对我们程序员并不重要：为什么
1、如果你用的是面向过程，你保护个屁
2、别人基本不可能知道我们的对象名叫什么
3、前辈们都没有保护，你保护个啥
学习的目的：应付鄙视和面试
2、数组的新的API：3组6个
1、判断：判断结果一定是一个布尔值
every：每一个 - 要求每一个元素都要满足，结果才为true，只要有一个不满足，结果则为false - 类似&&：碰到false就不会再执行后续操作了
语法：arr.every(function(val,i,arr){
//val - 当前值
//i - 当前下标
//arr - 数组本身
return 判断条件
})
some：有一些 - 要求每一个元素都不满足，结果才为false，只要有一个满足，结果则为true - 类似于||：碰到true就不会再执行后续操作了
语法：arr.some(function(val,i,arr){
return 判断条件
})
2、遍历：将数组中每一个元素取出来执行 相同 或 相似的操作
forEach：遍历数组，直接修改原数组
语法：arr.forEach(function(val,i,arr){
直接做操作
})
map：遍历数组，不修改原数组，返回一个新数组
语法：var newArr=arr.map(function(val,i,arr){
return 操作;
})
3、汇总和过滤：
过滤：筛选出自己想要的，但是不会修改原数组
语法：var newArr=arr.filter(function(val,i,arr){
return 判断条件;
})
汇总：把数组中的每个元素都汇总到一起
语法：var result=arr.reduce(function(prev,val,i,arr){
return prev+val;
},基础值)
以上6个API的底层都是for循环，目的 - 简化for循环
3、Object.create()：希望根据父对象创建子对象，继承自动设置完毕 语法：var 子对象=Object.create(父对象,{ "自有属性":{四大特性}, ... })
4、面试：严格模式：很严格 开启：在你的任何作用域的顶部都可以加上这句话："use strict" 功能：1、禁止给未声明的变量赋值 - 解决了全局污染 2、静默失败升级为错误
5、call/apply/bind：不是自己的方法也可以使用，不管是笔试、面试、实际开发都很常用
call/apply：【临时替换函数中的this】 - 借用
语法：函数名.call(借用的对象,实参,...); - 单独传入每一个实参
函数名.apply(借用的对象,[实参,...]); - 只能传入一个实参，是一个数组，但是其实apply也会悄悄的将数组打散
强调：call/apply，相当于立刻调用函数，立刻执行
bind：【永久替换了函数中的this】 - 买
3件事：
1、创建了一个和原函数功能完全相同的新函数
2、将新函数中的this永久的绑定固定为了指定的对象，别人借不走
3、将新函数中的部分参数永久固定
语法：var 新函数=原函数.bind(指定对象,永久固定参数,...); - 不是立刻执行，需要自己调用
强调：bind绑定的新函数是没有办法被call/apply借走的
个人更推荐：call/apply - 借，白嫖
固定套路：
1、Math.max/min.apply(Math,arr)
2、Object.prototype.toString.call/apply(arr)==="[object Array]"
3、***类数组转为普通数组：保存一下=Array.prototype.slice.call/apply(类数组)
ES5其实并没有任何简化操作，只是提供了更多的API
2、ES6：简化了语法 - 变化较大
1、*模板字符串：可以再字符串中放入变量，不需要在做字符串的拼接了，简化了输入法的切换，${}还实现了一个简单的js环境
语法：`我的名字叫${name}`
2、*块级作用域：尽量以后创建变量【优先】使用let关键字
let 变量名=值;
作用：
1、禁止了声明提前
2、添加了块级作用域：一个{}就是一个块
3、记录着当前触发事件的元素的下标
3、***箭头函数：简化回调函数
公式：去掉function，在()和{}之间添加=>，如果形参只有一个，省略()，如果函数体只有一句话，省略{}，如果函数体只有一句话并且是return，return和{}都省略
特殊：千万不要将事件也简化为箭头函数 - this会失效 - 暂时
4、for of循环 - 垃圾
for(var v of arr){
v;//当前元素
}
缺点：1、不能修改原数组，只能返回新数组
2、不支持hash数组，不支持对象
------------------------day17-2022.4.21----------
1、什么是DOM：Document Object Model（文档对象模型） 将每一个标签/元素/属性/文本/注释，看做了一个DOM节点/元素/对象（提供了操作这些东西的属性和方法）
面试题：HTML/XHTML/DHTML/XML HTML - 网页 XHTML - 更严格的网页 DHTML - Dynamic：动态的网页，其实并不是新技术、新概念，只是将现有技术的整合统称，使我们网页在离线版也具有动态效果 DHTML：HTML+CSS+JS(dom) XML - 数据格式
DOM：原本是可以操作一切结构化文档的 HTML 和 XML，后来为了方便各类开发者分为了3个部分 1、核心DOM：【无敌】，既可以操作HTML 和 XML 缺点：API比较繁琐
2、HTML DOM：只能操作HTML，API简单，缺点：比如属性部分，只能操作标准属性，不能操作自定义属性
3、XML DOM：只能操作XML，XML基本已经被淘汰了 - 现在最流行的数据格式json代替了
开发建议：优先使用HTML DOM，HTML DOM实现不了的时候在用核心DOM进行补充
2、DOM树：树根：document - 不需要我们创建，一个页面只有一个document：由浏览器的js解释器自动生成 可以通过数个你找到每一个DOM节点/元素/对象，提供了很多很多的API
3、每个DOM元素都有三大属性： 1、xx.nodeType：描述节点的类型 document节点：9 元素节点：1 属性节点：2 文本节点：3
以前有用：判断xx是不是一个页面元素 - 因为以前我们找元素的方法和大家现在不一样
2、xx.nodeValue：描述节点值，说白了就是获取属性值
以前有用：因为我们获取一个属性值没有现在这么容易
3、***xx.nodeName：描述节点名称 - 判断xx是什么标签 - 后期搭配上事件委托（利用冒泡）
注意：返回的是一个全大写的标签名
今日唯一目标：学会找元素
4、通过 关系 获取元素
父：xx.parentNode;
子：xx.children; - 集合
第一个儿子：xx.firstElementChild;
最后一个儿子：xx.lastElementChild;
前一个兄弟：xx.previousElementSibling;
后一个兄弟：xx.nextElementSibling;
5、递归：简单来说就是函数中，又一次调用了函数自己，迟早有一天会停下来
何时使用：遍历DOM，专门用于【遍历层级不明确】的情况 - 不光可以遍历层级不明确的DOM树，还可以遍历层级不明确的数据
如何使用递归：2步
function 函数名(root){
1、第一层要做什么操作就直接做
2、判断他有没有下一级，如果有下一级再次调用此方法，但是传入的实参是下一级
}
函数名(实际的根节点)
算法：深度优先！优先遍历当前节点的子节点，子节点遍历完毕才会调到兄弟节点
缺点：同时开启大量的函数调用，消耗能存，只有一个情况采用：【遍历层级不明确】
递归 vs 循环
递归：优点：直观、易用
缺点：性能较低
循环：优点：性能高，几乎不占内存
缺点：难得一匹
6、遍历API：【遍历层级不明确】的情况：TreeWalker：一个在DOM树上行走的人 缺点：1、会自动跳过根节点的操作 2、只能遍历层级不明确的DOM树，而不能遍历层级不明确的数据 如何：固定公式： 1、创建tw对象： var tw=document.createTreeWalker(根元素,NodeFilter.SHOW_ALL/SHOW_ELEMENT);
2、反复调用nextNode方法找到每一个元素
while((node=tw.nextNode())!==null){
node要做什么操作
}
7、*API直接查找元素
1、按照HTML的特点去查找元素 1、id：var elem=document.getElementById("id值") 2、class/标签名：var elems=document.getElementsByClassName/TagName/Name("class/标签名"); 建议：表单控件元素尽量可以不写class，因为必须要写name
2、按照CSS的选择器去查找元素 1、单个元素：var elem=document.querySelector("任意css选择器"); 强调：万一选择器匹配到多个元素，只会返回第一个 没找到null
2、多个元素：var elems=document.querySelectorAll("任意css选择器");
强调：找到了集合，没找到空集合
更适合做复杂查找
面试题：getXXX 和 querySelectorXXX 有什么区别？
返回结果不同：
1、getXXX：HTMLCollection - 是一个动态集合
2、queryXXX：nodeList - 是一个静态集合
动态集合：根据DOM树的改变，动态集合也会悄悄改变，每一次修改DOM树，getXXX都会悄悄再次查找元素
缺点：每次都会悄悄重新查找，效率较低，不能使用forEach
静态集合：每次修改DOM树，静态集合都不会发生变化，只会认准你找的时候的第一次找到的元素
优点：每次不会悄悄重新查找，效率较高，支持forEach
