整理前端面试题(八) : JavaScript题目

JavaScript.jpg

1. 请写出下列代码的执行结果

function f1() {
    var tmp = 1;
    this.x = 3;
    console.log( tmp );
    console.log(this.x);
}
var obj = new f1();
console.log( obj.x );
console.log( f1() ) ;

答案如下:

 var obj = new f1(); // 1, 3
console.log( obj.x ); //3
console.log( f1() ) ; //1, 3, undefined

---

2. 请写出下列代码的执行结果

function changeObjPorperty ( o ) {
    o.siteUrl = "http://www.baidu.com";
    o = new Object();
    o.siteUrl = "http://www.google.com";
}
var website = new Object();
changeObjPorperty( website );
console.log( website.siteUrl );

答案:http://www.baidu.com

---

3. 请写出下列代码的执行结果

//第一道题目
var a = 6;
setTimeout(function() {
    var a = 666;
    console.log( a );
},0);
console.log( a );
a = 66;

//第二道题目
var a = 6;
setTimeout( function() {
    console.log( a );
    var a = 666;
},0);
a = 666;
console.log( a );

答案如下:
题目1 : 6, 666
题目2 : 666, undefined

---

4. 什么是同源策略？

同源策略，它是由Netscape提出的一个著名的安全策略。所谓同源是指，域名，协议，端口相同, 现在所有支持JavaScript 的浏览器都会使用这个策略。

---

5. 请写出以下代码的执行结果

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

foo.a(); 
var obj = new foo();
obj.a(); 
foo.a(); 

答案如下:

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

foo.a();  //6
var obj = new foo();
obj.a();  //2
foo.a();  //1

---

6. 请写出以下代码的执行结果

var a = 5; 
function test() {
    a = 0;
    console.log( a );
    console.log( this.a );
    var a;
    console.log( a );
}
test();
new test();

答案如下:

var a = 5; 
function test() {
    a = 0;
    console.log( a );
    console.log( this.a );
    var a;
    console.log( a );
}
test(); // 0, 5, 0
new test(); //0, undefined, 0

---

7. 请写出一个函数,该函数用于计算字符串的字节数

function getByte( s ) {
    if( !arguments.length || !s ) {
        return null;
    }
    var length = 0;
    for( var i = 0; i < s.length; i++ ) {
        if( s.charCodeAt(i) > 255 ) {
            length += 2;
        }else{
            length += 1;
        }
    }
    return length;
}

---

8. 请写一个函数,用以实现获得任意节点的outerHTML

function getOuterHTML ( elementNode ) {
    var d = document.createElement( "div" );
    d.appendChild( elementNode );
    return d.innerHTML;
}

---

9. 你如何优化自己的代码？

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

---

10. 使用js实现这样的效果：在文本域里输入文字时，当按下enter键时不换行，而是替换成“{{enter}}”,