JS基础知识点总结
提示：有一些点没有展开，有问题的地方小伙伴们自己展开哦。
一、变量类型和计算
变量类型：undefiened、String、number、boolean、object({},[],null)、function()
引用类型（a、b指针指向一个地址）：对象、数组、函数
变量计算（强制类型转换）：字符串拼接、== 中运算符（100 ’100’ //true, 0’ ‘ //true, null == undefined //ture）、if(a)、逻辑运算符
注意：0、false、undefined、‘’、NaN、null在if中都会强制转化成false
1.JS中使用typeof能得到哪些类型？
六种：undefiened、String、number、boolean、object({},[],null)、function(console.log)
2.何时使用 === 何时使用 == ?
If (obj.a == null) {
//这里相当于obj.a === null || obj.a === undefined jquery中的源码这么写的 其他情况全部用 ===
}
3.JS中有哪些内置函数？
–数据封装类对象 内置对象 Json Math
Object Array Boolean Number String Function Date RegExp Error
4.JS变量按照存储方式区分为哪些类型，并描述其特点？
值类型：分块存储，存储在栈中
引用类型：存储在堆中（引用类型若复制的话，为了节省内存空间 ，公用一个内存块，指针指向同一地址，即为浅拷贝 ）
特点：赋值的话值类型就是简单的copy值，但是引用类型的话赋值就是变量指针的一个copy，并不是真正意义上的拷贝。
5.深浅拷贝的区别
基本数据类型的特点：直接存储在栈(stack)中的数据
引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里。
引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。
深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。
浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。
把字符串变成对象：JSON.parse(‘{“a”:10, “b”:20}’)
二、原型与原型链 -构造函数
知识点：
构造函数：大写字母开头的函数是构造函数。
构造函数的扩展：
var obj = new Object(); var a = new Array; var a = new Function();
使用instaneof判断一个函数是否是一个变量的构造函数 a instanceof Object
原型规则和实例：
1).原型规则：所有的引用类型：数组、对象、函数（除了null）都具有对象的特性（obj.a = 22;）。
例如：var a = [1,2,3]; a.age = 22; a = [1,2,3,22];
2).所有的引用类型（数组、对象、函数、除了null），都有一个_proto_属性（隐式原型），属性值是一个普通的对象。
Var obj = {}； obj.a = 100; console.log(obj.proto);
3).所有的函数都有一个prototype（显式原型）属性，属性值也是一个普通的对象。
function fn () { fn.a = 100; } console.log(fn.prototype);
4).所有引用类型的_proto_属性值指向它的构造函数的”prototype“属性值 console.log(obj.proto === Object.prototype); //true 隐式原型等于构造函数的显式原型 Object是obj的构造函数
5)当试图得到一个对象的某个属性时（如图15行），如果这个对象没有这个属性，那么会去它的_proto_(即他的构造函数的prototype)中寻找。
Instanceof
用于判断引用类型属于哪一个构造函数的方法。
1.如何准确判断一个变量是数组类型？
Var arr = [] ;
typeof varr ; //Object
varr instanceof Array;//true
2.写一个原型链继承的例子
写一个dom封装查询的例子
3.描述new一个对象的过程
创建一个新对象;this指向这个新对象; 执行代码,即对this赋值;返回this;
4.Zepto（或其他框架）源码中如何使用原型链
5.作用域和闭包
知识点：
1）执行上下文：
Console.log(a); //undefined
Var a = 100;
范围：一段函数或者一个函数
全局:变量定义 变量声明
函数：变量声明、变量声明、this、arguments
2）this：
this要在执行时确认，定义时是无法确认。
作为构造函数执行
作为对象属性执行
作为普通对象执行
Call apply bind
Call：
function fn1 (name) {alert(name); console.log(this);}
fn1.call({x:5}, ‘zhangsan’); //第一个参数为修改this指向的内容 否则this指向window
Bind: 与call超级类似。
Var fn2 = Fucntion fn2 (name) {alert(name); console.log(this);}.bind({x:5});
Fn2.call({x:5}, ‘zhangsan’); //修改的方式不一样而已
传多参数的情况下apply是一个数组 call和bind都是正常的参数之间逗号隔开
作用域：
js没有块级作用域，只有函数和全局作用域
自动全局
如果您为尚未声明的变量赋值，此变量会自动成为全局变量。
这段代码将声明一个全局变量 carName，即使在函数内进行了赋值。
if(true) {var name = ‘zhangsan’; }console.log(name)
作用域链：当前作用域没找到定义的变量，就会像父级寻找这个变量。
闭包：作用域的定义时候的作用域 而不是执行时候的作用域
闭包的使用场景：函数作为返回值 函数作为参数传递
1.说一下变量提升的理解
变量的定义 函数的声明（注意和函数表达式的区别）
例如：
a(); function a() {console.log(‘dd’)} //dd
d(); var d = function () {console.log(‘ff’)} //报错
例如：
Fn(); //后声明，可以执行
Function fn() {}
Fn1() ; //后声明，无法执行
Var fn1 = Function() {}
因为代买首先预解释只发生在"="的左边,只把左边的进行预解释,右边的是值是不进行预解释的 所以就会认为 fn1函数并没有定义
2.说明this的使用场景?
作为构造函数的执行(this->调用的对象) 、作为对象属性的执行(该对象)、 作为普通函数的执行（this->window）、call apply bind
3.创建10个a便签。点击的弹出来对应的序号
4.如何理解作用域?
自由变量 作用域链，即自由变量的查找 闭包的两个场景
5.实际开发中的闭包的应用
闭包实际应用中主要用于封装变量，收敛权限。
声明在一个函数中的函数，叫做闭包函数
第四章：异步和单线程
知识点：
什么是异步？对比同步 ：有没有阻塞成为界限 同步的话等待时间太长了
前端使用异步的场景：有等待发生的情况需要异步
定时任务：setTimeout， setInterval
网络请求：ajax请求，动态img加载
事件绑定
异步和单线程
异步就是，setTimeout会被拿出去放一边等着（暂存），单线程不能同时做两个事情，正常的函数执行完了，空闲了，在执行这个一边（暂存）的函数。单线程：一个一个排队来，那个程序来了就执行那个程序。
另一种解释：同步，就是调用某个东西是，调用方得等待这个调用返回结果才能继续往后执行。异步，和同步相反 调用方不会理解得到结果，而是在调用发出后调用者可用继续执行后续操作，被调用者通过状体来通知调用者，或者通过回掉函数来处理这个调用
举一个例子：
你去商城买东西，你看上了一款手机，能和店家说你一个这款手机，他就去仓库拿货，你得在店里等着，不能离开，这叫做同步。现在你买手机赶时髦直接去京东下单，下单完成后你就可用做其他时间（追剧、打王者、lol）等货到了去签收就ok了.这就叫异步。
1.同步和异步的区别是什么？分别举一个同步和异步的例子
区别：同步会阻塞代码，异步不会。 alert是同步，setTimeout是异步。
2.一个关于setTmeOut的笔试题
3.前端使用的异步的场景有哪些
定时任务：setTimeout， setInterval
网络请求：ajax请求，动态img加载
事件绑定
这三种时间都需要等待，之所以要用异步是因为不能等待，等待就会卡顿，阻塞，这些都是因为js是一个单线程的语言决定的，只允许同时做一件事情，如果想要同时做多个，其他的事件都必须要去一边排队，先做好一件事情，把一件事情做好再做其他的事件，这是一个串行的过程。
第五部分： 日期和math
日期：注意getMonth()输出的是0-11月 所以不要忘记+1
Math ：获取随机数Math.random();
场景：清楚缓存 random返回大于0小于的的一个小数。很强频繁访问一个链接，在链接后加一个random随之改变，清除缓存。
数组api：
forEach：遍历所有数组。
every：判断所有元素是否符合条件。
some：判断数组至少有一个满足条件。var b = a.some(function (item,index) { if () Return true })
Sort：排序。
var a = [1,4,3,5,6]; var b = a.sort((a,b)=>{return a-b}) //从小到大排序
map：对数组进行重新拼装，组合成新数组。
Var a = [1,2,3,4,5]; var b = a.map(function (item,index) {return ‘’+item+})
filter：过滤符合条件的元素。
Var a = [1,2,4]; var b = a.filter(function(item,index) {if(item>=2){return true;}})
对象api
Var obj = {x:100,y:200,z:300}
var key;
for(key in obj) { if (obj.hasOwnOperity(key)) { console.log(key,obj[key]) ; } } //判断该属性是不是该对象的原生属性，而不是从原型链中继承下来的。
JS-Web-API
Window与document其实是浏览器内置的 js需要遵守的，比如nodejs不跑在浏览器上，所以就没有这些内置的对象，但是会有一些服务器相关的对象。
DOM的本质：D:document O:Object M：model
本质：根源：xml可以描述任何结构性的语言，标签的名字可以自定义。
节点操作 document.querySelectorAll(‘p’)//集合
Property:
var obj = {x:100,y:200} console.log(obj.x);
var p = document.getElementByTagName(‘p’)[0]; Console.log(p.nodeName); //p
Attribute:
q.getAttribute(‘style’);
q.setAttribute(‘style’, ‘color:black;’)
dom结构：
新增节点 获取父元素 var parent = p1.parentElement
获取子元素 var child = p1.childNodes
删除节点 p1.removeChild(child[0]);
问题：
1.DOM是哪种数据结构？
树形结构
2.DOM常用的api有哪些呀？
获取dom节点 以及节点的property和Attribute 获取父节点 获取子节点 新增节点 删除节点。
3.4.DOM节点的attr和property 有何区别?
Property只是一个JS对象的属性修改。
Attribute是对html标签属性的修改。
4.BOM操作
全称：Broswer Object Model
知识点：
Navigator :
var us = navigator.userAgent; var isChrome = us.indexOf(‘chrome’); console.log(isChrome);
screen : screen.width screen.height
Location:
console.log(location.href) ;//location.protocal; location.host; location.pathname; locaton.hash; location.href;
History:history.back(); //fowrord
如何检测浏览器的类型？
拆除url的各部分
事件：
知识点：
通用事件的绑定
事件冒泡：e.stopPropogation(); //取消冒泡
事件传播分成三个阶段：
捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capture phase），捕获阶段不会响应任何事件；
目标阶段：在目标节点上触发，称为“目标阶段”
冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层；
事件代理：
事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。
代理：多个a标签需要代理
Div1.addEventListener(‘click’, function(e){
Var target = e.target;
If(target.nodeName === ‘A’) {
Alert(target.innerHTML);}
})
优点：
事件委托对于web应用程序带来的几个优点：
1.管理的函数变少了。不需要为每个元素都添加监听函数。对于同一个父节点下面类似的子元素，可以通过委托给父元素的监听函数来处理事件。
2.可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定。
3.因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的；所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的。
————————————————
版权声明：本文为CSDN博主「sy_yan」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sy_yan/article/details/106200951
120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
