2014-07-18笔试面试总结（前端）

1. javascript delete

---

 

注意：

1. delete 返回返回false表示属性不能被删除，其他情况返回true(删除成功，或者要删除的属性不存在时也返回true)

2. 火狐的console不能完全模拟javascript执行环境，因而结果可能有所区别 例如在火狐下delete function 返回true，在火狐浏览器中执行返回false

3. eval作用域下delete和全局作用域下和函数作用域下有区别

 

看下面例子：

//delete function  
function a(){alert(1);}; 
console.log(delete a);  //false
console.log(a); //function a(){alert(1);}

 

//delete object
var b = {aa:1,bb:1};
console.log(delete b);//false
console.log(b);//Object {aa: 1, bb: 1}

 

//delete new added attribute of object
var c = {aa:1,bb:1};
console.log(delete c.aa); //true
console.log(c); //Object {bb: 1}

var b={a:1,b:2,c:3};
delete b.d; //true

 

//delete the global member
window.aa = 1; 
console.log(delete aa); //true
console.log(aa); //ReferenceError: aa is not defined

console.log(delete isNaN); //true
console.log(isNaN(11)); //ReferenceError: isNaN is not defined

console.log(delete Array); //true
var aa = new Array();//ReferenceError: Array is not defined

 

//delete variable in function context
function a(){
    var c=1;
    console.log(c);  //1
    console.log(delete c);  //false
    console.log(c);  //1
}; 
a();

 

//delete in eval context
eval('var a= 1'); 
delete a; //true
console.log(a); //ReferenceError: a is not defined

eval('function b(){alert(1);};'); 
delete b; //true
console.log(b);  //ReferenceError: b is not defined

 

//delete the length of the function and Array
function a(){};
console.log(delete a.length); //false

var aa = [1, 2];
console.log(delete aa.length); //false

//delete the parameter
function cc(c,d){    
    console.log(delete c);//false
}; 
cc();

 

 

总结：

1. 变量、函数、属性等是否能删除与DontDelete属性有关，如下具有DontDelete属性：
   1) 非eval作用域下var 申明的变量
   2) 非eval作用域下函数名申明的函数 
   3) 对象的内置属性，例如 Function对象的length,数组的length
　 4) 函数的形参

　不具有DontDelete属性：
　1）对象新增加的属性，包含window对象下新增的属性
　2）eval中创建的对象或者是函数

 

可参考http://perfectionkills.com/understanding-delete/，很长，不过讲的很详细，

 

2. this的理解及作用域绑定

---

 

题目很长，记不清了，大致如下：

var a = 1;
function c(){
    console.log(this.a);
    console.log(a);
    this.a = 3;
}
var b = {
    a: 1,
    c: function(){
        console.log(a);
        a = 5;
        console.log(this.a);
    }
};
c();   /* this.a:1   a: 1  
        this.a中this为window， a为全局a, 
        第三句this.a执行完成后全局a值变为3
        */

new c();  /*this.a: undefined      
            a: 3（上一步才c()执行完成后a变为3）
            */

b.c();  /* a: 3,  this.a: 1   
           a为全局的a，第二步a=5执行完成后全局a变为5，
            this.a 为 b.a 值为1
        */

var cc = b.c; /*
                将cc引用b.c 
                */
cc();    /*  a: 5  this.a: 5
            注意此处cc 在window context下执行, 丢失了a property 
            因而此处的this.a 引用的是window下的a
        */

 

此处引申：针对上面b.c情况，如何绑定作用域？

/*
    bind the context
*/
var dd = b.c.bind(b);
dd();  //  a: 5  this.a: 5

上面的方式并不是在所有浏览器中都有效，可采用如下方式更改Function原型

Function.prototype.bind = Function.prototype.bind || function(context){
    var self = this;
    return function{
        return self.apply(context, arguments);
    }
}

 

 

3. toString和valueOf 

---

 

1. 对象到布尔值的转换比较简单，对象到字符串和数字的转换相对复杂，需用到toString和valueOf两个方法，另外到字符串的转换和到数字的转换有区别

2. 所有对象继承toString和toValue方法，

　toString返回对象的字符串，"[object object]", 很多类重写了tString方法

　valueOf如存在原始值，将对象转换为它的原始值。 大多数对象无法表示为原始值，因而默认的valueOf返回对象本身，数组，函数，正则只是简单的继承了这个默认方法

 

对象到字符串

1. 如有toString则调用这个方法

2. 如无toString或者该方法不返回原始值，则调用toString方法

3. 如无法从toString和toValue获取原始值，则抛出类型错误异常

 

对象到数字

1. 先尝试调用toValue方法

2. 如无toValue或者不返回原始值，则调用toString

3. 如都不返回原始值，则抛出异常

 

注意： 1. 由于数组是继承了默认的valueOf，因为数组转数字时首先调用valueOf时无法返回原始值，因而要调用toString,空数组转化为空字符串，空字符串转化为数字0

　　　 2. 类似于'+'的可以进行数学加法和字符串连接的操作，如果其中一个操作数是对象，则会将对象转化为原始值

　　　 3. 对于所有非日期对象，对象到原始值的转换基本上是对象到数字的转换，首先调用valueOf, 日期对象采用对象到字符串模式

　　　 4. 默认的valueOf返回对象本身

 

eg1：

var date = new Date();
var date_toString = date.toString();
var date_valueOf = date.valueOf();
console.log(date == date_toString);  //true
console.log(date == date_valueOf);  //false

日期采用字符串模式

 

eg2:

var a = {
    i: 1,
    valueOf: function() {
        console.log('valueOf'); 
        return this.i;
    },
    toString: function() {
        console.log('toString');
        return this.i;
    }
}
console.log(a); /*
                toString
                Object {i: 1, valueOf: function, toString: function}
                */


console.log(+a);/*
                valueOf
                1
                */


console.log(a + '');/*
                valueOf
                1
                */


console.log(a == 1);/*
                valueOf
                true
                */

字符串转换首先toString，数字转换首先toValue

 

 

eg3:

var a = {
    i: 1,
    toString: function() {
        console.log('toString');
        return this.i;
    }
}
console.log(a); /*
                toString
                Object {i: 1, valueOf: function, toString: function}

                */


console.log(+a);/*
                toString
                1
                */


console.log(a + '');/*
                toString
                1
                */


console.log(a == 1);/*
                toString
                true
                */

默认的valueOf返回对象本身，不能返回原始值，此处只重写了toString，没有重写valueOf，首先调用valueOf不能返回原始值，因而会调用toString，此处重写的toString能返回原始值

 

4.其他

1. js选择器编写， eg: $("#id"); $("#id class div");querySelector和querySelectorAll等  

2. position等及浏览器区别

3. 作用域 闭包

4. ie盒模型和w3c盒模型

5. css3相关transform、nth-child等

6. currying

7. call apply

8. toString 和valueOf应用 例如 function b(){}; b+1