web前端面试题（持续更新）

最新推荐文章于 2022-08-07 09:17:12 发布

weixin_30549175

最新推荐文章于 2022-08-07 09:17:12 发布

阅读量479

点赞数 1

文章标签： json 面试 javascript ViewUI

原文链接：http://www.cnblogs.com/wyhlightstar/p/6297989.html

版权

此文是我本人在面试的时候遇到的问题和一些同学遇到的问题加资料上面的问题的总结。（将会持续更新，因为未有满意工作）

面试时有几点需要注意：

　　1、面试题目：根据你的等级和职位的变化，入门级到大神级，广度和深度都会增加。

　　2、题目类型：理论知识、算法、项目细节、技术视野、工作案例。

　　3、细节追问：确保问道你开始不懂或面试官开始不懂为止，大大延伸题目的区分度和深度，知道你的实际能力。这种问题一般都是长时间学习积累的，临时抱佛脚是记不住的。

　　4、面试态度：你回答问题再棒，面试官会考虑我要不要这个人做我的同事？所以态度很重要，除了能做事，也要会做人。（把自己想象成在相亲=.=）

HTML

DOCTYPE的作用？

　　<! DOCTYPE>声明位于HTML文档的第一行，处于<html>标签之前。告知浏览器的解析器用什么文档标准来解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

HTML5为什么只需要写<!DOCTYPE HTML>？

　　HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为；而HTML4.01基于 SGML，所以需要对DTD进行引用，才能告知浏览器文档所需要使用的文档类型。

行内元素有哪些？块级元素有哪些？空元素有哪些？

　　css规范规定：每个元素都有个display属性，确定该元素的类型，而且每个元素都有默认的display值，比如div的display默认值为"block"，则为块级元素，span默认display值为"inline"，是行内元素。

　　1）行内元素有：a b span img input select strong ...；

　　2）块级元素有：div header main footer section ul p h1 h2 ...；

　　3）常见的空元素：<br> <hr> <img> <link> <meta> ...；

　　　　鲜为人知的空元素：<area> <col> <base> <embed> <command> ...；

页面导入样式时，使用link和@import有什么区别？　　

　　1） link属于XHTML标签，除了加载css外，还能定义RSS，定义rel连接属性等作用，而@import是CSS提供的，只能用于加载css；

　　2）页面加载的时候 link会同时被加载，而@import是引用的css会等页面加载完毕之后再加载；

　　3） import是CSS2.1提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题；

介绍一下你对浏览器内核的理解？

　　主要分为两部分：渲染引擎（layout engineer或Rendering Engine）和JS引擎。

　　渲染引擎：负责页面内容（HTML、XML、图像等等）、整理讯息（css）、计算网页的显示方式，输出到显示器或打印机。浏览器的内核的不同对网页的语法的解释也不同，所以渲染的效果也不同。

　　JS引擎：解析和执行JavaScript来实现网页的动态效果。

常见的浏览器内核有哪些？

　　Trident内核：IE，世界之窗浏览器，TT，360，搜狗浏览器等。

　　Gecko内核：Mozilla Firefox，Mozilla SeaMonkey等。

　　Presto内核：Opera7及以上。（Opera内核原为：Presto，现为：Blink）

　　Webkit内核：Safari，Chrome等。

　　详细文章：浏览器内核的介绍

HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

　　HTML5的新特性主要是关于图像，位置，存储，多任务等功能的增加。

　　　　绘画canvas；

　　　　用于媒介播放的 video 和 audio标签；

　　　　本地离线存储 localstorage 和 sessionstorage；

　　　　语义化更好的元素，如nav footer article；

　　　　表单控件，date、time、email、url、search；

　　　　新的技术 webworker，websocket，geolocation；

　　移除的元素：

　　　　纯表现的元素：big，center，font，s；

　　　　可用性不好的元素：frame，noframes，frameset；

　　支持HTML5新标签：

　　　　IE6/7/8支持document.createElement方法产生的标签；

　　　　支持新标签之后需要添加标签默认的样式；

　　如何区分HTML和HTML5：

　　　　DOCTYPE声明\新增的结构元素\功能元素；

简述一下你对HTML语义化得理解？

　　html语义化让页面的内容结构化，结构更加清晰，便于浏览器、搜索引擎解析。

　　使阅读代码的人对网站更容易分块，便于阅读维护和理解。

　　搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO。

请描述一下cookie，sessionStorage 和 localStorage的区别？

