前端常识-gj2

从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)

1. 在浏览器地址栏输入URL
2. 浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤
   如果资源未缓存，发起新请求
   如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证
   检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control
   HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期
   HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
3. 浏览器解析URL获取协议，主机，端口，path
4. 浏览器组装一个HTTP（GET）请求报文
5. 浏览器获取主机ip地址，过程如下：
   浏览器缓存
   本机缓存
   hosts文件
   路由器缓存
   ISP DNS缓存
   DNS递归查询（可能存在负载均衡导致每次IP不一样）
6. 打开一个socket与目标IP地址，端口建立TCP链接，三次握手如下：
   客户端发送一个TCP的SYN=1，Seq=X的包到服务器端口
   服务器发回SYN=1， ACK=X+1， Seq=Y的响应包
   客户端发送ACK=Y+1， Seq=Z
7. TCP链接建立后发送HTTP请求
8. 服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
9. 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码
10. 处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作
11. 服务器将响应报文通过TCP连接发送回浏览器
12. 浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下：
    主动方发送Fin=1， Ack=Z， Seq= X报文
    被动方发送ACK=X+1， Seq=Z报文
    被动方发送Fin=1， ACK=X， Seq=Y报文
    主动方发送ACK=Y， Seq=X报文
13. 浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同
14. 如果资源可缓存，进行缓存
15. 对响应进行解码（例如gzip压缩）
16. 根据资源类型决定如何处理（假设资源为HTML文档）
17. 解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本，这些操作没有严格的先后顺序，以下分别解释
18. 构建DOM树：
    Tokenizing：根据HTML规范将字符流解析为标记
    Lexing：词法分析将标记转换为对象并定义属性和规则
    DOM construction：根据HTML标记关系将对象组成DOM树
19. 解析过程中遇到图片、样式表、js文件，启动下载
20. 构建CSSOM树：
    Tokenizing：字符流转换为标记流
    Node：根据标记创建节点
    CSSOM：节点创建CSSOM树
21. 根据DOM树和CSSOM树构建渲染树:
    从DOM树的根节点遍历所有可见节点，不可见节点包括：1）script,meta这样本身不可见的标签。2)被css隐藏的节点，如display: none
    对每一个可见节点，找到恰当的CSSOM规则并应用
    发布可视节点的内容和计算样式
22. js解析如下：
    浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading
    HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容
    当解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载。异步脚本禁止使用document.write()，它们可以访问自己script和之前的文档元素
    当文档完成解析，document.readState变成interactive
    所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用document.write()
    浏览器在Document对象上触发DOMContentLoaded事件
    此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState变为complete,window触发load事件
23. 显示页面（HTML解析过程中会逐步显示页面）

    css部分

    CSS选择器有哪些

