（史上最全）Web前端面试试题大全及答案汇总（之篇二JavaScript基础笔试面试题）

注：另附JavaScript基础及进阶算法题，自取Web前端面试试题及答案之JavaScript基础及进阶算法设计题

1、javascript 的 typeof 返回哪些数据类型

object
number
function
boolean
undefined
string 

2、例举 3 种强制类型转换和 2 种隐式类型转换?

强制（parseInt(),parseFloat(),Number()）
隐式（==）
1==”1”//true
null==undefined//true

3、split()和 join() 的区别

前者是切割成数组的形式，
后者是将数组转换成字符串

4、数组方法 pop() push() unshift() shift()

Push()尾部添加 
pop()尾部删除 
Unshift()头部添加 
shift()头部删除

5、事件绑定和普通事件有什么区别

传统事件绑定和符合 W3C 标准的事件绑定有什么区别？

div1.onclick=function(){}; <button onmouseover=””></button> 

1、如果说给同一个元素绑定了两次或者多次相同类型的事件，那么后面的绑定会覆盖前面 的绑定 ；
2、不支持 DOM 事件流 事件捕获阶段目标元素阶段=>事件冒泡阶段

addEventListener
1、 如果说给同一个元素绑定了两次或者多次相同类型的事件，所有的绑定将会依次触发
2、 支持 DOM 事件流
3、 进行事件绑定传参不需要 on 前缀 addEventListener(“click”,function(){},true);//此时的事件就是在事件冒泡阶段执行

ie9 开始，ie11edge：addEventListener
ie9 以前：attachEvent/detachEvent
1、 进行事件类型传参需要带上 on 前缀
2、 这种方式只支持事件冒泡，不支持事件捕获 事件绑定是指把事件注册到具体的元素之上，普通事件指的是可以用来注册的事件

6、IE 和 DOM 事件流的区别

1.执行顺序不一样、
2.参数不一样
3.事件加不加 on
4.this 指向问题
IE9 以前：attachEvent(“onclick”)、detachEvent(“onclick”)
IE9 开始跟 DOM 事件流是一样的，都是 addEventListener

7、IE 和标准下有哪些兼容性的写法

var ev=ev||window.event 
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target

8、call 和 apply 的区别

call 和 apply 相同点：
都是为了用一个本不属于一个对象的方法，让这个对象去执行

    toString.call([],1,2,3)
    toString.apply([],[1,2,3])
    Object.call(this,obj1,obj2,obj3)
    Object.apply(this,arguments)

9、b 继承 a 的方法

考点：继承的多种方式

js继承有5种实现方式：

1、继承第一种方式：对象冒充

 function Parent(username){
    this.username = username;
    this.hello = function(){
      alert(this.username);
    }
  }
  function Child(username,password){
    //通过以下3行实现将Parent的属性和方法追加到Child中，从而实现继承
    //第一步：this.method是作为一个临时的属性，并且指向Parent所指向的对象，
    //第二步：执行this.method方法，即执行Parent所指向的对象函数
    //第三步：销毁this.method属性，即此时Child就已经拥有了Parent的所有属性和方法
    this.method = Parent;
    this.method(username);//最关键的一行
    delete this.method;

    this.password = password;
    this.world = function(){
      alert(this.password);
    }
  }
  var parent = new Parent("zhangsan");
  var child = new Child("lisi","123456");
  parent.hello(); //zhangsan
  child.hello();  //lisi
  child.world();  //123456

2、继承第二种方式：call()方法方式

call方法是Function类中的方法
call方法的第一个参数的值赋值给类(即方法)中出现的this
call方法的第二个参数开始依次赋值给类(即方法)所接受的参数

   function test(str){
                 alert(this.name + " " + str);
     }
    var object = new Object();
    object.name = "zhangsan";
    // 此时，第一个参数值object传递给了test类(即方法)中出现的this，而第二个参数"langsin"则赋值给了test类(即方法)的str
    test.call(object,"langsin"); //zhangsan langsin

    function Parent(username){
        this.username = username;
        this.hello = function(){
            document.write(this.username + "<br>");
    }
  }
  function Child(username,password){
    Parent.call(this,username);

    this.password = password;
    this.world = function(){
      document.write(this.password+ "<br>");
    }
  }
  var parent = new Parent("zhangsan");
  var child = new Child("lisi","123456");
  parent.hello(); //zhangsan
  child.hello();  //lisi
  child.world();  //123456

3、继承的第三种方式：apply()方法方式

apply方法接受2个参数，
A、第一个参数与call方法的第一个参数一样，即赋值给类(即方法)中出现的this
B、第二个参数为数组类型，这个数组中的每个元素依次赋值给类(即方法)所接受的参数

  function Parent(username){
    this.username = username;
    this.hello = function(){
      alert(this.username);
    }
  }
  function Child(username,password){
    Parent.apply(this,new Array(username));

    this.password = password;
    this.world = function(){
      alert(this.password);
    }
  }
  var parent = new Parent("zhangsan"); 
  var child = new Child("lisi","123456");
  parent.hello(); //zhangsan
  child.hello();  //lisi
  child.world();  //123456

4、继承的第四种方式：原型链方式

即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child，从而实现了继承

function Person(){
  }
  Person.prototype.hello = "hello";
  Person.prototype.sayHello = function(){
    alert(this.hello);
  }

  function Child(){
  }
  Child.prototype = new Person();//这行的作用是：将Parent中将所有通过prototype追加的属性和方法都追加到Child，从而实现了继承
  Child.prototype.world = "world";
  Child.prototype.sayWorld = function(){
    alert(this.world);
  }

  var c = new Child();
  c.sayHello();
  c.sayWorld();

5、继承的第五种方式：混合方式

混合了call方式、原型链方式

 function Parent(hello){
    this.hello = hello;
  }
  Parent.prototype.sayHello = function(){
    alert(this.hello);
  }

  function Child(hello,world){
    Parent.call(this,hello);//将父类的属性继承过来
    this.world = world;//新增一些属性
  }

  Child.prototype = new Parent();//将父类的方法继承过来

  Child.prototype.sayWorld = function(){//新增一些方法
    alert(this.world);
  }

  var c = new Child("zhangsan","lisi");
  c.sayHello();
  c.sayWorld();

10、JavaScript this 指针、闭包、作用域

this：指向调用上下文 
闭包：内层作用域可以访问外层作用域的变量 
作用域：定义一个函数就开辟了一个局部作用域，整个 js 执行环境有一个全局作用域

11、事件委托是什么

符合 W3C 标准的事件绑定 addEventLisntener/attachEvent
利用事件冒泡的原理，让自己本身要触发的事件，让他的父元素代替执行！

12、闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。
闭包的缺点：滥用闭包函数会造成内存泄露，因为闭包中引用到的包裹函数中定义的变量
永远不会被释放，所以我们应该在必要的时候，及时释放这个闭包函数。

弄清楚闭包的概念及运行机制非常重要，详见博客（）

13、如何阻止事件冒泡和默认事件

阻止事件冒泡

e. stopPropagation();//标准浏览器
event.canceBubble=true;//ie9 之前