　　cookie是网站为了标识用户身份而存储在用户本地终端上的数据（通常经过加密）。

　　cookie数据始终在同源的http请求中携带，会在浏览器和服务器之间来回传递。

　　sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。

　　存储大小：

　　　　cookie数据大小不能找过4k。

　　　　sessionStorage 和 localStorage 存储的大小可以达到5M或更大。

　　存储有效时间：

　　　　localStorage：存储持久数据，浏览器关闭后数据不会丢失除非主动删除数据；

　　　　sessionStorage：数据在当前浏览器窗口关闭后自动删除；

　　　　cookie：设置的cookie过期时间内一直有效，即使窗口或浏览器关闭；

iframe有哪些缺点？

　　iframe会阻塞主页面的onload事件；

　　搜索引擎的检索程序无法解读这种页面，不利于SEO；

　　iframe和主页共享连接池，而浏览器对相同域的链接有限制，所以影响页面的并行加载；

　　使用iframe最好通过JavaScript动态给iframe添加src属性值，这样可以避开上述的问题。

Label的作用是什么？是怎么用的？

　　label标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

HTML5的form如何关闭自动提示功能？

　　给不想要提示的 form 或某个 input 设置为 autocomplete="off"。

实现不使用border画出1px高的线，在不同浏览器的标准模式和怪异模式下都能保持一致的效果？

title与h1的区别、b与strong的区别、i与em的区别？

　　title属性表示元素的提示信息，h1则表示层次明确的标题，对页面信息的抓取也有很大的影响。

　　b标签表示加粗，strong标签标明重点内容，有强调的含义，使用阅读设备阅读时，strong会重读。

　　i 标签内容展示位斜体，em表示强调的文本。

简述src和href的区别？

　　href是指向网络资源所在位置，建立与当前元素（锚点）或当前文档之间的链接，主要用于超链接。

　　src是指向外部资源的位置，指向的内容将会出现在当前标签所在的位置。

px和em的区别？

　　px和em都是长度单位，区别是px 的值是固定的，指定多少就是多少，计算比较容易。em的值不是固定的，并且em会继承父级元素的字体大小。

　　浏览器默认的字体大小都是16px，所以未经调整的浏览器都符合：1em =16px，12px =0.75em，10px =0.625em。

2017-02-08　　15:31:59 开始更新

CSS

介绍一下标准的css的盒子模型？低版本IE的盒子模型有什么不同的？

　　有两种盒子模型：IE盒子模型，W3C盒子模型。

　　盒模型：内容（content）、填充（padding）、边距（margin）、边框（border）。

　　区别：IE的content部分把 border 和 padding 计算了进去。

css选择符有哪些？

　　id选择器（#）、类选择器（.）、标签选择器（div）、兄弟元素选择器（div + p）、子选择器（ul>li）、后代选择器（div a）、通配符选择器（*）、属性选择器（input[type="number"]）、伪类选择器（a:hover，p:nth-child）。

CSS优先级？

　　同权重：内联样式表（标签内部）> 嵌入文件中（当前文件）> 外部样式表（外部文件）。

　　!important > id > class > tag （important比内联优先级高）。

如何居中div？

　　1、水平居中：给div设置一个宽度，添加 margin: 0 auto;

　　　　.box1{width: 200px;height: 50px;margin: 0 auto;background: red;} //定宽居中。

　　2、用绝对定位的方式水平垂直居中div一

　　　　.box2{
        　　position: absolute;
        　　width: 100px;
        　　height: 100px;
        　　margin: auto;
        　　top: 0;
        　　left: 0;
        　　bottom: 0;
        　　right: 0;
        　　background-color: red; /*加颜色可以更好的看到效果*/
    　　}

　　3、水平垂直居中div二

　　　　确定div的宽高，通过设置div的外边距达到效果。

　　　　.box3{
        　　position: relative;     /* 相对定位或绝对定位均可 */
        　　width:500px;
        　　height:300px;
        　　top: 50%;
        　　left: 50%;
        　　margin: -150px 0 0 -250px;       /*外边距为自身宽高的一半 */
        　　background-color: red;
    　　}

　　4、水平垂直居中div三

　　　　未知div 的宽高，利用 transform 来实现。

　　　　.box4{
        　　position: absolute;
        　　width:200px;
        　　height:200px;
        　　top: 50%;
        　　left: 50%;
        　　transform: translate(-50%, -50%);
        　　background-color: red;
    　　}

　　5、水平垂直居中div四

