前端面试题6

1.下面代码的输出值是？

alert(1&&2);

输出为2

&& 如果第一个值为true，返回第二个值。如果第一个值为false，返回false。 
|| 如果第一个值为false，返回第二个值。如果第一个值为true，返回第一个值。

2.正则表达式匹配，开头为11N, 12N或1NNN，后面是-7-8个数字的电话号码。

var b = /^((11N)|(12N)|(1NNN))\d{7,8}$/;

3.写出下面代码的输出值：

var obj = {        a: 1,         b: function () {         console.log(this.a)         }};var a = 2;var objb = obj.b;obj.b();    //1objb();     //2obj.b.call(window);   //2

4.写出下列代码的输出值：

function A() {}function B(a) {        this.a = a;}function C(a) {    if (a) { }}A.prototype.a = 1;B.prototype.a = 1;C.prototype.a = 1;console.log(new A());//A{} 返回obj,浅克隆构造函数console.log(new B());//B{a:undefined} console.log(new C(2));//C{}

A{ __proto__:{ a:1, constructor:function A(){}    }}B{ a:undefined, __proto__:{ a:1, constructor:function B(){}    }}C{ __proto__:{ a:1, constructor:function C(2){}    }}

5.写出下列代码的输出值：

var a = 1;function b() {    var a = 2;    function c() {        console.log(a);       }       return c;}b()();//2

1.写出下列代码在各个浏览器中的颜色值?

background: red;//firefox_background: green;//IE6*background: blue;//IE6，IE7background: black\9;//IE6---IE10

2.添加些css让其水平垂直居中。

使用line-height=height

<div style="`text-align:center; line-height:200px;height:200px;width:200px;`">颜海镜</div>

或者 display:table-cell 。这个还可以实现多行文本居中。

<div style="`text-align:center; display:table-cell;vertical-align:middle;width:200px;height:200px;`">颜海镜</div>

3.如下代码，在空白处填写代码，是其点击时，前景色为白色，背景色为黑色。

<div onclick="change()">颜海镜</div>