阻止默认事件：
为了不让 a 点击之后跳转，我们就要给他的点击事件进行阻止

return false
e.preventDefault();

14、添加 删除 替换 插入到某个接点的方法

obj.appendChild() //添加
obj.insertBefore() //插入。原生的 js 中不提供 insertAfter();
obj.replaceChild()//替换
obj.removeChild()//删除

15、javascript 的本地对象，内置对象和宿主对象

本地对象
Object、Function、Array、String、Number、Date、RegExp、Boolean、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError等可以 用new 实例化的对象
由此得出，JS的本地对象就是ECMA-262中定义的类（引用类型）

内置对象
ECMA-262把内置对象定义为：由ECMAScript提供实现的、独立于宿主环境的所有对象，在ECMAScript程序开始执行时出现。
这意味着内置对象都是已经实例化好的，不需要我们再进行实例化了，这里我们首先会想到的就是Math对象。
ECMA-262定义的内置对象只有两个：Global和Math。（本地对象和内置对象都是独立于宿主对象，根据定义可以看出来内置对象也是本地对象，在JS中所有的内置对象都是本地对象）。

Math对象是我们经常用到的，但是Global就比较少见了。其实我们经常用到Global对象，只是没有用Global这个名字。

Global对象是一个比较特殊的对象，它是一个全局对象，在程序中只有一个，它的存在伴随着整个程序的生命周期，全局对象不能通过名字来访问，但是它有一个window属性，这个属性指向它本身。

大家也要清楚，在ECMAScript中不存在独立的函数，所有的函数都应该是某个对象的方法。类似于isNaN()、parseInt()、parseFloat()等方法都是Global对象的方法。

宿主对象
宿主对象：由ECMAScript实现的宿主环境提供的对象。
可能这样不是很好理解，上面已经说过了宿主环境包括Web浏览器，所以我们可以这样理解，浏览器提供的对象都是宿主对象。

也可以这样理解，因为本地对象是非宿主环境的对象，那么非本地对象就是宿主对象，即所有的BOM对象和DOM对象都是宿主对象。
那么还有一种对象，那就是我们自己定义的对象，也是宿主对象。

最简单的理解：ECMAScript官方未定义的对象都属于宿主对象。
如浏览器自带的 document,window 等

总结
官方的定义太绕口，还不好理解。说的简单点：
本地对象就是ECMAScript中定义好的对象，如String、Date等，
内置对象是本地对象中比较特殊的一种，它不用实例化，包括Global和Math，
宿主对象就是BOM、DOM和自己定义的对象。

16、document load 和 document ready 的区别

Document.onload 是在结构和样式加载完就执行 js
window.onload：不仅仅要在结构和样式加载完，还要执行完所有的样式、图片这些资源文 件，全部加载完才会触发 window.onload 事件
Document.ready 原生中没有这个方法，jquery 中有 $(document).ready(function)

17、”==”和“===”的不同

前者会自动转换类型
后者不会
1==”1”
null==undefined
===先判断左右两边的数据类型，如果数据类型不一致，直接返回 false
之后才会进行两边值的判断

18、JavaScript的同源策略

详细解答请点击链接进入我的另一篇博客查看（JavaScript的同源策略详解）

19、编写一个数组去重的方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>去除一个数组中重复的元素</title>
    </head>
    <body>
    <script type="text/javascript">
    /*
     * 方法一：
     */
        var arr = [1, 0, 2, 1, 8, 1, 0, 10, 8];
        var obj = {};
        var temp = [];
        for(var i=0; i<arr.length; i++) {
            if(!obj[arr[i]]) {
                obj[arr[i]] = 1;
                temp.push(arr[i]);
            }
        }
        console.log(temp); //1,0,2,8,10

        /*
         * 方法二：
         */
        var arr2= [1, 0, 2, 1, 8, 1, 0, 10, 8, 9, 11];
        var arr3 = [];
        for(var i=0; i<arr2.length; i++) {
        //indexOf()方法从数组的开头（位 置 0）开始向后查找,返回索引号
        //若未找到则返回-1
            if((arr3.indexOf(arr2[i])) < 0) {
                arr3.push(arr2[i]);
            }
        }
        console.log(arr3);//1,0,2,8,10,9,11
        /*
         * 方法三：
         */
        //filter()：对数组中的每一项运行给定函数，返回该函数会返回 true的项组成的数组。 
        var arr4 = [0, 10, 22, 0, 10, 1, 2, 3, 1];
        var arr5 = arr4.filter(function(element, index, arr4) {
            return arr4.indexOf(element) == index;
        });
        console.log(arr5); //0,10,22,1,2,3
    </script>
    </body>
</html>

21、JavaScript 的数据类型都有什么？

基本数据类型：String,Boolean,number,undefined,object,Null

引用数据类型：Object(Array,Date,RegExp,Function)

那么问题来了，如何判断某变量是否为数组数据类型？

方法一.判断其是否具有“数组性质”，如 slice()方法。可自己给该变量定义 slice 方法，
故有时会失效

方法二.obj instanceof Array 在某些 IE 版本中不正确

方法三.方法一二皆有漏洞，在 ECMA Script5 中定义了新方法 Array.isArray(), 保证其兼
容性，最好的方法如下：

toString.call(18);//”[object Number]”
toString.call(“”);//”[object String]”

解析这种简单的数据类型直接通过 typeof 就可以直接判断

toString.call 常用于判断数组、正则这些复杂类型
toString.call(/[0-9]{10}/)//”[object RegExp]”
if(typeof Array.isArray==="undefined"){
Array.isArray = function(arg){
return Object.prototype.toString.call(arg)==="[object Array]"
};
}

22、已知 ID 的 Input 输入框，希望获取这个输入框的输入值，怎么做？(不使 用第三方框架)

document.getElementById(“ID”).value

23、希望获取到页面中所有的 checkbox 怎么做？(不使用第三方框架)

var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];//返回的所有的 checkbox
var len = domList.length; //缓存到局部变量
while (len--) { //使用 while 的效率会比 for 循环更高
if (domList[len].type == ‘checkbox’) {
checkBoxList.push(domList[len]);
}
}

24、设置一个已知 ID 的 DIV 的 html 内容为 xxxx，字体颜色设置为黑色(不使用 第三方框架)

var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”
dom.style.color = “#000”

25、当一个 DOM 节点被点击时候，我们希望能够执行一个函数，应该怎么做？

直接在 DOM 里绑定事件：<div onclick=”test()”></div>

在 JS 里通过 onclick 绑定：xxx.onclick = test

通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)

那么问题来了，Javascript 的事件流模型都有什么？

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

“DOM 事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

26、看下列代码输出为何？解释原因。

var a;
alert(typeof a); // “undefined” 
//alert(b); // 报错 
b=10; 
alert(typeof b);//”number”

解释：Undefined 是一个只有一个值的数据类型，这个值就是“undefined”，在使用 var
声明变量但并未对其赋值进行初始化时，这个变量的值就是 undefined。而 b 由于未声明将
报错。注意未申明的变量和声明了未赋值的是不一样的。

