四月份面試題彙總（一）

1.理解原型、原型鏈？

每建立一個函數，函數上都有一個prototype的屬性，他是一個對象。這個對象的做用就是當使用它建立實例的時候，這些實例都會共享原型上的屬性和方法。
當咱們訪問對象中的某個屬性時，若是這個對象內部不存在這個屬性，那麼他就會去__proto__裏面去找這個屬性，這個__proto__又會有本身的__proto__，
就這麼一直找下去直到最後一個__proto__值爲null。

var A = function(){};
var a = new A();
console.log(a.__proto__); //A {}（即構造器function A 的原型對象）
console.log(a.__proto__.__proto__); //Object {}（即構造器function Object 的原型對象）
console.log(a.__proto__.__proto__.__proto__); //null

2. __proto__和prototype的關係？

__proto__是每一個對象都有的一個屬性，而prototype是函數纔會有的屬性。

舉例：var p = new Person();
其中p.__proto__ == Person.prototype。

3. 如何鑑別屬性是自有屬性仍是原型屬性？

hasOwnProperty()方法返回true即爲自有屬性，返回false有兩種可能

• 1.爲原型屬性；
• 2.跟本不存在該屬性

因此判斷是不是原型屬性，要先用in判斷該對象中是否存在此屬性：

function hasPrototypeProperty(obj, name){
        return name in obj && !obj.hasOwnProperty(name);
    }

4.如何判斷某個對象是不是另外一個對象的原型對象？

isPrototypeOf()；
例：function Cat(name,color){}
var cat1 = new Cat();
alert(Cat.prototype.isPrototypeOf(cat1)); //true

5. ES6箭頭函數注意點 ？

• 1.函數體內的this，是定義時所在的對象，而不是使用時所在的對象，始終指向自身外的第一個this。
• 2.不能夠作構造函數，也就是說不可使用 new 命令，不然會拋錯。
• 3.不可使用arguments對象，不存在，可使用Rest代替。

使用Rest：
    var foo=(...arguments)=> {console.log(arguments);
}

6. 讓你開始一個項目，你會選擇用 vue 仍是 React？

• 1若是你喜歡用模板搭建應用，請使用 vue。
• 2若是你的應用須要儘量小和快，請使用 vue。
• 3若是你計劃構建一個大學型應用，請使用 React。
• 4若是你想要同時適用於Web端和原生App的框架，請使用 React。
• 5若是你想要更大的生態圈（論壇等），請使用 React。

7. React建立組件的三種方式及其區別 ？

• 1.函數式定義（無狀態組件）：function 組件名(props,/context/){}
• 2.ES5之var 組件名= React.creatClass({})
• 3.ES6之class 組件名 extends React.Components{}

8. React 中 keys 的做用是什麼 ？

keys 是用於追蹤哪些元素被修改、被添加、被刪除的輔助標識。在開發過程當中，須要保證某個元素的 key 在其同級元素中具備惟一性。

9. 爲何接下來這段代碼不是 IIFE(當即調用的函數表達式)？

function foo(){ }()；

以function關鍵字開頭的語句會被解析爲函數聲明，而函數聲明是不容許直接運行的。
只有當解析器把這句話解析爲函數表達式，纔可以直接運行，

解決1.
    (function foo(){
            // code..
    })()
    解決2.
    var foo =  function(){};
    foo();

10. js中如何判斷null和undefined ？

if(typeof(a)=="undefined"){
        console.log('undefined')
    }
    if(typeof(a)!="undefined"&&a!=0&&!a){
        console.log('null')
    }

11. 實現一個數組亂序排列 ？

var a = [1, 2, 3, 5, 4];
    function fn(a, b) {
        return Math.Random() - 0.5
    }
    a.sort(fn);//[5,1,2,4,3]
    
    
    var a = [1, 2, 3, 5, 4];
    function fn(a, b) {
        return a - b
    }
    a.sort(fn);//[1, 2, 3, 4, 5]
    
    
    var a = [1, 2, 3, 5, 4];
    function fn(a, b) {
        return b - a
    }
    a.sort(fn);//[5, 4, 3, 2, 1]

js如何區分數組仍是對象 ? (表明：實現深拷貝函數)

第一種：Object.prototype.toString.call(a).slice(8,-1) == 'Array' ? [] : {}

var a = {};

    Object.prototype.toString.call(a);//"[object Object]"

    var a = [];

    Object.prototype.toString.call(a);//"[object Array]"

第二種：

var a=[];
    var b={};
    typeof a === 'object' && !isNaN(a.length)//true
    typeof b === 'object' && !isNaN(b.length)//false

第三種：

var a=[];
    var b={};
    Array.isArray(a);//true
    Array.isArray(b)//false

實現一個深拷貝函數：

function clone(obj) {
    if(typeof(obj)=='object'&&obj){//&&obj是排除obj=null
        //區分是數組仍是對象，創建空數組或空對象
        var o = Array.isArray(obj) ? [] : {};
        for(var k in obj) {
            if(typeof(obj[k])=='object'){
                o[k] = clone(obj[k]);
            }else{
                o[k] = obj[k];
            }
        }
    }else{
        return obj;
    }
    return o;
}

...

微信公衆號： 前端實習日記