引用类型：对象 数组 函数
typeof只能区分值类型的详细类型 例如前四个 针对引用类型就不能区分 只能区分函数
变量类型 ——强制转换
问题1：typeof能得到的类型
undefined string number Boolean object function 面试的时候可以补充引用对象不能区分 除了function
问题2：什么时候使用== 什么时候===
除了这种情况之外 全部用===
问题3：js的内置函数
regexp正则表达式
问题5：js按存储方式区分变量
区别在于 引用类型复制是一个变量指针的复制 不是一个真正的拷贝 ，他们值的修改相互影
响
值类型保存在栈中 引用类型保存在堆中
值类型的复制是对本身的复制，值修改不会相互影响 而引用类型复制是对指针的复制，值修改相互影响
值类型检测用typeof 而引用类型用instanceof
堆栈是计算机的数据结构
问题6:怎么理解JSON
以上是json俩个api 他还是个数据格式
原型和原型链
构造函数
养成习惯 构造函数 大写字母开头
执行的时候 this会先变成一个空对象 然后把name等等属性赋值 然后return
那么 f就有f.name f.age f.class
构造函数扩展
原型规则
显示原型
以上五条为原型规则
f有个name属性 值为zhangsan printname也是一个f自己的属性 alertname属性f本身没有 就去f隐式原型即他的构造函数的显示原型中找
f有Name属性 pringtname属性 alertname三个属性
上述的方法 之后得到f自身的属性 即不要alertname
在f的构造函数 中Foo找 还是找不到 就向Foo的隐式原型 就是object对象的显示原型
f instanceof Foo 是true
f instanceof Object 也是true
问题1：
问题2：
面试不能这么写举个例子而已
问题3：
问题4:阅读jquery和zepto的源码分析 课程
写一个封装dom查询的例子
这个实例记住
作用域和闭包
第五行到第九行是函数声明 如果是var a =function 就是函数表达式
执行的时候先把变量声明和函数声明都拿出来 第二行变量声明拿出来 先用undefined代替 第五行函数声明整个拿出来
执行fn时 先把var age 拿出来 用undefined代替 将this 和argument声明也就是这里的name 也提前 然age被赋值成20
执行的时候会先上述的东西先提出来
this
作为构造函数
作为对象属性
作为普通函数
call bind apply
这里的this是x：100
作用域：js中没有块级作用域
这里的name在块里声明和在外面声明都可以
js有全局作用域和函数作用域
例如上面的第八行a 就是全局 第十行就是函数
自由变量：当前作用域没有定义 的变量
作用域链 a在F2中没有 于是往父级作用域F1中找 依旧没找到 就往F1的父级作用域也就是这里的全局作用域找 形成了一个链式结构
打印的a为100 a只会从父级作用域找 而跟执行时的作用域无关 只跟定义的作用域有关
闭包的使用场景 1.函数作为返回值 如上
2.函数作为参数传递
结果a还是100
问题1：对变量提升的理解
执行一段<script>或者函数 会将变量定义 函数声明 提到最上面 变量会先用undediend赋值 函数中的this argument也会先提出来
问题2：this使用场景
问题3：创建10个a标签 点击会弹出对应的序号
上面是错误的写法 因为不管怎么点击 弹出的都是第十个的序号 i是自由变量往父作用域找 此时执行完i已经等于10了
问题3：如何理解作用域
要点是自由变量 自由变量如何寻找 还有闭包的两个场景
作用域：是指对某一变量和方法具有访问权限的代码空间，也就是变量和函数起作用的区域，包括全局作用域和函数作用域
全局作用域：任何地方都能访问到的对象具有全局作用域 ；①最外层的函数和变量 ②未定义就直接赋值的变量 ③window对象的属性；
作用域链： 在查找变量的时候，如果在当前作用域没有找到，就到父级作用域去查找，找 不到继续往上一层查找，直到全局作用域，这种层层查找就形成了作用域链。
闭包：如果某个函数被除了它的父函数之外调用，就形成闭包
闭包的作用： 保存私有变量，对外提供接口，但外部不能直接访问这个变量
问题4：实际中闭包的使用
闭包实际应用中主要用于封装变量 收敛权限
判断用户是否是第一次输入
function isFirstInput(val) {
var _input = [];
return function (val) {
if (_input.indexOf(val) >= 0) {
return false;
} else {
_input.push(val);
return true;
}
}
}
var input = isFirstInput();
console.log(input('fuck'));
console.log(input('fuck'));
console.log(input('you'));
console.log(input('you'));
异步
先打印100 然后300 过一秒打印200 而不是先100 再200 最后300
先打印100 再弹框200 点击后才打印300 不点击就不执行
异步实例
先打印start end data1
start end loaded 图片加载需要等待 所以需要异步
start end clicked
只要需要等待的就需要异步
单线程就是一次只能执行一个
问题1：同步和异步的区别
先打印1 3 5 然后再打印2，一秒后打印 4
问题2：前端使用异步的场景
这些场景都需要 等待 为了不阻塞 所以用异步
日期
随机数
Math.random（）清除缓存用的
数组api
返回的是<b>1</b> <b>2</b>....
对象api
判断是不是自己的属性 而不是原型里的 key就是obj里的x y 或者z对象
问题1：获取2017-06-10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var today = new Date();
function formateDate(dt) {
if(!dt){
dt = new Date();
}
var year =today.getFullYear();
var month =today.getMonth()+1;
var date =today.getDate();
if(month<10){
month ='0'+month;
}
if(date<10){
date = '0'+date;
}
return year +'-'+month+'-'+date;
}
var newtoday = formateDate(today);
console.log(newtoday);
</script>
</body>
</html>注意月份要加一 如果月份和日期小于10 前面加个0 所以强制类型转换那一块代码这样写
问题2：获取随机数 要求长度一致的字符串格式
截取前十位
问题3：写一个遍历对象和数组的forEach函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function newforEach(obj,fn) {
var key;
if(obj instanceof Array){
obj.forEach(function (item,index) {
fn(index,item);
})
}else {
for(key in obj){
fn(key,obj[key]);
}
}
}
var arr = [1,2,3];
newforEach(arr,function (index,item) {
console.log(index,item);
});
var obj = {x:100,y:200};
newforEach(obj,function (key,value) {
console.log(key,value);
})
</script>
</body>
</html>数组参数换位置是为了迎合下面对象参数的位置
函数定义中 判断对象是否为真正的数组 如果是就遍历 然后调换
在js中，经常会遇到在函数里调用其它函数的情况，这时候会有 fn() 这种调用方式，还有一种是 return fn() 这种调用方式，一些初学者经常会一脸萌逼地被这两种方式给绕晕了。这里用一个优雅的面试题来分析一下两种方式的不同之处。
var i = 0;
function fn(){
i++;
if(i < 10){
fn();
}else{
return i;
}
}
var result = fn();
console.log(result);
这是一道隐藏了坑的面试题，看似很简单，大部分人可能想都不想就答出了10。而实际上运行可知打印出来的是 undefined。这道陷阱题很直观的体现出了前面所说的问题，当我们将执行fn的那一行修改为：
var i = 0;
function fn(){
i++;
if(i < 10){
return fn();
}else{
return i;
}
}
var result = fn();
console.log(result);
这时，会发现打印出来的结果终于不负众望的是 10 了。
为什么这里加不加return区别会这么大？
这里的主要原因很简单，JavaScript的函数都是有默认返回值的，如果函数结尾不写return，会默认返回undefined，这就是为什么在chrome的console控制台里，写代码经常下面会出现一行undefined的原因。从js到web-api
DOM本质
attribute是<img data-name :Xxx >的属性 他改的是html文档中的标签 property 是js的属性
DOM结点操作
问题1：dom是哪种数据结构
树
问题2：
问题3：
BOM操作
问题1：
问题2：
事件
在div1绑定事件 我点击 p1也可以触发 e.stoppropation阻止p1冒泡
冒泡的使用
e.target能告诉我们点击从哪触发的
然后判断点击的是不是a标签
注意这里新增a标签是手动完成 这里的js只负责绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<p id="p1">激活</p>
<p id="p2">取消</p>
<p id="p3">取消</p>
<p id="p4">取消</p>
</div>
<div id="div2">
<p id="p5">取消</p>
<p id="p6">取消</p>
</div>
<script>
function bindEvent(elem,type,selector,fn) {
if(fn==null){
fn = selector;
selector = null;
}
elem.addEventListener(type,function (e) {
var target;
if(selector){
target = e.target;
if(target.matches(selector)){
fn.call(target,e)
}
}else {
fn(e)
}
})
}
var div1 = document.getElementById('div1');
bindEvent(div1,'click','p',function (e) {
console.log(this.innerHTML)
})
var p =document.getElementById('p1');
bindEvent(div1,'click',function (e) {
console.log(p.innerHTML);
})</script></body></html>
http://www.cnblogs.com/pssp/p/5215621.html call apply bind三个方法的作用
elem 是button a标签 type 点击事件 selector如果用代理可以把选择器放进来
如果不用代理 就做个兼容 第二行到第五行
右边第四行 this获取这个a选择器 通过左边的第十一行call 此时this就是target 也就是a
代理的好处 代码简洁 减少浏览器占用内存
问题1：
问题2：简述事件冒泡流程
DOM是树形结构 按树形结构往上冒
一层一层触发事件
在父级元素和子元素都有事件的时候应该阻止冒泡
冒泡运用为代理
问题3：
给每个图片绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
</div>
<script>
var div1 = document.getElementById('div1');
div1.addEventListener('click',function (e) {
var target = e.target;
if(target.nodeName==='A'){
alert(target.innerHTML);
}
})
</script>
</body>
</html>ajax
+
关注一下4就行 其他了解
第六行
跨域
第二个网站不能访问第三个借口
什么是跨域？
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：
http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）
http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）
http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）
http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）
http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/
解决跨域的方法 jsonp http header
script可以绕过跨域的限制 我们的网址不是mooc的 但是服务器可以动态拼一个js出来
问题1：
记住这个
存储
5M的原因是不用每个http都带着
sessionstorage和location的区别在 浏览器关了 session就清理了 而location 存储到本地 不去清理就一直在 所以一般用location
以上不用记 是个坑
问题：cookie和loaction和session的区别
cookie容量4kb location和session5M
是否会携带到ajax中 cookie每次都会带 后面俩不会
api易用性 ： cookie要自己封装 后面不用封装
开发环境
IDE：编写代码的工具
webstorm sublime atom ...不要说用dw 不写.net不说vs
Git：代码版本管理
git add . 新建了一些文件或者修改了一些文件就用这个添加
git commit -m "xxx" 把文件传到本地仓库 加个备注
git checkout xx 把新建的xx文件取消掉
git push origin master 提交到远程仓库
git pull origin master 下载仓库
多人开发 git branch
git checkout -b xxx 新建分支
git checkout xxx 切换到已有的分支
git merge 把之前改的分支拷贝进来
如果线上代码改变了 如果想查看哪里改变可以如下操作
git pull origin master
发现改动的地方
cat xxx 查看这个文件
分支
查看当前分支 git branch
创建新分支 git checkout -b dev
进入新分支 git checkout dev
vi xxx修改某个文件
查看当前分支的文件 git status
然后将修改的文件传入仓库
git add .
git commit -m “xxxx”
git push origin dev 传到远程dev分支仓库
如果想把dev分支的修改放到master中就先进入master分支使用git merge dev
模块化
这是一个举例子的代码 不记
不使用模块化
webpack基本配置
打包、压缩
上线流程：
把代码提交到git版本库的master分支
测试代码
将服务器的代码打包，记录版本号，备份
将master分支代码提交到服务器，生成新版本号
回滚：
将当前服务器代码打包，记录版本号，备份
将上一个版本的解压，覆盖，然后生成新版本号
运行环境
问题1：从输入url到得到html的过程
js有权利改变dom树 不能同时操作dom 所以会阻塞渲染
dom树和渲染树区别就 在于dom树没有样式
问题2：以下俩的区别
尽量用第二个
性能优化
原则 ：多使用内存、缓存或者其他方法
减少cpu计算、减少网络请求
没必要自己实践这个 有工具
使用cdn 网上都有
每次输入先看timeout有没有 有就清掉 给个100ms的延迟 一旦输入停滞超过100ms再触发 即打的很快就等全部打完再触发 不用记
安全性
XSS：发博客在博客中偷偷插入一段脚本，获取查看博客的人的cookie 发送到自己的服务器
对策
XSRF：
对策：增加验证流程
简单的就是浮动和绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style media="screen">
*{
padding: 0;
margin: 0;
}
.layout article div{
min-height: 100px;
}
.layout.float .left{
float: left;
width: 300px;
background: red;
}
.layout.float .right{
float: right;
width: 300px;
background: blue;
}
.layout.float .center{
background: yellow;
}
.layout{
margin-top: 20px;
}
.layout.absolut .left-center-right>div{
position:absolute;
}
.layout.absolut .left{
left: 0;
width: 300px;
background: red;
}
.layout.absolut .center{
left: 300px;
right:300px;
background: yellow;
}
.layout.absolut .right{
right: 0;
width: 300px;
background: blue;;
}
</style>
</head>
<body>
<section class="layout float">
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
<p>1.这是三栏布局的中间部分2.中间部分 </p>
</div>
</article>
</section>
<section class="layout absolut">
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>绝对定位解决方案</h1>
<p>1.这是三栏布局的中间部分2.中间部分 </p>
</div>
<div class="right"></div>
</article>
</section>
<section class="layout flexbox">
<style>
.layout.flexbox{
margin-top: 140px;
}
.layout.flexbox .left-center-right{
display: flex;
}
.layout.flexbox .left{
width: 300px;
background: red;
}
.layout.flexbox .center{
flex: 1;
background: yellow;
}
.layout.flexbox .right{
width: 300px;
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>flexbox解决方案</h1>
<p>1.这是三栏布局的中间部分2.中间部分 </p>
</div>
<div class="right"></div>
</article>
</section>
<section class="layout table">
<style>
.layout.table .left-center-right{
width: 100%;
display: table;
height: 100px;
}
.layout.table .left-center-right>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background: red;
}
.layout.table .right{
width: 300px;
background: blue;
}
.layout.table .center{
background: yellow;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>table解决方案</h1>
<p>1.这是三栏布局的中间部分2.中间部分 </p>
</div>
<div class="right"></div>
</article>
</section>
<section class="layout grid">
<style>
.layout.grid .left-center-right{
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left{
background: red;
}
.layout.grid .center{
background: yellow;
}
.layout.grid .right{
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>网格布局解决方案</h1>
<p>1.这是三栏布局的中间部分2.中间部分 </p>
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
五种方法的优缺点 之间的比较 把高度去掉考虑纵向哪个不能用 真正应用的是哪个
浮动的问题i ：要清除浮动 处理不好带来很多问题 优点：兼容性好 清除浮动和处理好周边元素的话
绝对定位 有点快捷 缺点脱离文档流 使用性比较差
flex布局 解决上述两种不足 比较完美的一个
表格布局 兼容性很好 缺点当中间某个单元格高度超出 两侧也会调整高度 有的时候不需要两侧都增高
网格布局 新出的技术 代码量简化 展现对新技术的热爱
flex和表格布局在高度改变后依旧可以使用待扩展...
为什么下面两行最左边 因为这里没有左浮动了 解决办法创建bfc
延伸
<!--三栏两边定宽 中间自适应-->
<!--1.float-->
<section style="min-height: 300px;width: 100%">
<div style="float: left;width: 300px;background-color: red;">左</div>
<div style="float: right;width: 300px;background-color: blue">右</div>
<div style="background-color: yellow">中</div>
</section>
<br>
<br>
<br>
<!--2.position:absolute-->
<section style="width: 100%">
<div style="position: absolute;left: 0;background-color: red;width: 300px">左</div>
<div style="background-color: yellow;position:absolute;left: 300px;right: 300px">中</div>
<div style="background-color:blue;position: absolute;right: 0;width: 300px">右</div>
</section>
<br>
<br>
<br>
<br>
<!--3.flex-->
<section style="display: flex;flex-direction: row;justify-content: space-between;width: 100%">
<div style="width: 300px;background-color: red;">左</div>
<div style="background-color: yellow;flex: 1;">中</div>
<div style="background-color: blue;width: 300px;">右</div>
</section>
<br>
<br>
<br>
<!--4.grid-->
<section style="display: grid;grid-template-columns: 300px auto 300px;">
<div style="background-color: red;">左</div>
<div style="background-color: yellow;">中</div>
<div style="background-color: blue;">右</div>
</section>
<br>
<br>
<br>
<!--上下固定高 中间自适应-->
<section style="position:relative;min-height: 400px;">
<div style="position:absolute;top: 0;height: 100px;background-color: red;width: 100%">上</div>
<div style="background-color: yellow;position:absolute;top: 100px;bottom: 100px;width: 100%;">中</div>
<div style="position:absolute;bottom: 0;height: 100px;background-color: blue;width: 100%">下</div>
</section>
<br>
<br>
<br>
<br>
<!--2.flex-->
<section style="display: flex;flex-direction:column;align-content: space-between ">
<div style="background-color: red;width: 100%;height: 100px;">上</div>
<div style="background-color: yellow;width: 100%;flex: 1">中</div>
<div style="background-color: blue;width: 100%;height: 100px;">下</div>
</section>
<br>
<br>
<br>
<!--3.grid-->
<section style="display: grid;grid-template-rows: 100px auto 100px">
<div style="background-color: red;width: 100%;">上</div>
<div style="background-color: yellow;width: 100%;">中</div>
<div style="background-color: blue;width: 100%;">下</div>
</section>
<br>
<!--左定宽右自适应-->
<section style="width: 100%">
<div style="background-color: green;float: left;width: 300px">左</div>
<div style="background-color: pink">右</div>
</section>
<br>
<section style="width: 100%;position: relative;">
<div style="background-color: green;position:absolute;left: 0;width: 300px">左</div>
<div style="background-color: pink;position: absolute;left: 300px;width: 300px">右</div>
</section>
基本概念 ：border padding margin content 这是标准模型 ie模型？
标准和ie的区别 ：计算高度和宽度的不同 标准模型的宽和高就是content的宽高 不包括 padding和border ie就计算
css如何设置这两个模型
js如何设置获取盒模型的宽和高
这里的dom是getelmentby 取到的节点
这种方式只能取到内联样式的宽高
只有ie支持 比较准确↑ 内联、style标签和引入样式都可以
火狐和chrome支持 和第三个原理类似↑
计算一个元素的绝对位置↑ left top width height
var dom = document.getElementById("Div");
console.log(dom.style);;//只能获取到style属性里面的，通过class或者id设置样式则获取不到
console.log(dom.currentStyle);//仅限ie使用，可以获取class或者id设置的样式
console.log(window.getComputedStyle(dom));//ff，chrome使用，可以获取class或者id设置的样式
实例（根据盒模型解释什么叫边距重叠）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style media="screen">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<section id="sec">
<style media="screen">
#sec{
background: #f00;
overflow: hidden;/*相当于给父级元素创建了个bfc 添加这个之后content高度为110
父子元素重叠 兄弟元素重叠取边距最大的为边距 空元素重叠上边距和下边距中最大一个为边距*/
}
.child{
height: 100px;
margin-top: 10px;
background: yellow;
}
</style>
<article class="child"></article>
</section>
</body>
</html>
加个overflow：hidden清除重叠
BFC（边距重叠解决）
BFc定义 是块级格式化上下文
bfc原理 （即渲染规则） 1.bfc这个元素的垂直方向会发生重叠 2.bfc区域不会与浮动元素的box重叠 3.bfc在页面上是一个独立的容器 外面的元素不会影响里面的 里面不会影响外面的
4.计算bfc高度 浮动元素也会参与计算
怎么创建bfc ：1.overflow不为visible 2.float不为none 3.position的值不是static（默认值）或者relative 4.display table-cell等与table有关的 inline-box
bfc使用场景 ：.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style media="screen">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<section id="sec">
<style media="screen">
#sec{
background: #f00;
overflow: hidden;/*相当于给父级元素创建了个bfc 添加这个之后content高度为110
父子元素重叠 兄弟元素重叠取边距最大的为边距 空元素重叠上边距和下边距中最大一个为边距*/
}
.child{
height: 100px;
margin-top: 10px;
background: yellow;
}
</style>
<article class="child"></article>
</section>
<!--bfc内垂直方向边距重叠的问题-->
<section id="margin">
<style>
#margin{
background: pink;
overflow: hidden;
}
#margin >p{
margin: 5px auto 25px;
background: red;
}
</style>
<p>1</p>
<p>2</p>
<p>3</p>
</section>
<section id="layout">
<style>
#layout{
background: red;
}
#layout .left{
float: left;
width: 100px;
height: 100px;
background: pink;
}
#layout .right{
height: 110px;
background: #ccc;
overflow: auto;
}
</style>
<div class="left"></div>
<div class="right"></div>
<!--bfc子元素即使是float也会加入高度计算-->
<section id="float">
<style>
#float{
background: red;
overflow:auto;/*父元素也设置为bfc就可以显示背景色*/
}
#float .float{
float: left;
font-size: 30px;
}
</style>
<div class="float">我是浮动元素</div>
</section>
</section>
</body>
</html>
web标准：es6 代码风格：函数功能单一 gulp或者grunt看要求 要知道区别 回答问题能分1,2有条理 微信小程序、公众号 用户体验：要讲自己在哪方面改进了 为了用户体验 不知道的问题就如实说 向面试官请教
DOM事件
dom事件的级别
false表示冒泡 或者true代表事件捕获
dom事件模型（冒泡和捕获）捕获是从上往下 冒泡从下往上
dom事件流（例如用户与浏览器交互 点击鼠标左键 怎么传到页面上的过程就是事件流）
事件通过捕获到达目标元素 这时候是目标阶段 再从目标元素上传到window对象，也就是冒泡的过程
描述dom事件捕获具体流程（document.documentelement捕获html标签）
event对象的常见应用
第一个 阻止默认行为
第二个 阻止冒泡
第三个 阻止剩余的事件处理函数的执行，并防止当前事件在DOM树上冒泡。例如 绑定俩事件 只想a响应 阻止b执行
第五个 事件代理里的 第四个 当前绑定的事件
自定义事件
event和customevent都是自定义事件 区别在于后者除了事件名还有object
捕获流程的代码
结果为
以上true改false就是冒泡
自定义事件代码
http协议类
http协议的主要特点
简单快速：只需发送请求方法和路径
灵活：可以传输任何数据类型 以Content-Type加以标记
无连接：就是指每次连接只处理一个请求，处理完毕就断开连接，
无状态：对事务处理没有记忆能力
http报文组成部分
http方法
POST GET区别
记俩三个
http状态码
具体深问
什么是持久连接
http支持持久连接 只有1.1版本支持 非持久连接 在每个请求/应答都要建立一个连接， 完成就断开
持久连接避免了建立或重新建立连接
什么是管线化
管线化是在持久连接下的 一次把所有请求都打包发送，然后一次响应过来
只有函数有prototype 实例和函数都有__proto__ 因为函数也是对象
什么是doctype？作用
用来声明文档类型和DTD（语法规则）的 。
一个主要的作用验证文件合法性。
常见的doctype
h5的 html4.01 严格模式和传统模式
重排
如何避免重排
重绘
巧用+/-转换类型 例如想把一个num转为数字类型 那么就num-0 转为字符串类型 num+‘’原始类型的包装类型number boolean string 他们是基本类型 本来不应该有属性和对象访问字符串长度str.length 不是对象为什么会有属性呢甚至可以str.t =10 只不过再次打印是undefined 当做这个操作时 会自动转为包装类型 用完就销毁了类型检测
var person = {};
Object.defineProperty(person,"name",{
configurable:false;
value:"peter"
}
alert(person.name);//"peter"
delete person.name ;
alert(person.name);//"peter"
不能删除get：读取属性时调用函数set：写入属性调用函数var book = {_year:2004,edition:1}Object.defineProperty(book,"year",{get:function(){retuen this._year;},set:function(newValue){if(newValue>2004){this._year= newValue;this.edition += newValue-2004;}}}),book.year=2005;aleert(book.edition);//2Object.getOwnPropertyDescriptor()读取属性的特性var descriptor =
Object.getOwnPropertyDescriptor(book,"_year");
alert(descriptor.value);//2004;
alert(descriptor.configurable);//false
_year 代表year只能通过对象方法访问属性hasOwnProperty()用来检测一个属性是存在于实例中还是存在于原型中但是in操作符只要能通过原型链找到这个属性 无论在实例中或者原型中都返回true Object.key()可以返回所有可枚举属性的字符串数组 通过instanceof和isPrototypeOf()来确定原型和实例的关系 例如instance instanceof Object ；//trueObject.prototype.isPrototypeOf(instance);//true
正则表达式