undefined 会在以下三种情况下产生：

• 1、 一个变量定义了却没有被赋值
• 2、 想要获取一个对象上不存在的属性或者方法:
• 3、 一个数组中没有被赋值的元素

注意区分 undefined 跟 not defnied(语法错误)是不一样的

27、看下列代码,输出什么？解释原因。

var a = null;
alert(typeof a); //object

解释：null 是一个只有一个值的数据类型，这个值就是 null。表示一个空指针对象，所以
用 typeof 检测会返回”object”。

28、看下列代码,输出什么？解释原因。

var undefined;//此时 undefined 这个变量的值是 undefined
undefined == null; // true
1 == true; // true

此时会把布尔类型的值转换为数字类型

true=1 false=0
2 == true; // false
0 == false; // true
0 == ''; // true
NaN == NaN; // false
[] == false; // true
[] == ![]; // true 

• undefined 与 null 相等，但不恒等（===）
• 一个是 number 一个是 string 时，会尝试将 string 转换为 number
• 尝试将 boolean 转换为 number，0 或 1
• 尝试将 Object 转换成 number 或 string，取决于另外一个对比量的类型

所以，对于 0、空字符串的判断，建议使用 “===” 。“===”会先判断两边的值类
型，类型不匹配时为 false。

那么问题来了，看下面的代码，输出什么，foo 的值为什么？

var foo = "11"+2-"1";
console.log(foo);//111
console.log(typeof foo);

执行完后 foo 的值为 111，foo 的类型为 number。

29、看代码给答案。

var a = new Object();
a.value = 1;
b = a; //{value:1}
b.value = 2;
alert(a.value);//2

答案：2（考察引用数据类型细节）

30 、 已 知 数 组 var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert 出”This is Baidu Campus”。

答案：

alert(stringArray.join(“ ”))

31、已知有字符串 foo=”get-element-by-id”,写一个 function 将其转化成驼峰表示法”：getElementById”。

function combo(msg){
var arr=msg.split("-");//[get,element,by,id]
for(var i=1;i<arr.length;i++){
   arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);//Element
}
msg=arr.join("");//msg=” getElementById”
return msg;
}

(考察基础 API)

32、输出今天的日期，以 YYYY-MM-DD 的方式，比如今天是 2014 年 9 月 26 日， 则输出 2014-09-26

var d = new Date();
// 获取年，getFullYear()返回 4 位的数字
var year = d.getFullYear();
// 获取月，月份比较特殊，0 是 1 月，11 是 12 月
var month = d.getMonth() + 1;
// 变成两位
month = month < 10 ? '0' + month : month;
// 获取日
var day = d.getDate();
day = day < 10 ? '0' + day : day;
alert(year + '-' + month + '-' + day);

33、使用正则表达式替换字符串

将字符串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替换 成 10，{$name}替换成 Tony （使用正则表达式）
答案：

"<tr><td>{$id}</td><td>{$name}</td></tr>".replace(/{\$id}/g, '10').replace(/{\$name}/g, 'Tony');

34、为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写 一个函数 escapeHtml，将<, >, &, \进行转义

function escapeHtml(str) {
//[<>”&]:中括号中字符只要其中的一个出现就代表满足条件
//给 replace 第二个参数传递一个回调函数，回调函数中参数就是匹配结果，如果匹配不到就是null
    return str.replace(/[<>"&]/g, function(match) {
        switch (match) {
            case "<":
            return "&lt;";
            case ">":
            return "&gt;";
            case "&":
            return "&amp;";
            case '\"':
            return "&quot;";
          }
      });
}

35、foo=foo||bar ，这行代码是什么意思？为什么要这样写？

这种写法称之为短路表达式

意思为：if(!foo) foo = bar; //如果 foo 存在，值不变，否则把 bar 的值赋给 foo。

短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要
最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。

注意 if 条件的真假判定，记住以下是 false 的情况：
空字符串、false、undefined、null、0

36、看下列代码，将会输出什么?(变量声明提升)

var foo = 1;
function(){
    console.log(foo); //undefined
    var foo = 2;
    console.log(foo); //2
}

答案：输出 undefined 和 2。上面代码相当于：

var foo = 1;
function(){
    var foo;
    console.log(foo); //undefined
    foo = 2;
    console.log(foo); // 2;
}

函数声明与变量声明会被 JavaScript 引擎隐式地提升到当前作用域的顶部，但是只提升名
称不会提升赋值部分。

37、用 js 实现随机选取 10–100 之间的 10 个数字，存入一个数组，并排序。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
        /*
         * 随机选取[10, 100]内的10个数
         *并排序
         * Math.floor(num); 取得num整数部分
         * Math.ceil(num); 取得大于等于num的最小整数
         * Math.round(num); num四舍五入后的整数
         */
        var pushArray = []; //存放取出的数
        //产生一个10到100之间的数
        function getRandom(start, end) {
            var choice = end - start + 1;
            return Math.floor(Math.random() * choice + start);
        }
        //Math.random()就是获取 0-1 之间的随机数（永远获取不到 1）
        for(var i=0; i<10; i++) {
            var result = getRandom(10, 100);
            pushArray.push(result);
        }
        pushArray.sort();
        console.log(pushArray); //12,19,21,28,34,39,44,54,65,86
        </script> 

    </body>
</html>

38、把两个数组合并，并删除第二个元素。

var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);  //splice() 方法用于插入、删除或替换数组的元素。

splice()方法如下所示：

//splice()方法
/*
 * 删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数
 * 会影响原始数组
 */
var fruits = ["apple", "mango", "banana", "pear"];
var fruit1 = fruits.splice(0, 2);
document.write(fruits + "<br>"); //banana,pear
document.write(fruit1); //返回删除的项apple,mango
document.write("<br>");
/*
 * 插入：可以向指定位置插入任意数量的项，只需提供 3个参数：
 * 起始位置、0（要删除的项数） 和要插入的项
 */
var fruit2 = ["apple", "mango", "banana", "pear"];
var fruit3 = fruit2.splice(2, 0, "strawberry", "lalala");
document.write(fruit2 + "<br>");//apple,mango,strawberry,lalala,banana,pear
document.write(fruit3 + "<br>");//未删除项，所以返回空数组
/*
 * 替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，
 * 只需指定 3 个参数：起 始位置、要删除的项数和要插入的任意数量的项。
 * 插入的项数不必与删除的项数相等。
 */
var fruit4 = ["apple", "mango", "banana", "pear"];
var fruit5 = fruit4.splice(1, 2, "aaa", "bbb", "ccc");
document.write("<br>" + fruit4 + "<br>");//apple,aaa,bbb,ccc,pear
document.write(fruit5);  // 返回删除的项mango,banana

39、怎样添加、移除、移动、复制、创建和查找节点

详细讲解请见本人另一篇博客（（完全详解）JavaScript 添加、复制、移除、移动、创建和查找节点）】

40、有这样一个 URL： http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e， 请写一段 JS 程序提取 URL 中的各个 GET 参数(参数名和参数个数不确定)，将其 按 key-value 形式返回到一个 json 结构中，如{a:’ 1′, b:’ 2′, c:” , d:’ xxx’, e:undefined}。