• 通用选择器：选择所有元素，不参与计算优先级，兼容性IE6+
  #X id选择器：选择id值为X的元素，兼容性：IE6+
  .X 类选择器： 选择class包含X的元素，兼容性：IE6+
  X Y后代选择器： 选择满足X选择器的后代节点中满足Y选择器的元素，兼容性：IE6+
  X 元素选择器： 选择标所有签为X的元素，兼容性：IE6+
  :link，：visited，：focus，：hover，：active链接状态： 选择特定状态的链接元素，顺序LoVe HAte，兼容性: IE4+
  X + Y直接兄弟选择器：在X之后第一个兄弟节点中选择满足Y选择器的元素，兼容性： IE7+
  X > Y子选择器： 选择X的子元素中满足Y选择器的元素，兼容性： IE7+
  X ~ Y兄弟： 选择X之后所有兄弟节点中满足Y选择器的元素，兼容性： IE7+
  [attr]：选择所有设置了attr属性的元素，兼容性IE7+
  [attr=value]：选择属性值刚好为value的元素
  [attr~=value]：选择属性值为空白符分隔，其中一个的值刚好是value的元素
  [attr|=value]：选择属性值刚好为value或者value-开头的元素
  [attr^=value]：选择属性值以value开头的元素
  [attr$=value]：选择属性值以value结尾的元素
  [attribute*=value]：选择属性值中包含value的元素
  X:after, X::after：after伪元素，选择元素虚拟子元素（元素的最后一个子元素），CSS3中::表示伪元素。兼容性:after为IE8+，::after为IE9+
  :hover：鼠标移入状态的元素，兼容性a标签IE4+， 所有元素IE7+
  :not(selector)：选择不符合selector的元素。不参与计算优先级，兼容性：IE9+
  ::first-letter：伪元素，选择块元素第一行的第一个字母，兼容性IE5.5+
  ::first-line：伪元素，选择块元素的第一行，兼容性IE5.5+
  :nth-child(an + b)：伪类，选择前面有an + b - 1个兄弟节点的元素，其中n>= 0， 兼容性IE9+
  :nth-last-child(an + b)：伪类，选择后面有an + b - 1个兄弟节点的元素其中n >= 0，兼容性IE9+
  X:nth-of-type(an+b)：伪类，X为选择器，解析得到元素标签，选择前面有an + b - 1个相同标签兄弟节点的元素。兼容性IE9+
  X:nth-last-of-type(an+b)：伪类，X为选择器，解析得到元素标签，选择后面有an+b-1个相同标签兄弟节点的元素。兼容性IE9+
  X:first-child：伪类，选择满足X选择器的元素，且这个元素是其父节点的第一个子元素。兼容性IE7+
  X:last-child：伪类，选择满足X选择器的元素，且这个元素是其父节点的最后一个子元素。兼容性IE9+
  X:only-child：伪类，选择满足X选择器的元素，且这个元素是其父元素的唯一子元素。兼容性IE9+
  X:only-of-type：伪类，选择X选择的元素，解析得到元素标签，如果该元素没有相同类型的兄弟节点时选中它。兼容性IE9+
  X:first-of-type：伪类，选择X选择的元素，解析得到元素标签，如果该元素是此此类型元素的第一个兄弟。选中它。兼容性IE9+

  css sprite是什么,有什么优缺点

  概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。
  优点：
  减少HTTP请求数，极大地提高页面加载速度
  增加图片信息重复度，提高压缩比，减少图片大小
  更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
  缺点：
  图片合并麻烦
  维护麻烦，修改一个图片可能需要从新布局整个图片，样式

  display: none;与visibility: hidden;的区别

  相同点：它们都能让元素不可见
  区别：
  display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
  display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
  修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
  读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容

  specified value,computed value,used value计算方法

  specified value: 计算方法如下：
  如果样式表设置了一个值，使用这个值
  如果没有设置值，这个属性是继承属性，从父元素继承
  如果没设置，并且不是继承属性，使用css规范指定的初始值及浏览器初始值
  computed value: 以specified value根据规范定义的行为进行计算，通常将相对值计算为绝对值，例如em根据font-size进行计算。一些使用百分数并且需要布局来决定最终值的属性，如width，margin。百分数就直接作为computed value。line-height的无单位值也直接作为computed value。这些值将在计算used value时得到绝对值。computed value的主要作用是用于继承
  used value：属性计算后的最终值，对于大多数属性可以通过window.getComputedStyle获得，尺寸值单位为像素。以下属性依赖于布局，
  background-position
  bottom, left, right, top
  height, width
  margin-bottom, margin-left, margin-right, margin-top
  min-height, min-width
  padding-bottom, padding-left, padding-right, padding-top
  text-indent

  link与@import的区别

  link是HTML方式， @import是CSS方式
  link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC无样式内容闪烁(Flash Of Unstyled Content)
  link可以通过rel=”alternate stylesheet”指定候选样式
  浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
  @import必须在样式规则之前，可以在css文件中引用其他文件
  总体来说：link优于@import

  display: block;和display: inline;的区别

  block元素特点：
  1.处于常规流中时，如果width没有设置，会自动填充满父容器
  2.可以应用margin/padding
  3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素
  4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间）
  5.忽略vertical-align
  inline元素特点
  1.水平方向上根据direction依次布局
  2.不会在元素前后进行换行
  3.受white-space控制
  4.margin/padding在竖直方向上无效，水平方向上有效
  5.width/height属性对非替换行内元素无效，宽度由元素内容决定
  6.非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定
  6.浮动或绝对定位时会转换为block
  7.vertical-align属性生效

  PNG,GIF,JPG,webp,svg的区别及如何选

  GIF:
  8位像素，256色
  无损压缩
  支持简单动画
  支持boolean透明
  适合简单动画
  JPEG：
  颜色限于256
  有损压缩
  可控制压缩质量
  不支持透明
  适合照片
  PNG：
  有PNG8和truecolor PNG
  PNG8类似GIF颜色上限为256，文件小，支持alpha透明度，无动画
  适合图标、背景、按钮
  未来趋势：
  webp（google推出的图片格式，目前存在浏览器兼容）
  svg（矢量图如：iconfont）

  CSS有哪些继承属性

  关于文字排版的属性如：
  font
  word-break
  letter-spacing
  text-align
  text-rendering
  word-spacing
  white-space
  text-indent
  text-transform
  text-shadow
  line-height
  color
  visibility
  cursor

  容器包含若干浮动元素时如何清理(包含)浮动

  容器元素闭合标签前添加额外元素并设置clear: both
  父元素触发块级格式化上下文(见块级可视化上下文部分)
  设置容器元素伪元素进行清理推荐的清理浮动方法

  /**
  * 在标准浏览器下使用
  * 1 content内容为空格用于修复opera下文档中出现
  *   contenteditable属性时在清理浮动元素上下的空白
  * 2 使用display使用table而不是block：可以防止容器和
  *   子元素margin-top折叠,这样能使清理效果与BFC，IE6/7
  *   zoom: 1;一致
  * 3 overflow: hidden;
  **/
  
  .clearfix:before,
  .clearfix:after {
      content: " "; /* 1 */
      display: table; /* 2 */
  }
  
  .clearfix:after {
      clear: both;
  }
  
  /**
  * IE 6/7下使用
  * 通过触发hasLayout实现包含浮动
  **/
  .clearfix {
      *zoom: 1;
  }