　　　　利用弹性布局 flex 实际使用请考虑兼容性。

　　　　body{
        　　display: flex;
        　　align-items: center; 　　　　/* 垂直居中 */
        　　justify-content: center;　　/* 水平居中 */
    　　}
    　　.box5{
        　　width: 100px;
        　　height: 100px;
        　　background-color: red;
    　　}

position的值有哪些？定位原点分别是什么？

　　absolute：生辰绝对定位的元素，相对于值不为 static的第一个父元素进行定位。

　　fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。

　　relative：生成相对定位的元素，相对于其正常位置进行定位。

　　static：默认值，没有定位，出现在正常流中。

　　inherit：规定从父元素继承position 属性的值。

用CSS创建一个三角形？

　　原理：一个div不要宽高，设边框，并把上、右、下、左三条边的颜色设为透明。

　　.demo{
        width: 0;
        height: 0;
        border-width: 50px;
        border-style: solid;
        border-color: transparent transparent red transparent; 　　/*普通的三角形*/
        /*border-color: transparent transparent red red; */ 　　/*直角三角形*/
    }

经常遇到的浏览器兼容性有哪些？原因是什么？解决办法是什么？

　　png 24位的图片在IE6浏览器上出现背景，解决方案是做成png8；

　　浏览器默认的margin 和 padding 不同，解决办法是加一个全局的 *{margin: 0; padding: 0;}来统一；

　　IE6双边距bug：块级标签float之后，又有恒星的margin的情况下，在IE6显示的margin 比设置的大，解决的办法是在float 的标签样式中假加入 _display: inline; 将其转化为行内属性。（_这个符号只有IE6识别）；

　　IE下可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute() 获取自定义属性，解决办法：统一使用通过getAttribute() 获取自定义属性；

　　IE下，event对象有x，y属性，但是没有pageX，pageY；Firefox下，event对象有pageX,pageY属性，但是没有x,y属性。

　　Chrome 中文界面下默认会将小于12px的文本强制按照 12px 显示，可以通过加入css属性 -webkit-text-size-adjust: none; 解决。

li 和 li 之间看不见的空白间隔是什么原因引起的？有什么解决的办法？

　　li 和 li 之间会受到中间空白比如空格和回车等影响，因为空格也属于字符，所以空白也会占据空间，所以会有间隔，把字符大小设为0，就没有空白间隔了。

为什么要初始化CSS样式？

　　因为浏览器的兼容问题，不同浏览器对部分标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。初始化样式会对SEO有一定的影响，但求影响最小的情况下初始化样式。

　　最简单的初始化方法：*{padding: 0; margin: 0;} （不建议）

　　淘宝的样式初始化代码：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset,legend, button, input, textarea, th, td { margin:0; padding:0; }

　　body, button, input, select,textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }

　　h1, h2, h3, h4, h5, h6{ font-size:100%; }

　　address, cite, dfn, em, var { font-style:normal; }

　　code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

　　small{ font-size:12px; }

　　ul, ol { list-style:none; }

　　a { text-decoration:none; }

　　a:hover { text-decoration:underline; }

　　sup { vertical-align:text-top; }

　　sub{ vertical-align:text-bottom; }

