一、变量类型（typeof运算符）
1.值类型：
number（数字）、string（字符）、boolean（布尔）、null、undefined、
2.引用类型：
array（数组）、object（对象）、function（函数）
二、如何理解JSON
JSON就是JS的一个对象。
JSON.stringify({a:10,b:20}) //对象变成字符串
JSON.parse(‘{“a”:10,“b”:20}’) //字符串变成对象
三、原型和原型链
1、构造函数：大写字母开头的函数就是构造函数
function Foo（name,age）{
this.name = name;
this age = age;
//return this // 默认有这一行。可以不用写
}
var f = naw Foo('zhangsan',21)
2.原型规则
●当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的proto（即它的构造函数的prototype）中寻找。
__proto__
console.log(obj.__proto__ === Object.prototype)
3.原型链（instanceof）
instanceof 用于判断引用类型属于哪个构造函数的方法。
4.原型链继承的例子
hello world
四、作用域和闭包
1、作用域
● 没有块级作用域
● 只有函数和全局作用域
2、闭包
闭包的使用场景
● 函数作为返回值
● 函数作为参数传递
五、异步和单线程
1、什么是异步
console.log(100)
setTimeout(function(){
console.log(200)
},1000)
console.log(300)
// 打印出来的顺序是 100 300 200
2、对比同步
console.log(100)
alert(200) // 弹出来之后不点确定就不会继续执行下面
console.log(300)
3、使用异步的场景
● 定时任务：setTimeout ，setInverval
● 网络请求：ajax请求 ，动态 加载
● 事件绑定
4、同步的异步的区别
同步会阻塞代码执行，异步不会
alert是同步，setTimeout是异步
5、异步和单线程
console.log(100)
setTimeout(function(){
console.log(200)
},1000)
console.log(300)
执行第一行，打印100，
执行setTimeout后，传入setTimeout的函数会被暂存起来，不会立即执行（单线程的特点：不能同时做两件事）
执行最后一行，打印300，
待所有程序执行完，处于空闲时间是，会立马看有没有被暂存起来的要执行。
发现暂存起来setTimeout中的函数无需等待时间，就立刻来过来执行。
六、Js-Web-API（W3C标准）
1、DOM本质
● DOM可以理解为：浏览器把拿到的html代码，结构化一个浏览器能识别并且js可以操作的一个模型而已。
2、DOM节点、结构操作
DOM对象方法.png
3、DOM节点的Attribute和property的区别
● property 只是一个JS对象的属性的修改
● Attribute 是对html标签属性的修改
4、BOM操作
常用对象：navigator、screen、history、location
如何检测浏览器的类型：
var ua = navigator.userAgent
var isChrome = ua.indexOf("Chrome")
console.log(isChrome)
拆解url各个部分
console.log(location.href)
console.log(location.protocol) // "http:"
console.log(location.hostname) // "baidu.com"
console.log(location.pathname)
console.log(location.search)
console.log(location.hash) // "#contents"
5、事件
取消
取消
①、取消默认行为
//第一种：
var link1 = document.getElementById("link1");
link1.addEventListener("click",function(e){
e.preventDefault() //取消默认行为
console.log(123)
})
-------------------------------------------------------
//第二种：
//包装事件函数
function bindEvent(elem,type,fn){
elem.addEventListener(type,fn)
}
var link1 = document.getElementById("link1");
bindEvent(link1,"click",function(e){
e.preventDefault(); //取消默认行为
console.log(123)
})
②、监听事件、阻止冒泡
function bindEvent(elem,type,fn){
elem.addEventListener(type,fn)
}
var p1 = document.getElementById('p1');
bindEvent(p1,"click",function(e){
e.stopPropagation(); // 防止监听
alert("激活")
});
var body = document.body
bindEvent(body,"click",function(e){
alert('取消')
})
③、代理
function bindEvent(elem,type,selector,fn){
if(fn == null){
fn = selector
selector = null
}
elem.addEventListener(type,function(e){
if(selector){
//代理
var target = e.target;
if(target.matches(selector)){
fn.call(target,e)
}
}else{
//不是代理
fn(e)
}
})
}
var div1 = document.getElementById("div1");
bindEvent(div1,"click","a",function(e){
e.preventDefault(); //取消默认行为
console.log(this.innerHTML)
})
var p1 = document.getElementById('p1');
bindEvent(p1,"click",function(e){
console.log(p1.innerHTML)
})
● 代理的两个好处：①代码简洁（绑定一次就可以了），②给浏览器的压力比较小。
6、Ajax - XMLHttpRequst
var xhr = new XMLHttpRequset(); //实例化一个ajax对象
xhr.open("GET","/api",false) //这一步，就是已经是发送请求了
xhr.onreadystatechange = function (){
if(xhr.readyState == 4){
if(xhr.status == 200){
//status==200表示请求成功
//404表示没有找到页面或者数据
alert(xhr.responseText)
}
}
}
xhr.send(null);
状态码说明
①、readyState
● 0 - （未初始化）还没有调用send（）方法
● 1 - （载入）已调用send（）方法，正在发送请求
● 2 - （载入完成）send（）方法执行完成，已经接受到全部内容
● 3 - （交互）正在解析响应内容
● 4 - （完成）解析内容响应完成，可以在客户端调用了
②、status
● 2xx - 表示成功处理请求，如：200
● 3xx - 需要重定向，浏览器直接跳转
● 4xx - 客服端请求错误，如：404
● 5xx - 服务器端错误。
7、跨域（JSONP）
可以跨域的三个标签及场景
用于打点统计，统计网站可能是其他域
可以使用CDN，CDN也是其他域，