什么是FOUC?如何避免

Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。解决方法：把样式表放到文档的head使用link元素。

什么是BFC？如何创建块级格式化上下文(block formatting context),BFC有什么用

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于布局中的普通流。
创建规则：
根元素
浮动元素（float不是none）
绝对定位元素（position取值为absolute或fixed）
display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素
overflow不是visible的元素
作用：
可以包含浮动元素（父布局overflow: hidden）
不被浮动元素覆盖（两列自适应布局：子1浮动，子2不浮动且有overflow: hidden）
阻止父子元素的margin折叠（如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中）

display,float,position的关系

如果display为none，那么position和float都不起作用，这种情况下元素不产生框
否则，如果position值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。
否则，如果float不是none，框是浮动的，display根据下表进行调整
否则，如果元素是根元素，display根据下表进行调整
其他情况下display的值为指定值
总结起来：绝对定位、浮动、根元素都需要调整display

外边距折叠(collapsing margins)

毗邻的两个或多个margin会合并成一个margin，叫做外边距折叠。规则如下：
1.两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
2.浮动元素/inline-block元素/绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
3.创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠
4.元素自身的margin-bottom和margin-top相邻时也会折叠

如何确定一个元素的包含块(containing block)

1.根元素的包含块叫做初始包含块，在连续媒体中他的尺寸与viewport相同并且anchored at the canvas origin；对于paged media，它的尺寸等于page area。初始包含块的direction属性与根元素相同。
2.position为relative或者static的元素，它的包含块由最近的块级（display为block,list-item, table）祖先元素的内容框组成。
3.如果元素position为fixed。对于连续媒体，它的包含块为viewport；对于paged media，包含块为page area
4.如果元素position为absolute，它的包含块由祖先元素中最近一个position为relative,absolute或者fixed的元素产生，规则如下：
如果祖先元素为行内元素，the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element.
其他情况下包含块由祖先节点的padding edge组成
如果找不到定位的祖先元素，包含块为初始包含块

stacking context,布局规则

z轴上的默认层叠顺序如下（从下到上）：
根元素的边界和背景
常规流中的元素按照html中顺序
浮动块
positioned元素按照html中出现顺序
如何创建stacking context：
根元素
z-index不为auto的定位元素
a flex item with a z-index value other than ‘auto’
opacity小于1的元素
在移动端webkit和chrome22+，z-index为auto，position: fixed也将创建新的stacking context

如何水平居中一个元素

如果需要居中的元素为常规流中inline元素，为父元素设置text-align: center;即可实现
如果需要居中的元素为常规流中block元素，1）为元素设置宽度，2）设置左右margin为auto。
如果需要居中的元素为浮动元素，1）为元素设置宽度，2）position: relative;，3）浮动方向偏移量（left或者right）设置为50%，4）浮动方向上的margin设置为元素宽度一半乘以-1
如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）偏移量设置为50%，3）偏移方向外边距设置为元素宽度一半乘以-1
如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）设置左右偏移量都为0,3）设置左右外边距都为auto