　　legend { color:#000; }

　　fieldset, img { border:0; }

　　button, input, select, textarea { font-size:100%; }

　　table { border-collapse:collapse; border-spacing:0; }

CSS里的 visibility 属性有个 collapse 属性值是干嘛用的？在不同的浏览器下以后什么区别？

　　对于普通元素 visibility: collapse; 会将元素完全隐藏，不占据页面布局空间，与 display: none; 表现相同。

　　如果是table，visibility: collapse; 将table 隐藏，但是会占据页面布局空间，仅在Firefox下起作用，IE会显示元素，Chrome会将元素完全隐藏，但是占据控件。

请解释一下为什么要清除浮动？清除浮动的方式？

　　清除浮动是为了清除使用浮动元素产生的影响，浮动的元素，高度会塌陷，而高度塌陷会使后面的布局不能正常显示。

　　方式一：给浮动元素的父元素添加 overflow: hidden;

　　方式二：父级元素定义 height；

　　方式三：父级元素也一起浮动；

　　方式四：在浮动元素的后面再添加一个空div 使用 clear: both；

　　方式五：常规的使用一个class

    .clearfix:before, .clearfix:after {
        content: " ";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }

什么是外边距合并？

　　外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，合并后的外边距的高度等于两个发生外边距合并的高度中的最大者。

zoom: 1 的清除浮动的原理？

　　清除浮动，触发hasLayout；

　　zoom 属性是IE浏览器的专有属性，可以设置或检索对象的缩放比例。

　　当设置了zoom的值后，所设置的元素就会扩大或者缩小，高度和宽度会重新计算，一旦zoom 的值发生改变就会重新渲染，运用这个原理，就解决了IE下子元素浮动的时候父元素不随着自动扩大的问题。

CSS优化，提高性能的方法有哪些？

　　需要先了解一下选择器的权值，也就是优先级，权值越大，优先级越高

　　ID：100； class：10； tag：1；

　　1、减少css嵌套，最好不要套三层以上，不要在ID选择器前面进行嵌套。

　　2、建立公共样式类，提取项目的通用共有样式，增强可复用性。

　　3、缩写css 比如margin，padding 等，巧妙的运用css的继承机制。比如font，color 等。

　　4、减少通配符* 或属性选择器的使用。

让页面里的字体变清晰，变细用CSS怎么做？

　　-webkit-font-smoothing: antialiased;

display: inline-block 什么时候会显示间隙？

　　移除空格，使用margin 负值，使用font-size: 0; letter-spacing, word-spacing。

JavaScript

介绍js的基本数据类型？

　　undefined、null、Boolean、Number、String。

介绍js有哪些内置对象？

　　Object 是 JavaScript 中所有对象的父对象。

　　数据封装类对象：object、Array、Boolean、Number、String。

　　其他对象：Function、Arguments、Math、Date、Error、RegExp。

JavaScript 原型，原型链？有什么特点？

　　每个对象都会在其内部初始化一个属性，就是prototype （原型），当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么就会去prototype里去找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，这就是原型链。

　　关系：instance.constructor.prototype = instance._proto_

　　特点：JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本，当我们修改原型时，与之相关的对象也会继承这一改变。

　　当我们需要一个属性时，JavaScript引擎会先看当前对象中是否有这个属性，如果没有的话就会查找他的prototype对象是否有这个属性，如此递推下去，一直检索到object 内建对象。

    function Func(){}
    Func.prototype.name = "Sean";
    Func.prototype.getInfo = function() {
      return this.name;
    }
    var person = new Func();
    //现在可以参考var person=Object.create(oldObject);
    console.log(person.getInfo());//它拥有了Func的属性和方法
    //"Sean"
    console.log(Func.prototype);
    // Func { name="Sean", getInfo=function()}

JavaScript有几种类型的值？

　　原始数据类型：undefined，null，Boolean，number，string

　　引用数据类型：对象，数组，函数

　　区别：存储位置不同，原始数据直接存储在stack中，占据空间小，大小固定；引用数据类型存储在heap中的对象，占据空间大，大小不固定；

如何将字符串转化为数字？

　　parseFloat("12.8c");

如何将浮点数点左边的数每三位添加一个逗号？如120000000.11转化为 120,000,000.11

function commafy(num){
    return num && num
      .toString()
      .replace(/(\d)(?=(\d{3})+\.)/g, function($1, $2){
          return $2 + ',';
      });
}

console.log(commafy(120000000.11))

实现数组的随机排序的方法？

// 方法一
    var arr = [1,2,3,4,5,6,7,8,9,10];
    function randSort1(arr){
         for(var i = 0,len = arr.length;i < len; i++ ){
              var rand = parseInt(Math.random()*len); 
              var temp = arr[rand]; 
              arr[rand] = arr[i]; 
              arr[i] = temp; 
            } 
            return arr; 
        }
    console.log(randSort1(arr));

    // 方法二
    var arr = [1,2,3,4,5,6,7,8,9,10];
    function randSort2(arr){
        var mixedArray = [];
        while(arr.length > 0){
            var randomIndex = parseInt(Math.random()*arr.length);
            mixedArray.push(arr[randomIndex]);
            arr.splice(randomIndex, 1);
        }
        return mixedArray;
    }
    console.log(randSort2(arr));

    // 方法三
    var arr = [1,2,3,4,5,6,7,8,9,10];
    arr.sort(function(){
        return Math.random() - 0.5;
    })
    console.log(arr);

JavaScript如何实现继承？

　　原型prototype 机制或apply和call方法实现比较简单。

function Parent(){
        this.name = 'wang';
    }

    function Child(){
        this.age = 28;
    }
    Child.prototype = new Parent();//继承了Parent，通过原型

    var demo = new Child();
    console.log(demo.age);
    console.log(demo.name);//得到被继承的属性

JavaScript 创建对象的几种方式？

　　JavaScript创建对象简单的说就是使用内置对象或各种自定义对象，还可以用JSON，混合方式。

    // 1、对象字面量的方式

    person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

    // 2、用function来模拟无参的构造函数

    function Person(){}
    var person=new Person();//定义一个function，如果使用new"实例化",该function可以看作是一个Class
    person.name="Mark";
    person.age="25";
    person.work=function(){
    alert(person.name+" hello...");
    }
    person.work();

    // 3、用function来模拟参构造函数来实现（用this关键字定义构造的上下文属性）

    function Pet(name,age,hobby){
       this.name=name;//this作用域：当前对象
       this.age=age;
       this.hobby=hobby;
       this.eat=function(){
          alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");
       }
    }
    var maidou =new Pet("麦兜",25,"coding");//实例化、创建对象
    maidou.eat();//调用eat方法

    // 4、用工厂方式来创建（内置对象）

     var wcDog =new Object();
     wcDog.name="旺财";
     wcDog.age=3;
     wcDog.work=function(){
       alert("我是"+wcDog.name+",汪汪汪......");
     }
     wcDog.work();


    // 5、用原型方式来创建

    function Dog(){

     }
     Dog.prototype.name="旺财";
     Dog.prototype.eat=function(){
     alert(this.name+"是个吃货");
     }
     var wangcai =new Dog();
     wangcai.eat();


    // 5、用混合方式来创建

    function Car(name,price){
      this.name=name;
      this.price=price;
    }
     Car.prototype.sell=function(){
       alert("我是"+this.name+"，我现在卖"+this.price+"万元");
      }
    var camry =new Car("凯美瑞",27);
    camry.sell();

JavaScript作用域链？

　　全局函数无法查看局部函数的内部细节，但是局部函数可以查看其上层的函数细节，直至全局细节。当需要从局部函数查找某一属性和方法时，如果当前作用域没有找到，就会到上层作用域查找，直至全局函数，这种形式就是作用域链。

谈谈 this 的理解？

　　this 总是指向当前函数的直接调用者（不是间接调用者）；

　　如果有 new 关键字，指向new出来的那个对象；

　　在事件中 this 指向触发这个事件的对象，IE中attachEvent中的this 总是指向全局对象Window；

eval 的作用？

　　它的功能是吧对应的字符串解析成JS代码并运行。应当避免使用eval，非常消耗性能（解析JS一次，执行一次）；

　　由JSON字符串转化为JSON对象的时候可以用eval，var obj =eval('('+str+')')；

什么是Windows对象，什么是document对象？

　　Window：指的是浏览器打开的窗口；

　　document：是HTML 文档对象的一个只读引用，window对象的一个属性；

null，undefined的区别？

　　null：表示一个对象，是没有值的值，也就是值为空；typeof：object；

　　undefined：表示一个变量声明了没有赋值；typeof：undefined；

　　注：在验证null 的时候需要用 "==="，因为 == 无法分别null 和undefined；

写一个通用的事件侦听器函数？

        // 参数： 操作的元素,事件名称 ,事件处理程序
        addEvent : function(element, type, handler) {
            if (element.addEventListener) {
                //事件类型、需要执行的函数、是否捕捉
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, function() {
                    handler.call(element);
                });
            } else {
                element['on' + type] = handler;
            }
        },
        // 移除事件
        removeEvent : function(element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.datachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        },
        // 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
        stopPropagation : function(ev) {
            if (ev.stopPropagation) {
                ev.stopPropagation();
            } else {
                ev.cancelBubble = true;
            }
        },
        // 取消事件的默认行为
        preventDefault : function(event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        // 获取事件目标
        getTarget : function(event) {
            return event.target || event.srcElement;
        },
        // 获取event对象的引用，取到事件的所有信息，确保随时能使用event；
        getEvent : function(e) {
            var ev = e || window.event;
            if (!ev) {
                var c = this.getEvent.caller;
                while (c) {
                    ev = c.arguments[0];
                    if (ev && Event == ev.constructor) {
                        break;
                    }
                    c = c.caller;
                }
            }
            return ev;
        }
    };