截取问号后的字符串，按‘&’间隔拆分，再按‘=’拆分，再分情况判断。

var url='http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e';
function nameAndValue(url){
   url=url.split('?')[1];
   var group=url.split('&');
   var res={};
   for(var i=0;i<group.length;i++){
       start=group[i].indexOf('=');
       if(start!=-1){
           name=group[i].slice(0,start);
           value=group[i].slice(start+1,group[i].length);
           res[name]=value;
       }else{
           res[group[i]]=undefined;
       }
   }
   for(var key in res) {
    document.write(key + ":" + " " + res[key]);
    document.write("<br>");
}
}
nameAndValue(url);

结果：

a: 1
b: 2
c:
d: xxx
e: undefined

41、正则表达式构造函数 var reg=new RegExp(“xxx”)与正则表达字面量 var reg=//有什么不同？匹配邮箱的正则表达式？

答案：当使用 RegExp()构造函数的时候，不仅需要转义引号（即\”表示”），并且还需要
双反斜杠（即\表示一个\）。
使用正则表达字面量的效率更高。

邮箱的正则匹配：

var regMail = /^[A-Za-z\d]+[A-Za-z\d\-_\.]*@([A-Za-z\d]+[A-Za-z\d\-]*\.)+[A-Za-z]{2,4}$/;

24.看下面代码，给出输出结果。

for(var i=1;i<=3;i++){
    setTimeout(function(){
    console.log(i);
    }, 0);
};

答案：4 4 4。
原因： Javascript 事件处理器在线程空闲之前不会运行。
追问，如何让上述代码输出 1 2 3？

for(var i=1;i<=3;i++){
    setTimeout((function(a){ //改成立即执行函数
    console.log(a);
    })(i), 0);
};

1 //输出
2
3

42、写一个 function，清除字符串前后的空格。（兼容所有浏览器）

使用自带接口 trim()，考虑兼容性：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--写一个 function，清除字符串前后的空格。（兼容所有浏览器）-->
<script type="text/javascript">
    if(!String.prototype.trim) {
        String.prototype.trim = function() {
            //\s 匹配空白字符：回车、换行、制表符 tab 空格
            return this.replace(/^\s+/, "").replace(/\s+$/, "");
        }
    }
    //测试
    var str = " \t\n test string ";
    var newStr = str.trim();
    alert(newStr == "test string"); //true
</script> 
</body>
</html>

43、Javascript 中 callee 和 caller 的作用？

arguments.callee：获得当前函数的引用

caller 是返回一个对函数的引用，该函数调用了当前函数；

callee 是返回正在被执行的 function 函数，也就是所指定的 function 对象的正文。

那么问题来了？如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；
假定每对兔子都是一雌一雄，试问一对兔子，第 n 个月能繁殖成多少对兔子？（使用 callee
完成）

var result=[];
function fn(n){ //典型的斐波那契数列
    if(n==1){
        return 1;
    }else if(n==2){
        return 1;
    }else{
        if(result[n]){
            return result[n];
        }else{
        //argument.callee()表示 fn()
        result[n]=arguments.callee(n-1)+arguments.callee(n-2);
        return result[n];
        }
    }
}

44、 Javascript 中, 以下哪条语句一定会产生运行错误（BC）

A、 var _变量=NaN;   
B、var 0bj = [];
C、var obj = //; 
D、var obj = {};

45、以下两个变量 a 和 b，a+b 的哪个结果是 NaN？ 答案( C )

A、var a=undefind; b=NaN    //拼写
B、var a=‘123’; b=NaN        //字符串
C、var a =undefined , b =NaN
D、var a=NaN , b='undefined'//”Nan”

46、var a=10; b=20; c=4; ++b+c+a++ 以下哪个结果是正确的？答案( B )

A、 34 B、35 C、36 D、37

47、下面的 JavaScript 语句中，（ D ）实现检索当前页面中的表单元素中的 所有文本框，并将它们全部清空

A.
for(vari=0;i<form1.elements.length;i++){ 
    if(form1.elements.type==”text”)
    form1.elements.value=”";
}
B. 
for(vari=0;i<document.forms.length;i++) {
    if(forms[0].elements.type==”text”)
    forms[0].elements.value=”";
}
C.
 if(document.form.elements.type==”text”)
    form.elements.value=”";
D. 
for(vari=0;i<document.forms.length; i++){
    for(var j=0;j<document.forms.elements.length; j++){
        if(document.forms.elements[j].type==”text”)
        document.forms.elements[j].value=”";
    }
}

48、要将页面的状态栏中显示“已经选中该文本框”，下列 JavaScript 语句正确的是（ A ）

A. window.status=”已经选中该文本框”
B. document.status=”已经选中该文本框”
C. window.screen=”已经选中该文本框”
D. document.screen=”已经选中该文本框”

49、以下哪条语句会产生运行错误：（A）正确答案：A

A.var obj = (); 
B.var obj = []; 
C.var obj = {}; 
D.var obj = //;

50、以下哪个单词不属于 javascript 保留字：（B）

A.with 
B.parent 
C.class 
D.void

51、请选择结果为真的表达式：（C）

A.null instanceof Object 
B.null === undefined 
C.null == undefined 
D.NaN == NaN

52、Javascript 中, 如果已知 HTML 页面中的某标签对象的 id=”username”， 用_document.getElementById(‘username’) _方法获得该标签对象。

53、typeof 运算符返回值中有一个跟 javascript 数据类型不一致，它是 ”function”_。

typeof Number 
typeof Object

54、定义了一个变量，但没有为该变量赋值，如果 alert 该变量，javascript 弹出的对话框中显示___undefined 。

55、分析代码，得出正确的结果。

var a=10, b=20 , c=30;
++a;
a++;
e=++a+(++b)+(c++)+a++;
alert(e);

弹出提示对话框：77

57、写出程序运行结果

for(i=0, j=0; i<10, j<6; i++, j++){
    k = i + j;
}
结果：10

58、阅读以下代码，请分析出结果：

var arr = new Array(1 ,3 ,5);
arr[4]='z';//[1,3,5,undefined,’z’]
arr2 = arr.reverse();//arr2=[’z’,undefined,5,3,1];
//arr=[’z’,undefined,5,3,1]
arr3 = arr.concat(arr2);
alert(arr3);

弹出提示对话框：z,,5,3,1,z,,5,3,1 reverse（）方法颠倒数组中元素的位置，并返回该数组的引用。

59、补充按钮事件的函数，确认用户是否退出当前页面，确认之后关闭窗口；

<html>
<head>
<script type=”text/javascript” >
    function closeWin(){
    //在此处添加代码
    if(confirm(“确定要退出吗？”)){
        window.close();
        }
    }
</script>
</head>
<body>
    <input type=”button” value=”关闭窗口” onclick=”closeWin()”/>
</body>
</html>

60、写出简单描述 html 标签（不带属性的开始标签和结束标签）的正则表达式， 并将以下字符串中的 html 标签去除掉