如何竖直居中一个元素

需要居中元素为单行文本，为包含文本的元素设置大于font-size的line-height
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
6 Methods For Vertical Centering With CSS

JavaScript概念部分

DOM元素e的e.getAttribute(propName)和e.propName有什么区别和联系

e.getAttribute()，是标准DOM操作文档元素属性的方法，具有通用性可在任意文档上使用，返回元素在源文件中设置的属性
e.propName通常是在HTML文档中访问特定元素的特性，浏览器解析元素后生成对应对象（如a标签生成HTMLAnchorElement），这些对象的特性会根据特定规则结合属性设置得到，对于没有对应特性的属性，只能使用getAttribute进行访问
e.getAttribute()返回值是源文件中设置的值，类型是字符串或者null（有的实现返回””）
e.propName返回值可能是字符串、布尔值、对象、undefined等
大部分attribute与property是一一对应关系，修改其中一个会影响另一个，如id，title等属性
一些布尔属性’‘的检测设置需要hasAttribute和removeAttribute来完成，或者设置对应property
像’link‘中href属性，转换成property的时候需要通过转换得到完整URL
一些attribute和property不是一一对应如：form控件中’input value=”hello”‘对应的是defaultValue，修改或设置value property修改的是控件当前值，setAttribute修改value属性不会改变value property

offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

offsetWidth/offsetHeight返回值包含content + padding + border，效果与e.getBoundingClientRect()相同
clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条
scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸

XMLHttpRequest通用属性和方法

1.readyState:表示请求状态的整数，取值：
UNSENT（0）：对象已创建
OPENED（1）：open()成功调用，在这个状态下，可以为xhr设置请求头，或者使用send()发送请求
HEADERS_RECEIVED(2)：所有重定向已经自动完成访问，并且最终响应的HTTP头已经收到
LOADING(3)：响应体正在接收
DONE(4)：数据传输完成或者传输产生错误
2.onreadystatechange：readyState改变时调用的函数
3.status：服务器返回的HTTP状态码（如，200， 404）
4.statusText:服务器返回的HTTP状态信息（如，OK，No Content）
5.responseText:作为字符串形式的来自服务器的完整响应
6.responseXML: Document对象，表示服务器的响应解析成的XML文档
7.abort():取消异步HTTP请求
8.getAllResponseHeaders(): 返回一个字符串，包含响应中服务器发送的全部HTTP报头。每个报头都是一个用冒号分隔开的名/值对，并且使用一个回车/换行来分隔报头行
9.getResponseHeader(headerName):返回headName对应的报头值
10.open(method, url, asynchronous [, user, password]):初始化准备发送到服务器上的请求。method是HTTP方法，不区分大小写；url是请求发送的相对或绝对URL；asynchronous表示请求是否异步；user和password提供身份验证
11.setRequestHeader(name, value):设置HTTP报头
12.send(body):对服务器请求进行初始化。参数body包含请求的主体部分，对于POST请求为键值对字符串；对于GET请求，为null

mouseover/mouseout与mouseenter/mouseleave的区别与联系

mouseover/mouseout是标准事件，所有浏览器都支持；mouseenter/mouseleave是IE5.5引入的特有事件后来被DOM3标准采纳，现代标准浏览器也支持
mouseover/mouseout是冒泡事件；mouseenter/mouseleave不冒泡。需要为多个元素监听鼠标移入/出事件时，推荐mouseover/mouseout托管，提高性能
标准事件模型中event.target表示发生移入/出的元素,vent.relatedTarget对应移出/如元素；在老IE中event.srcElement表示发生移入/出的元素，event.toElement表示移出的目标元素，event.fromElement表示移入时的来源元素

sessionStorage,localStorage,cookie区别

都会在浏览器端保存，有大小限制，同源限制
cookie会在请求时发送到服务器，作为会话标识，服务器可修改cookie；web storage不会发送到服务器
cookie有path概念，子路径可以访问父路径cookie，父路径不能访问子路径cookie
有效期：cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage在窗口关闭前有效，localStorage长期有效，直到用户删除
共享：sessionStorage不能共享，localStorage在同源文档之间共享，cookie在同源且符合path规则的文档之间共享
localStorage的修改会促发其他文档窗口的update事件
cookie有secure属性要求HTTPS传输
浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。web storage大小支持能达到5M

javascript跨域通信