["1", "2", "3"].map(parseInt) 答案是多少？

　　parseInt() 函数能解析一个字符串，并返回一个整数，需要两个参数(val,radix)；

　　console.log(["1", "2", "3"].map(parseInt)); //Array [ 1, NaN, NaN ]

事件是？ IE和火狐事件机制有什么区别？如何组织冒泡？

　　我们在网页上的某个操作。（有的操作对应多个事件）例如：点击事件是可以被JavaScript 检测到的行为。

　　IE是事件冒泡，Firefox 支持两种，也就是捕获和冒泡。

　　e.stopPropagation();

什么是闭包？有什么作用？

　　闭包是有权访问另一个函数作用域中变量的函数，创建闭包最常见的方法是函数套函数。

　　通过另一个函数访问这个函数的局部变量，利用闭包可以突破作用域链，将函数内部的变量和方法传递到外部。

　　闭包的特性：函数内套函数，内部函数可以引用外层的参数与变量，参数和变量不会被垃圾回收机制回收。

<ul id="testUL">
        <li> index = 0</li>
        <li> index = 1</li>
        <li> index = 2</li>
        <li> index = 3</li>
    </ul>
<script>
    var nodes = document.getElementsByTagName("li");
    for(i = 0;i<nodes.length;i+= 1){
        nodes[i].onclick = (function(i){
            return function() {
                console.log(i);
            } 
        })(i);
    }

      function say667() {
        var num = 666;
        var sayAlert = function() {
            console.log(num);
        }
        num++;
        return sayAlert;
    }

    var sayAlert = say667();
    sayAlert()//执行结果应该弹出的667