var str = “<div>这里是 div<p>里面的段落</p></div>”;

<script type=”text/javascript”>
var reg = /<\/?\w+\/?>/gi; // x? 匹配问号前面的内容出现 0 或 1 次。
var str = “<div>这里是 div<p>里面的段落</p></div>”;
alert(str.replace(reg,""));
</script>

61、完成 foo()函数的内容，要求能够弹出对话框提示当前选中的是第几个单选框。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" onsubmit="return foo()">
<input type="radio" name="radioBox" />苹果<br />
<input type="radio" name="radioBox" />苹果<br />
<input type="radio" name="radioBox" />苹果<br />
<input type="radio" name="radioBox" />苹果<br />
<input type="radio" name="radioBox" />苹果<br />
<input type="radio" name="radioBox" />苹果<br />
<input type="submit"  /> 
</form>
<script type="text/javascript">
function foo() {
    var getInput = document.getElementsByName("radioBox");
    for(var i=0; i<getInput.length; i++) {
        if(getInput[i].checked) {
            alert("您选中了第"+(i+1)+"个单选框");
            return;
        }
    }
     alert("没有选中任何选项");             
}
</script>
</body>
</html>

62、完成函数 showImg()，要求能够动态根据下拉列表的选项变化，更新图片的显示

注：图片路径和名称需根据自己实际情况设置

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="page">
        <div id="selector">
            <div class="sel">
                <select onchange="show(this)">
                    <option value="../img/banner/banner1" class="opt">科技改变未来</option>
                    <option value="../img/banner/banner2" class="opt">高端品质</option>
                    <option value="../img/banner/banner3" class="opt">智能产品</option>
                    <option value="../img/banner/banner4" class="opt">高科技</option>
                </select>
            </div>
            <div class="img">
                <img id="imgage1" src="../img/banner/banner1.jpg" width="600"  />
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function show(img) {
            var str = img.value;
//              alert(str);
            document.getElementById("imgage1").src = str + ".jpg";
        }
    </script>
</body>
</html>

63、截取字符串 abcdefg 的 efg

alert('abcdefg'.substring(4));

64、列举浏览器对象模型 BOM 里常用的至少 4 个对象，并列举 window 对象的常 用方法至少 5 个

对象：Window document location screen history navigator
方法：Alert() confirm() prompt() open() close()

65、简述列举文档对象模型 DOM 里 document 的常用的查找访问节点的方法并做 简单说明

Document.getElementById 根据元素 id 查找元素
Document.getElementByName 根据元素 name 查找元素
Document.getElementTagName 根据指定的元素名查找元素

66、希望获取到页面中所有的 checkbox 怎么做？(不使用第三方框架)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>获取所有checkbox</title>
</head>
<body>
    <div id="page">
        <form action="" method="get">
            姓名：<input type="text" class="1"/><br /><br />
            性别：<br />
            <input type="radio" class="2" name="sex" />男
            <input type="radio" class="3" name="sex" />女<br /><br />
            年龄：<select name="age">
                <option value="kids">0-10</option>
                <option value="teenagers">11-20</option>
                <option value="adults">21-30</option>
                <option value="freeFromConfusion">31-40</option>
                <option value="half">41-50</option>
                <option value="50_60">51-60</option>
                <option value="60_70">61-70</option>
                <option value="70_80">71-80</option>
                <option value="80_90">81-90</option>
                <option value="90_100">91-100</option>
                <option value="over_100">&gt;100</option>
            </select><br /><br />
            爱好：<br />
            <input type="checkbox" class="check1" name="like"  />阅读
            <input type="checkbox" class="check2" name="like"  />爬山
            <input type="checkbox" class="check3" name="like"  />编程
            <input type="checkbox" class="check4" name="like"  />旅行
            <input type="checkbox" class="check5" name="like"  />逛街
            <br /><br  />
            <input type="submit"  />
        </form>
    </div>
    <script type="text/javascript">
        //获取所有checkbox
        var $input = document.getElementsByTagName("input");
        var checkList = [];
        var len = $input.length;
        while(len--) { //使用while比for效率更高
            if($input[len].type == "checkbox") {
                checkList.push($input[len]);
            }
        }
    //  console.log(checkList.length);  //5
        for(var i=0; i<checkList.length; i++) {
            console.log(checkList[i]);
        }
    </script>
</body>
</html>

67、JavaScript 的数据类型都有什么？

基本数据类型：String,Boolean,Number,Undefined,Null
引用数据类型：Object(Array,Date,RegExp,Function)

70、简述创建函数的几种方式

第一种（函数声明）：

 functionsum1(num1,num2){ 
     returnnum1+num2; 
}

第二种（函数表达式）：

 var sum2 = function(num1,num2){ return num1+num2; }

匿名函数： function(){}:只能自己执行自己

第三种（函数对象方式）：

var sum3 = newFunction("num1","num2","return num1+num2");

71、Javascript 如何实现继承？（《JavaScript高级程序设计》）

原型链继承，借用构造函数继承，组合继承（原型链、构造函数组合），寄生式继承，寄生组合继承。

注：《JavaScript高级程序设计》一书上都有对应的讲解

72、Javascript 创建对象的几种方式？

工厂方式，构造函数方式，原型模式，混合构造函数原型模式，动态原型方式

73、把 Script 标签 放在页面的最底部的 body 封闭之前 和封闭之后有什么区 别？浏览器会如何解析它们？

如果说放在 body 的封闭之前，将会阻塞其他资源的加载
如果放在 body 封闭之后，不会影响 body 内元素的加载。

74、iframe 的优缺点？

优点：
1. 解决加载缓慢的第三方内容问题，如图标和广告等的加载问题
2. Security sandbox
3. 并行加载脚本
缺点：
1. iframe 会阻塞主页面的 Onload 事件
2. 即使内容为空，加载也需要时间

75、请你谈谈 Cookie 的弊端？

缺点：
1.Cookie数量和长度的限制。每个 domain 最多只能有 20 条 cookie，每个 cookie 长度不
能超过 4KB，否则会被截掉。

2.安全性问题。如果 cookie 被人拦截了，那人就可以取得所有的 session 信息。即使加密
也于事无补，因为拦截者并不需要知道 cookie 的意义，他只要原样转发 cookie 就可以达到
目的了。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存
一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

77、js 延迟加载的方式有哪些？

1. defer 和 async
2. 动态创建 DOM 方式（创建 script，插入到 DOM 中，加载完毕后 callBack）
3. 按需异步载入 js

78、documen.write 和 innerHTML 的区别？

1、write是DOM方法,向文档写入HTML表达式或JavaScript代码，可列出多个参数，参数被顺序添加到文档中 ；
innerHTML是DOM属性,设置或返回调用元素开始结束标签之间的HTML元素。

2、两者都可向页面输出内容,innerHTML比document.write更灵活。

当文档加载时调用document.write直接向页面输出内容，文档加载结束后调用document.write输出内容会重写整个页面。
通常按照两种的方式使用 write() 方法：一是在使用该方在文档中输出 HTML，二是在调用该方法的的窗口之外的窗口、框架中产生新文档（务必使用close关闭文档）。