同源：两个文档同源需满足
协议相同
域名相同
端口相同
跨域通信：js进行DOM操作、通信时如果目标与当前窗口不满足同源条件，浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法
如果是log之类的简单单项通信，新建img,script,link,iframe元素，通过src，href属性设置为目标url。实现跨域请求
如果请求json数据，使用script进行jsonp请求
现代浏览器中多窗口通信使用HTML5规范的targetWindow.postMessage(data, origin);其中data是需要发送的对象，origin是目标窗口的origin。window.addEventListener(‘message’, handler, false);handler的event.data是postMessage发送来的数据，event.origin是发送窗口的origin，event.source是发送消息的窗口引用
内部服务器代理请求跨域url，然后返回数据
跨域请求数据，现代浏览器可使用HTML5规范的CORS功能，只要目标服务器返回HTTP头部Access-Control-Allow-Origin: *即可像普通ajax一样访问跨域资源

javascript有哪几种数据类型

六种基本数据类型
undefined
null
string
boolean
number
symbol(ES6)
一种引用类型
Object

什么闭包,闭包有什么用

闭包是在某个作用域内定义的函数，它可以访问这个作用域内的所有变量。闭包作用域链通常包括三个部分：
函数本身作用域。
闭包定义时的作用域。
全局作用域。
闭包常见用途：
创建特权方法用于访问控制
事件处理程序及回调

javascript有哪几种方法定义函数

函数声明表达式
function操作符
Function 构造函数
ES6:arrow function

应用程序存储和离线web应用

HTML5新增应用程序缓存，允许web应用将应用程序自身保存到用户浏览器中，用户离线状态也能访问。
1.为html元素设置manifest属性:’‘，其中后缀名只是一个约定，真正识别方式是通过text/cache-manifest作为MIME类型。所以需要配置服务器保证设置正确
2.manifest文件首行为CACHE MANIFEST，其余就是要缓存的URL列表，每个一行，相对路径都相对于manifest文件的url。注释以#开头
3.url分为三种类型：CACHE:为默认类型。NETWORK：表示资源从不缓存。 FALLBACK:每行包含两个url，第二个URL是指需要加载和存储在缓存中的资源， 第一个URL是一个前缀。任何匹配该前缀的URL都不会缓存，如果从网络中载入这样的URL失败的话，就会用第二个URL指定的缓存资源来替代。以下是一个文件例子：

CACHE MANIFEST

CACHE:
myapp.html
myapp.css
myapp.js

FALLBACK:
videos/ offline_help.html

NETWORK:
cgi/

客户端存储localStorage和sessionStorage

localStorage有效期为永久，sessionStorage有效期为顶层窗口关闭前
同源文档可以读取并修改localStorage数据，sessionStorage只允许同一个窗口下的文档访问，如通过iframe引入的同源文档。
Storage对象通常被当做普通javascript对象使用：通过设置属性来存取字符串值，也可以通过setItem(key, value)设置，getItem(key)读取，removeItem(key)删除，clear()删除所有数据，length表示已存储的数据项数目，key(index)返回对应索引的key

cookie及其操作

cookie是web浏览器存储的少量数据，最早设计为服务器端使用，作为HTTP协议的扩展实现。cookie数据会自动在浏览器和服务器之间传输。
通过读写cookie检测是否支持
cookie属性有name，value，max-age，path, domain，secure；
cookie默认有效期为浏览器会话，一旦用户关闭浏览器，数据就丢失，通过设置max-age=seconds属性告诉浏览器cookie有效期
cookie作用域通过文档源和文档路径来确定，通过path和domain进行配置，web页面同目录或子目录文档都可访问
通过cookie保存数据的方法为：为document.cookie设置一个符合目标的字符串如下
读取document.cookie获得’; ‘分隔的字符串，key=value,解析得到结果

javascript有哪些方法定义对象

对象字面量： var obj = {};
构造函数： var obj = new Object();
Object.create(): var obj = Object.create(Object.prototype); // Object.create(proto[, propertiesObject])

===运算符判断相等的流程是怎样的

如果两个值不是相同类型，它们不相等
如果两个值都是null或者都是undefined，它们相等
如果两个值都是布尔类型true或者都是false，它们相等
如果其中有一个是NaN，它们不相等
如果都是数值型并且数值相等，他们相等， -0等于0
如果他们都是字符串并且在相同位置包含相同的16位值，他它们相等；如果在长度或者内容上不等，它们不相等；两个字符串显示结果相同但是编码不同和=都认为他们不相等
如果他们指向相同对象、数组、函数，它们相等；如果指向不同对象，他们不相等