</script>
本人愚钝，不明其中道理。

如何判断一个对象是否属于某个类？

　　使用 instanceof

　　var a =new Array();

　　alert(a instanceof Array);

new操作符都干了什么？

　　创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

　　属性和方法加入到this 引用的对象中。

JSON的了解？

　　JSON是一个轻量级的数据交换格式，它是基于JavaScript的一个子集，数据格式简单，易于读写，占用带宽小。

　　如：{"age": "12","name": "wyh"}

    // JSON字符串转换为JSON对象:
    var obj =eval('('+ str +')');
    var obj = str.parseJSON();
    var obj = JSON.parse(str);

    // JSON对象转换为JSON字符串：
    var last=obj.toJSONString();
    var last=JSON.stringify(obj);

Ajax 是什么？如何创建一个Ajax？

　　ajax 的全称：Asynchronous JavaScript And XML。

　　异步传输+js+XML。

　　异步就是向服务器发送请求的时候，不必等待结果，可以做其他的事情，等它有了结果会根据设定进行后续操作，不会进行整体页面的刷新，提高用户的体验。

　　1、创建XMLHttpRequest对象，也就是创建一个异步调用对象。

　　2、创建一个http请求，并指定该http请求的方法，URL及验证信息。

　　3、设置响应http请求状态变化的函数。

　　4、发送http请求。

　　5、获取异步调用返回的数据。

　　6、使用JavaScript和DOM实现局部刷新。

ajax 解决浏览器缓存问题？

　　在ajax 发送请求前加上：anyAjaxObj.setRequestHeader("If-Modified-Since","0");

　　在ajax 发送请求前加上：anyAjaxObj.setRequestHeader("Cache-Control","no-cache");

　　在URL后面加上一个随机数："fresh=" + Math.random();

　　在在URL后面加上时间搓："nowtime=" + new Date().getTime();

　　如果是jquery，直接这样$.ajaxSetup({cache:false}); 这样页面上所有的ajax都会执行这句，就是不需要保存缓存记录。

同步和异步的区别？

　　同步：浏览器向服务器发送请求，用户看得到页面刷新，等请求完，页面刷新，新内容出现，用户接着下一步操作。

　　异步：浏览器发送请求，用户不需要等待，可以直接进行其他的操作，等请求完成，不会刷新，新内容出现。

document.write 和 innerHTML的区别？

　　document.write只能重绘整个页面。

　　innerHTML 可以重绘页面的某一部分。

DOM操作--怎样添加、移除、移动、复制、创建和查找节点？

// （1）创建新节点
    createDocumentFragment()    //创建一个DOM片段
    createElement()     //创建一个具体的元素
    createTextNode()   //创建一个文本节点
    // （2）添加、移除、替换、插入
    appendChild()
    removeChild()
    replaceChild()
    insertBefore() //在已有的子节点前插入一个新的子节点
    // （3）查找
    getElementsByTagName()    //通过标签名称
    getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
    getElementById()    //通过元素Id，唯一性
    getElementByClassName() //通过class
    querySelector() //选择器查找