在读模式下，innerHTML属性返回与调用元素的所有子节点对应的HTML标记，在写模式下，innerHTML会根据指定的值创建新的DOM树替换调用元素原先的所有子节点。

3、两者都可动态包含外部资源如JavaScript文件
通过document.write插入<script>元素会自动执行其中的脚本；
大多数浏览器中，通过innerHTML插入<script>元素并不会执行其中的脚本。

79、哪些操作会造成内存泄漏？

内存泄漏指任何对象在你不再拥有或需要它之后仍然存在。

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用
数量为 0（没有其他对象引用过该对象），或对该对象的唯一引用是循环的，那么该对象的
内存即可回收。

1. setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
2. 闭包
3. 控制台日志
4. 循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

80、写一个获取非行间样式的函数

//获取一个非行间的函数

function getStyle(obj,attr,value) { 
    if (!value) {
         if (obj.currentStyle) {
             return obj.currentStyle[attr]
         }else {
             obj.getComputedStyle(attr,false)
         }
    }else {
         obj.style[attr] = value
    }

}

81、解释 jsonp 的原理，以及为什么不是真正的 ajax

动态创建 script 标签，回调函数
Ajax 是页面无刷新请求数据操作

82、字符串反转，如将 ‘12345678’ 变成 ‘87654321’

//大牛做法；
//思路：先将字符串转换为数组 split()，利用数组的反序函数 reverse()颠倒数组，再利用 join()
为字符串

var str = '12345678';
str = str.split('').reverse().join('');

83、将数字 12345678 转化成 RMB 形式 如： 12,345,678

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var num = 12345678;
            //转化为字符串
            num = num.toString();
//          console.log(num);  //"12345678"
            //封装字符串反转方法
            function rever(str) {
                //先分割为数组再反转再合并为字符串
                return str = str.split("").reverse().join("");
            }
            num = rever(num);
//          console.log(num);  //87654321
            var result = ""; //定义一个空字符串，接收最终结果
            for(var i=1; i<=num.length; i++) {
                result += num[i-1]; //把字符串的每一项重新放到一个新的字符串里
                if(i%3 == 0 && i!=num.length) { //字符串的索引是3 的倍数并且不是最后一项的时候添加
                    result += ",";
                }
            }
//          console.log(result); //876, 543, 21
            //最后调用上面定义的rever()方法反转回来
            result = rever(result);
            console.log(result); //12,345,678
        </script> 
    </body>
</html>

84、生成 5 个不同的随机数；

//思路：5 个不同的数，每生成一次就和前面的所有数字相比较，如果有相同的，则放弃当前生成的数字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>生成5个不同的随机数</title>
    </head>
    <body>
        <script type="text/javascript">
            //思路：5 个不同的数，每生成一次就和前面的所有数字相比较，
            //如果有相同的，则放弃当前生成的数字,重新生成一个数
            var num = [];
            for(var i=0; i<5; i++) {
                num[i] = Math.floor(Math.random()*(30-15+1) + 15); //此处生成[15,30]的随机数
//              console.log(num[i]);
                for(var j=0; j<i; j++) {
                    if(num[i] == num[j]) {
                        i--;
                    }
                }
                console.log(num);//此处可看见整个数组的生成过程
            }
                console.log(num);
        </script>
    </body>
</html>

85、阶乘函数；9*8*7*6*5…*1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            /*
             * 在这个重写后的 factorial()函数的函数体内，没有再引用函数名 factorial。
             * 这样，无论引用 函数时使用的是什么名字，都可以保证正常完成递归调用。
             */
            function factorial(num) {
                if(num <= 1) {
                    return 1;
                }else {
                    return num * arguments.callee(num - 1);
                }
            }
            var newName = factorial;
            var result1 = newName(9);
            alert(result1); //362880

            factorial=function(num) {
                return 0;
            }
            var result2 = factorial(9);
            alert(result2); //0

            var result3 = newName(9);
            alert(result3); //362880
        </script>
    </body>
</html>

86、window.location.search 返回的是什么

87、阻止冒泡函数

还不造“冒泡行为”和“默认行为”的道友，请移步至详解javascript如何阻止冒泡事件及阻止默认事件

阻止冒泡函数

function stopPropagation(e) {
    e = e || window.event;
    if(e.stopPropagation) { //W3C 阻止冒泡方法
        e.stopPropagation();
    } else {
        e.cancelBubble = true; //IE 阻止冒泡方法
    }
}
document.getElementById('need_hide').onclick = function(e) {
    stopPropagation(e);
}

阻止默认行为函数

function preventDefaultAction(e) {
    e = e || window.event;
    if(e.preventDefault) { //W3C方法
        e.preventDefault();
    }else {                //IE方法
        e.returnValue = false;
    }
}

阻止事件冒泡和默认行为实例，可亲自逐步调试查看效果，加深印象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>阻止事件冒泡和默认行为</title>
    </head>
    <style type="text/css">
        .one {
            width: 200px;
            height: 200px;
            background: navajowhite;
        }
        .two {
            height: 40px;
            border: 1px solid red;
            background: white;
            line-height: 40px;
        }
        .three {
            cursor: pointer;
            /*padding: 10px;*/
            background: red;
        }
        .defauleAction {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            line-height: 100px;
        }
        .four {
            width: 200px;
            height: 200px;
            background: navajowhite;
            margin-top: 20px;
        }
        .five {
            height: 40px;
            border: 1px solid red;
            background: white;
            line-height: 40px;
        }
        .six {
            cursor: pointer;
            /*padding: 10px;*/
            background: red;
    </style>
    <body>
        <div class="one">我是最外层
            <p class="two">我是第二层
                <span class="three">我是最里层</span>
            </p>
        </div>
        <!--阻止链接自动跳转的默认行为-->
        <div class="defaultAction">
            <a href="https://blog.csdn.net/qq_36595013">我的博客主页</a>
        </div>
        <!--同时阻止冒泡事件和默认行为-->
        <div class="four">我是最外层
            <p class="five">我是第二层
                <span class="six"><a href="https://blog.csdn.net/qq_36595013">我是最里层</a></span>
            </p>
        </div>
    </body>
    <script type="text/javascript" src="../jQuery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".one").click(function(e) {
                alert($(this).text());
            });
            $(".two").click(function(e) {
                preventPropagation(e);
                alert($(this).text());
            });
            $(".three").click(function(e) {
                /*一、先在最里层添加进阻止事件冒泡函数，再查看效果
                 *发现点击中间层的时候还是会冒泡到最外层
                 * 然后再中间层加入阻止函数，再查看效果
                 */ 
                preventPropagation(e);
                alert($(this).text());
            });

            //阻止默认单击链接跳转行为
            $(".defaultAction>a").click(function(e) {
                preventDefaultAction(e);
                alert("链接不跳转了吧！");
            });

            //阻止事件冒泡函数
            function preventPropagation(e) {
                e = e||window.event;
                if(e.stopPropagation) { //W3C方法
                    e.stopPropagation();
                }else {                 //IE方法
                    e.cancelBubble = true;
                }
            }
            //阻止默认行为函数
            function preventDefaultAction(e) {
                e = e || window.event;
                if(e.preventDefault) { //W3C方法
                    e.preventDefault();
                }else {                //IE方法
                    e.returnValue = false;
                }
            }

            //同时阻止默认行为和事件冒泡
            $(".six").click(function() {
                alert("点我之后既不向上冒泡又不跳转到默认的链接");
                //要想同时阻止默认行为和事件冒泡，只需要返回return false就可以了
                return false;
            });
            $(".five").click(function(e) {
                preventPropagation(e);
                alert("我是中间层");
            });
            $(".four").click(function() {
                alert("我是最外层");
            });

        });
    </script>
