一、变量类型（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.原型链继承的例子
<body>
<div id="div1">
hello world
</div>
</body>
<script type="text/javascript">
function Elem(id){
this.elem = document.getElementById(id);
}
Elem.prototype.html = function(val){
var elem = this.elem;
if(val){
elem.innerHTML = val
return this //链式操作
}else{
return elem.innerHTML;
}
}
Elem.prototype.on = function(type,fn){ // 创建事件绑定方法
var elem = this.elem;
elem.addEventListener(type,fn)
}
var div1 = new Elem("div1");
console.log(div1.html());
</script>
四、作用域和闭包
1、作用域
● 没有块级作用域
● 只有函数和全局作用域
2、闭包
<script type="text/javascript">
function F1(){
var a = 100;
return function(){
console.log(a)
}
}
var f1 = F1();
var a = 200;
f1(); // 100
</script>
闭包的使用场景
● 函数作为返回值
● 函数作为参数传递
五、异步和单线程
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请求 ，动态 <img> 加载
● 事件绑定
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节点、结构操作
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、事件
<body>
<div id="div1">
<a href="http://baidu.com" id="link1">baidu.com</a>
<p id="p1">激活</p>
<p id="p2">取消</p>
</div>
<div id="div2">
<p id="p3">取消</p>
<p id="p4">取消</p>
</div>
</body>
①、取消默认行为
//第一种：
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）
可以跨域的三个标签及场景
<img src="xxx"> 用于打点统计，统计网站可能是其他域
<link href="xxx"> 可以使用CDN，CDN也是其他域，
<script src="xxx"> 可以使用CDN，可以用于JSONP。
跨域的注意事项
● 所有的跨域请求都必须经过信息提供方的允许
● 如果未经允许即可获得，那是浏览器同源策略出现漏洞
JSONP实现原理
● 假如加载 http : // baidu.com / classname.html
● 不一定服务器端真的有一个classname.html文件
● 服务器可以根据请求，动态生成一个文件，返回。
服务器端设置 http header
● 另一个解决跨域的简洁方法，需要服务器来做
● 但是作为交互方，我们必须知道这个方法（不一定要去深究）
8、存储
cookie
● 本身用于客服端和服务器端通信
● 但是它有本地存储的功能，于是就被 “借用”
● 使用 document.cookie = ... 获取和修改即可
cookie用于存储的缺点
● 存储量太小，只有4KB
● 所有 http 请求都带着，会影响获取资源的效率
● API 简单，需要封装才能用 document.cookie = ...
locationStorage 和 sessionStorage
● HTML5 专门为存储而设计，最大容量5M
● API 简答易用
● locationStorage.setItem(key，value)；locationStorage.getItem(key) 【一个存储，一个获取】
以上三个存储方式的区别
容量；是否携带到ajax中；API易用性
七、开发环境
1、关于开发环境
● IDE （写代码的效率，工具）
● git （代码版本管理，多人协作开发）
● JS 模块化
● 打包工具
● 上线回滚的流程
2、IDE
● webstorm
● sublime （搜索插件安装）
● vscode
● atom