div{ height:200px; width: 200px; border: solid 1px black; text-align: center; display: table-cell; vertical-align: middle; }        .ch{ color: #ffffff; background-color: black; }

function change(){    var div = document.querySelector('div');    div.style.color = "white";    div.style.backgroundColor = "black";    //div.style.cssText = "color:white;background-color:black;";//或    //div.className = "ch";//或}

4.书写代码，点击时从1分钟开始，每秒递减到0。

<div onclick="test();">颜海镜</div>

function test(){        var t = 60;        var div = document.querySelector('div');        div.innerHTML = t.toString();        var interval = setInterval(del,1000);        function del(){            if(t <= 0)clearInterval(interval);            else{                t--;;                div.innerHTML = t.toString();            }        }    }

5.简述在IE下mouseover和mouseenter的区别？

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout 
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave

1、实现输出document对象中所有成员的名称和类型；

for(var key in document){        var keys = document[key];        console.log(key+" "+typeof key)    }

2、如何获得一个DOM元素的绝对位置？（获得元素位置，不依赖框架）

offsetHeight 和 offsetWidth

3、如何利用JS生成一个table？

function createTable(rowNum,colNum){        var row = '';        for(var i = 0;i < rowNum ; i++ ){            var col = '';            for(var j = 0;j < colNum ; j++ ){                col += '<td>111</td>'            }            row += '<tr>'+col+'</tr>';        }        var res = '<table>'+row+'</table>';        var wrap = document.querySelector('#wrap');        wrap.innerHTML = res;    }    createTable(7,5);

4、实现预加载一张图片，加载完成后显示在网页中并设定其高度为50px，宽度为50px；

function preloadPics(arrs){        var arr = [];        var callback = function(){};        var index = 0;        function addIndex(){            index ++;            if(index == arrs.length){                callback();            }        }        for(var i = 0;i < arrs.length; i++ ) {            arr[i] = new Image();            arr[i].src = arrs[i];            arr[i].onload = function () {                addIndex();            }        }        return {            done:function(c){                callback = c || callback            }        }    }    preloadPics(['a.jpg']).done(function(){        console.log('加载完成');    });

不太实用啊。 回头改改。。

5、假设有一个4行td的table，将table里面td顺序颠倒；

function reverse(){        var tr = document.querySelector('tr');        var tds = tr.childNodes;        for(var len = tds.length,i = len-1 ; i >= 0; i--){ tr.appendChild(tds[i]); }    }    reverse();

6、模拟一个HashTable类，包含有add、remove、contains、length方法；

function HashTable(){        this.arr = [];    }    HashTable.prototype.add = function(data){        this.arr.push(data);    };    HashTable.prototype.remove = function(i){        if(this.arr[i]){delete this.arr[i];return true;}        return false;    };    HashTable.prototype.contains = function(data){        var index = this.arr.indexOf(data);        if(index!== -1){return true;}        else{return false;}    };    HashTable.prototype.length = function(){        return this.arr.length;    };    var c = new HashTable();    c.add('苹果');    c.add('桃子');    c.add('梅花');

8、JS如何实现面向对象和继承机制？

构造器继承，原型继承，混合继承，寄生继承

前三种是类继承，最后一种是对象继承。（面试官 这么区分的。虽然我并不认可）

构造器继承

function Super(a){    this.a = a;    this.func = function(){};}function Sub(a){    Super.call(this,a);}var obj = new Sub();

obj{    a:undefined,    func:function(){}}

原型继承

function Super(a){    this.a = a;    this.func = function(){};}function Sub(){}Sub.prototype = new Super();Sub.prototype.constructor = Sub;var obj = new Sub();

obj{ __proto__:{ a:undefined, func:function(){},        constructor:function Sub(){} } }

混合继承

function Super(a){    this.a = a;    this.func = function(){};}function Sub(a){    Super.call(this,a);}Sub.prototype = new Super();Sub.prototype.constructor = Sub;var obj = new Sub();

obj{ a:undefined, func:function(){},    __proto__:{ a:undefined, func:function(){},        constructor:function Sub(){} } }

寄生继承

function Super(a){    this.a = a;    this.func = function(){};}Super.prototype.talk = function(){console.log('talk');}function Sub(a){    Super.call(this,a);}Sub.prototype = Object.create(Super.prototype);Sub.prototype.constructor = Sub;var obj = new Sub();

obj{ a:undefined, func:function(){},    __proto__:{ constructor:function Sub(){},        __proto__:{ talk :function(){console.log('talk');}            constructor:function Super(){}        }    }}

9、JS模块的封装方法，比如怎样实现私有变量，不能直接赋值，只能通过公有方法；

面向对象的私有成员

function P(pwd){    var password = pwd;    function getPasswd (){        return password;    }    this.pwdService = function(){        return getPasswd();    }}P.prototype.checkPwd = function(pwd){    return this.pwdService() === pwd;}

保护pwd和getPwd、只留下check接口

var p = new P('1111');console.log(p.checkPwd('1111'));    // trueconsole.log(p.password)   //undefinedconsole.log(p.getPassword())    //Type error  p.getPassword() is not a functionconsole.log(p.getPassword)  //undefined

10、对闭包的理解，闭包的好处和坏处？

内部函数访问外部函数的变量。

好处：可以模拟oo的一些特性（设计私有的方法和变量。进行一些更加高级的js应用）。可以防止模块间的污染。缓存。 
匿名自执行函数，匿名自执行函数可以减小内存消耗。

坏处：占有内存不能得到释放。

闭包比一般的函数需要更多的内存消耗。尤其在IE浏览器中需要关注。由于IE使用非原生javascript对象实现DOM对象，因此闭包会导致内存泄露问题，例如：

function A(){        var a=document.createElement("div")，//             msg="Hello";         a.onclick=function(){            alert(msg);            }     }   A();

以上的闭包会在IE下导致内存泄露，假设A()执行时创建的作用域对象ScopeA，ScopeA引用了DOM对象a,DOM对象a 
引用了function(aleert(msg))，函数function(alert(msg))引用了ScopeA，这是一个循环引用，在IE会导致内存泄露。

11、对this指针的理解，可以列举几种使用情况？

1. 指向直接调用者。
2. var obj = new Base()。指向obj
3. Base.call(obj) 指向obj