前端面试题6

于 2017-11-10 17:03:35 发布
阅读量314 收藏
点赞数
分类专栏： 面试题嘻嘻

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();    //1
objb();     //2
obj.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，IE7
background: 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'));    // true
console.log(p.password)   //undefined
console.log(p.getPassword())    //Type error  p.getPassword() is not a function
console.log(p.getPassword)  //undefined

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

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

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

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

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

function A(){  
      var a=document.createElement("div")，// 
            msg="Hello";  
       a.οnclick=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
LinDaiuuj
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值