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