==运算符判断相等的流程是怎样的

如果两个值类型相同，按照===比较方法进行比较
如果类型不同，使用如下规则进行比较
如果其中一个值是null，另一个是undefined，它们相等
如果一个值是数字另一个是字符串，将字符串转换为数字进行比较
如果有布尔类型，将true转换为1，false转换为0，然后用==规则继续比较
如果一个值是对象，另一个是数字或字符串，将对象转换为原始值然后用==规则继续比较
其他所有情况都认为不相等

对象到字符串的转换步骤

如果对象有toString()方法，javascript调用它。如果返回一个原始值（primitive value如：string number boolean）,将这个值转换为字符串作为结果
如果对象没有toString()方法或者返回值不是原始值，javascript寻找对象的valueOf()方法，如果存在就调用它，返回结果是原始值则转为字符串作为结果
否则，javascript不能从toString()或者valueOf()获得一个原始值，此时throws a TypeError

对象到数字的转换步骤

1. 如果对象有valueOf()方法并且返回元素值，javascript将返回值转换为数字作为结果
2. 否则，如果对象有toString()并且返回原始值，javascript将返回结果转换为数字作为结果
3. 否则，throws a TypeError

   <,>,<=,>=的比较规则

   所有比较运算符都支持任意类型，但是比较只支持数字和字符串，所以需要执行必要的转换然后进行比较，转换规则如下:
   如果操作数是对象，转换为原始值：如果valueOf方法返回原始值，则使用这个值，否则使用toString方法的结果，如果转换失败则报错
   经过必要的对象到原始值的转换后，如果两个操作数都是字符串，按照字母顺序进行比较（他们的16位unicode值的大小）
   否则，如果有一个操作数不是字符串，将两个操作数转换为数字进行比较

   函数内部arguments变量有哪些特性,有哪些属性,如何将它转换为数组

   arguments所有函数中都包含的一个局部变量，是一个类数组对象，对应函数调用时的实参。如果函数定义同名参数会在调用时覆盖默认对象
   arguments[index]分别对应函数调用时的实参，并且通过arguments修改实参时会同时修改实参
   arguments.length为实参的个数（Function.length表示形参长度）
   arguments.callee为当前正在执行的函数本身，使用这个属性进行递归调用时需注意this的变化
   arguments.caller为调用当前函数的函数（已被遗弃）
   转换为数组：var args = Array.prototype.slice.call(arguments, 0);

   列举数组相关的常用方法

   参考答案: push/pop, shift/unshift, split/join, slice/splice/concat, sort/reverse, map/reduce, forEach, filter

   列举字符串相关的常用方法

   参考答案: indexOf/lastIndexOf/charAt, split/match/test, slice/substring/substr, toLowerCase/toUpperCase

   请用代码写出(今天是星期x)其中x表示当天是星期几,如果当天是星期一,输出应该是”今天是星期一”

   var days = ['日','一','二','三','四','五','六'];
   var date = new Date();
   
   console.log('今天是星期' + days[date.getDay()]);

js里的作用域是什么样子的？

参考答案：大多数语言里边都是块作作用域，以{}进行限定，js里边不是．js里边叫函数作用域，就是一个变量在全函数里有效．比如有个变量p1在函数最后一行定义，第一行也有效，但是值是undefined.

var globalVar = 'global var';

function test() {
alert(globalVar); // undefined, 因为globalVar在本函数内被重定义了，导致全局失效，这里使用函数内的变量值，可是此时还没定义
var globalVar = 'overrided var'; //　globalVar在本函数内被重定义
alert(globalVar);　// overrided var
}
alert(globalVar); // global var，使用全局变量

js里边的this指的是什么?

参考答案: this指的是对象本身，而不是构造函数．

apply, call和bind有什么区别?

参考答案：三者都可以把一个函数应用到其他对象上，注意不是自身对象．apply,call是直接执行函数调用，bind是绑定，执行需要再次调用．apply和call的区别是apply接受数组作为参数，而call是接受逗号分隔的无限多个参数列表，

caller, callee和arguments分别是什么?

参考答案: caller,callee之间的关系就像是employer和employee之间的关系，就是调用与被调用的关系，二者返回的都是函数对象引用．arguments是函数的所有参数列表，它是一个类数组的变量．