</html>

88、看题做答：

function f1(){
    var tmp = 1;
    this.x = 3;
    console.log(tmp); //A
    console.log(this.x)； //B
}
var obj = new f1(); //（1）
console.log(obj.x) //（2）输出：1,3,3
console.log(f1()); //（3）输出  1,3，undefined

分析：
这道题让我重新认识了对象和函数，首先看代码（1）这里实例话化了 f1 这个类。相当于执行了 f1 函数。所以这个时候 A 会输出 1， 而 B 这个时候的 this 代表的是 实例化的当前对象 obj ，B 输出 3.。
代码（2）毋庸置疑会输出 3，
重点 代码（3）首先这里将不再是一个类，它只是一个函数。那么 A 输出
1， B 呢？这里的 this 代表的其实就是 window 对象，那么 this.x 就是一个全局变
量 相当于在外部 的一个全局变量。所以 B 输出 3。最后代码由于 f 没有返回值那
么一个函数如果没返回值的话，将会返回 underfined ，
所以答案就是 ： 1， 3， 3，
1， 3， underfined 。

89、下面输出多少？

var o1 = new Object();
var o2 = o1;
o2.name = "CSSer";
console.log(o1.name);  //CSSer

如果不看答案，你回答真确了的话，那么说明你对 javascript 的数据类型了解的还是比较清楚了。js 中有两种数据类型，分别是：基本数据类型和引用数据类型(object Array）。对于保存基本类型值的变量，变量是按值访问的，因为我们操作的是变量实际保存的值。

对于保存引用类型值的变量，变量是按引用访问的，我们操作的是变量值所引用（指向）的对象。
答案就清楚了： CSSer;

90、再来一个

function changeObjectProperty (o) {
    o.siteUrl = "http://www.csser.com/";
    o = new Object();
    o.siteUrl = "http://www.popcg.com/";
}
var CSSer = new Object();
changeObjectProperty(CSSer);
console.log(CSSer.siteUrl); //"http://www.csser.com/"

如果 CSSer 参数是按引用传递的，那么结果应该是”http://www.popcg.com/“，但实际结果却仍是”http://www.csser.com/“。

事实是这样的：在函数内部修改了引用类型值的参数，该参数值的原始引用保持不变。（此处可以去读一读《JavaScript高级程序设计一书》）

我们可以把参数想象成局部变量，当参数被重写时，这个变量引用的就是一个局部变量，局部变量的生存期仅限于函数执行的过程中，函数执行完毕，局部变量即被销毁以释放内存。

（补充：内部环境可以通过作用域链访问所有的外部环境中的变量对象，但外部环境无法访问内部环境。每个环境都可以向上搜索作用域链，以查询变量和函数名，反之向下则不能。）

91、输出多少？

var a = 6;
setTimeout(function () {
    var a = 666;//由于变量 a 是一个局部变量
    alert(a); // 输出 666，
}, 1000);
a = 66;

因为 var a = 666;定义了局部变量 a，并且赋值为 666，根据变量作用域链，
全局变量处在作用域末端，优先访问了局部变量，从而覆盖了全局变量 。

var a = 6;
setTimeout(function () {
    //变量声明提前
    alert(a); // 输出 undefined
    var a = 666;
}, 1000);
a = 66;

因为 var a = 666;定义了局部变量 a，同样覆盖了全局变量，但是在 alert(a);之前
a 并未赋值，所以输出 undefined。

92、JS 的继承性

window.color = 'red';
var o = {color: 'blue'};
function sayColor(){
    alert(this.color);
}

考点：
1、this 的指向
2、call 的用法

sayColor(); //red
sayColor.call(this); //red this 指向的是 window 对象
sayColor.call(window); //red
sayColor.call(o); //blue

93、精度问题:JS 精度不能精确到 0.1

var n = 0.3,
    m = 0.2, 
    i = 0.2, 
    j = 0.1;
alert((n - m) == (i - j)); //false
alert((n-m) == 0.1); //false
alert((i-j)==0.1); //true

94、、加减运算

alert('5'+3); //53 string
alert('5'+'3'); //53 string
alert('5'-3); //2 number
alert('5'-'3'); //2 number

95、为什么不能定义 1px 左右的 div 容器？

IE6 下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：

overflow:hidden | zoom:0.08 | line-height:1px

95、结果是什么？

function foo(){
    foo.a = function(){alert(1)};
    this.a = function(){alert(2)};
    a = function(){alert(3)};
    var a = function(){alert(4)};
};
foo.prototype.a = function(){alert(5)};
foo.a = function(){alert(6)};

foo.a(); //6
var obj = new foo(); //实例化的同时也相当于重新调用构造函数
obj.a(); //2
foo.a(); //1

96、输出结果

var a = 5;
function test(){
    a = 0;
    alert(a); 
    alert(this.a); //没有定义 a 这个属性
    var a;
    alert(a); 
}

test(); // 0, 5, 0
new test(); // 0, undefined, 0 //由于类它自身没有属性 a， 所以是 undefined

97、计算字符串字节数：

new function(s){
    if(!arguments.length||!s) return null;
    var l=0;
    for(var i=0;i<s.length;i++){
        if(s.charCodeAt(i)>255) l+=2; 
        else l+=1; //charCodeAt()得到的是 uniCode码
} //汉字的 uniCode 码大于 255bit 就是两个字节
alert(l);
}("hello world!");

98、匹配输入的字符：第一个必须是字母或下划线开头，后面就是字母和数字 或者下划线构成，长度 5-20

/*
 * 匹配输入的字符
 * 第一个字符必须是字母或下划线开头
 * 后面的字符由字母、数字、下划线组成
 * 共5-20个字符
 */
var reg = /^[a-zA-Z_][a-zA-Z0-9_]{4,19}/,
    str1 = "WangWei",
    str2 = "123Wang",
    str3 = "_Wei",
    str4 = "_wang";
document.write(reg.test(str1) + "<br>");//true
document.write(reg.test(str2) + "<br>");//false
document.write(reg.test(str3) + "<br>");//false 仅4个字符
document.write(reg.test(str4) + "<br>");//true

99、如何在 HTML 中添加事件，几种方法？

1、标签之中直接添加 onclick="fun()";
2、JS 添加 Eobj.onclick = method;
3、现代事件 IE9 以前： obj.attachEvent('onclick', method)；
标准浏览器: obj.addEventListener('click', method, false);

100、BOM 对象有哪些，列举 window 对象？

1、window 对象 ，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的
属性；
2、document 对象，文档对象；
3、location 对象，浏览器当前 URL 信息；
4、navigator 对象，浏览器本身信息；
5、screen 对象，客户端屏幕信息；
6、history 对象，浏览器访问历史信息

101、请用代码实现 outerHTML

//说明：outerHTML 其实就是 innerHTML 再加上本身；
Object.prototype.outerHTML = function(){
    var innerCon = this.innerHTML, //获得里面的内容
    outerCon = this.appendChild(innerCon); //添加到里面
    alert(outerCon);
}

演示代码：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="outer">
    hello
</div>
<script>
    Object.prototype.outerHTML = function(){
        var innerCon = this.innerHTML, //获得里面的内容
        outerCon = this.appendChild(innerCon); //添加到里面
        alert(outerCon);
    }
    function $(id){
        return document.getElementById(id);
    }
    alert($('outer').innerHTML);
    alert($('outer').outerHTML);
</script>
</body>
</html>

102、JS 中的简单继承 call 方法！

//定义一个父母类，注意：类名都是首字母大写的哦！
function Parent(name, money){
    this.name = name;
    this.money = money;
    this.info = function(){
    alert('姓名： '+this.name+' 钱： '+ this.money);
}
}
//定义孩子类
function Children(name){
    Parent.call(this, name); //继承 姓名属性，不要钱。
    this.info = function(){
    alert('姓名： '+this.name);
}
}
//实例化类
var per = new Parent('parent', 800000000000);
var chi = new Children('child');
per.info();
chi.info();

103、bind(), live(), delegate()的区别

bind： 绑定事件，对新添加的事件不起作用，方法用于将一个处理程序附加
到每个匹配元素的事件上并返回 jQuery 对象。

live： 方法将一个事件处理程序附加到与当前选择器匹配的所有元素（包含
现有的或将来添加的）的指定事件上并返回 jQuery 对象。

delegate： 方法基于一组特定的根元素将处理程序附加到匹配选择器的所有
元素（现有的或将来的）的一个或多个事件上。

104、typeof 的返回类型有哪些？

alert(typeof [1, 2]); //object
alert(typeof 'leipeng'); //string
var i = true;
alert(typeof i); //boolean
alert(typeof 1); //number
var a;
alert(typeof a); //undefined
function a(){;};
alert(typeof a) //function

105简述 link 和 import 的区别？

区别 1：link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import
属于 CSS 范畴，只能加载 CSS。

区别 2：link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入
以后加载。

区别 3：link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏
览器不支持。

区别 4：link 支持使用 Javascript 控制 DOM 去改变样式；而@import 不支持

106、、已知有字符串 foo=”get-element-by-id”,写一个 function 将其转化成驼 峰表示法”getElementById”。

答案：

function combo(msg){
    var arr = msg.split("-");
    var len = arr.length; //将 arr.length 存储在一个局部变量可以提高 for 循环效率
    for(var i=1;i<len;i++) {
        arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
    }
    msg=arr.join("");
    return msg;
}

107、你如何优化自己的代码？

• 代码重用
• 避免全局变量（命名空间，封闭空间，模块化 mvc..）
• 拆分函数避免函数过于臃肿：单一职责原则
• 适当的注释，尤其是一些复杂的业务逻辑或者是计算逻辑，都应该写出这个业务逻辑的具体过程
• 内存管理，尤其是闭包中的变量释放

• 变量的命名规范：尤其是在实际项目中

  $div：代表一个jquery对象

  dom：代表一个原生的dom对象

  希望一个函数是构造函数：函数的首字母都要大写

  变量一定要语义化

108、请简要描述web前端性能需要考虑哪方面，你的优化思路是什么？

//参见雅虎14web优化规则

//0、减少http请求：

//1、小图弄成大图（雪碧图、精灵图），

//2、合理的设置缓存 localStorage cookie

//3、资源合并、压缩 html代码的最小化，压缩体积：就是减少带宽

//4、一些小的js文件合并成大的js文件

//5、将外部的js文件置底

109、、简述 readyonly 与 disabled 的区别

readonly 只针对 input(text/password)和 textarea 有效，

而 disabled 对于所有的表单元素都有效，

当表单元素在使用了 disabled 后，当我们将表单以 POST 或 GET 的方式提交的话，这个元素的值不会被传递出去，而 readonly 会将该值传递出 去

110、写出 3 个使用 this 的典型应用

构造函数中使用 this，
原型中使用 this，
对象字面量使用 this

111、请尽可能详尽的解释 ajax 的工作原理

思路：先解释异步，再解释 ajax 如何使用 Ajax 的原理

简单来说通过 XmlHttpRequest 对象来向服务器发送异步请求，从服务器获得数据， 然后用javascript来操作DOM而更新页面。

这其中最关键的一步就是从服务器获得请求数据。 要清楚这个过程和原理，我们必须对 XMLHttpRequest 有所了解。

XMLHttpRequest 是 ajax 的核心机制，它是在 IE5 中首先引入的，是一种支持异步请求的 技术。简单的说，也就是 javascript 可以及时向服务器提出请求和处理响应，而不阻塞用户。 达到无刷新的效果。

112、为什么扩展 javascript 内置对象不是好的做法？

因为扩展内置对象会影响整个程序中所使用到的该内置对象的原型属性

113、浏览器标准模式和怪异模式之间的区别是什么？

标准模式是指，浏览器按 W3C 标准解析执行代码；

怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一 样，所以我们称之为怪异模式。

浏览器解析时到底使用标准模式还是怪异模式，与你网页中的 DTD 声明直接相关，DTD 声 明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页 并显示，忽略 DTD 声明,将使网页进入怪异模式

114、如果设计中使用了非标准的字体，你该如何去实现？

先通过 font-face 定义字体，再引用

@font-face
{
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ 
}

115、HTTP 协议中，GET 和 POST 有什么区别？分别适用什么场

景 ？
get 传送的数据长度有限制，post 没有
get 通过 url 传递，在浏览器地址栏可见，
post 是在报文中传递

适用场景：
post 一般用于表单提交
get 一般用于简单的数据查询，严格要求不是那么高的场景

116、HTTP 状态消息 200 302 304 403 404 500 分别表示什么

200：请求已成功，请求所希望的响应头或数据体将随此响应返回。

302：请求的资源临时从不同的 URI 响应请求。由于这样的重定向是临时的，客户端应当 继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下， 这个响应才是可缓存的

304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上 次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304 响应禁 止包含消息体，因此始终以消息头后的第一个空行结尾。

403：服务器已经理解请求，但是拒绝执行它。

404：请求失败，请求所希望得到的资源未被在服务器上发现。

500：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这 个问题都会在服务器端的源代码出现错误时出现。

117、 HTTP 协 议 中 ， header 信 息 里 面 ， 怎 么 控 制 页 面 失 效 时 间 （last-modified,cache-control,Expires 分别代表什么）

118、请列举 js 数组类型中的常用方法