前端常見筆試題

題目1

function Foo() {
    getName = function () { alert (1); };
    return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}

//請寫出如下輸出結果：
Foo.getName();  
getName();     
Foo().getName(); 
getName();     
new Foo.getName();  
new Foo().getName();  
new new Foo().getName();
複製代碼

1. Foo.getName(); //2 獲取Foo對象的getName屬性，原型和實例上屬性相同，優先從實例上查找
2. getName(); //4 由於直接調用getName 1,2,3 排除 此處有變量聲明提早和函數聲明提早 兩個坑 下面舉例說明

// 代碼以下
    console.log(x);
    var x = 1;
    function x (){};
    // 實際執行結果
    var x;
    function x() {};
    console.log(x);
    x = 1;
複製代碼

3. Foo().getName(); //1 先執行Foo()返回的this指向window,此時的getName()就至關於window.getName(),因爲該函數第一行getName = function () { alert (1); };沒有用var聲明，因此是操做的是全局變量,所以修改了先前的getName()函數
4. getName(); //1同上window.getName()
5. new Foo.getName(); //2 考察js運算符優先級 這裏的new操做符是無參數的因此優先級低 實際執行結果new ((Foo.getName)())
6. new Foo().getName(); //3 實際至關於(new Foo()).getName()

執行構造函數，分爲三種狀況 1.沒有返回值，返回實例化對象 2.如有返回值檢查其返回值是否爲引用類型。若是是非引用類型，如基本類型（string、number、boolean、null、undefind）則與無返回值相同，返回實例化對象。``3.若返回值是引用類型，則實際返回值爲這個引用類型 返回this this不能做爲引用類型, 返回實例化對象

7. new new Foo().getName(); //3先初始化Foo的實例化對象，將其原型上的getName做爲構造函數再次new，仍是3.

   

   )

題目2 將data中的數據按照age 從小到大排序

var data = [
        { name: 'Jay', age: 10 },
        { name: 'Jerry', age: 15 },
        { name: 'Merry', age: 12 },
        { name: 'Tom', age: 14 },
        { name: 'Richard', age: 22 }
    ];
    function compare(prop) {
        return function (obj1, obj2) {
            var value1 = obj1[prop];
            var value2 = obj2[prop];
            return value1 - value2;
        }
    }
    data.sort(compare('age'));
    // 極簡寫法
    data.sort((a,b)=>(a.age-b.age))
複製代碼

題目3 數組扁平化

var data = [1, 2, [3, 4, 5, [6, 7, 8]], 9, 10];
    function flatten(arr) {
        let result = []
        for (let i = 0; i < arr.length; i++) {
            if (Array.isArray(arr[i])) {
                result = result.concat(arguments.callee(arr[i]))
            } else {
                result.push(arr[i])
            }
        }
        return result
    }
    // 極簡寫法
    function flatten(arr) {
        return arr.reduce((init, next) => {
            return init.concat(Array.isArray(next) ? flatten(next) : next)
        }), []
    }
複製代碼

4.簡述call,apply,bind區別

call跟apply的用法幾乎同樣，惟一的不一樣就是傳遞的參數不一樣，call只能一個參數一個參數的傳入。apply則只支持傳入一個數組，哪怕是一個參數也要是數組形式。最終調用函數時候這個數組會拆成一個個參數分別傳入。至於bind方法，他是直接改變這個函數的this指向而且返回一個新的函數，以後再次調用這個函數的時候this都是指向bind綁定的第一個參數。bind傳餐方式跟call方法一致。

舉個例子

// 有隻貓叫小黑，小黑會吃魚
const cat = {
    name: '小黑',
    eatFish(...args) {
        console.log('this指向=>', this);
        console.log('...args', args);
        console.log(this.name + '吃魚');
    },
}
// 有隻狗叫大毛，大毛會吃骨頭
const dog = {
    name: '大毛',
    eatBone(...args) {
        console.log('this指向=>', this);
        console.log('...args', args);
        console.log(this.name + '吃骨頭');
    },
}

console.log('=================== call =========================');
// 有一天大毛想吃魚了，但是它不知道怎麼吃。怎麼辦？小黑說我吃的時候餵你吃
cat.eatFish.call(dog, '汪汪汪', 'call')
// 大毛爲了表示感謝，決定下次吃骨頭的時候也喂小黑吃
dog.eatBone.call(cat, '喵喵喵', 'call')

console.log('=================== apply =========================');
cat.eatFish.apply(dog, ['汪汪汪', 'apply'])
dog.eatBone.apply(cat, ['喵喵喵', 'apply'])

console.log('=================== bind =========================');
// 有一天他們以爲每次吃的時候再喂太麻煩了。乾脆直接教對方怎麼吃
const eatFishSkill = cat.eatFish.bind(dog, '汪汪汪', 'bind')
const eatBoneSkill = dog.eatBone.bind(cat, '喵喵喵', 'bind')
eatFishSkill()
eatBoneSkill()
複製代碼

call語法 fun.call(thisArg, arg1, arg2, ...)

• thisArg: 在fun函數運行時指定的this值。須要注意的是，指定的this值並不必定是該函數執行時真正的this值，若是這個函數處於非嚴格模式下，則指定爲null和undefined的this值會自動指向全局對象(瀏覽器中就是window對象)，同時值爲原始值(數字，字符串，布爾值)的this會指向該原始值的自動包裝對象。
• arg1, arg2, ...: 指定的參數列表

apply語法 fun.apply(thisArg, [argsArray])

• thisArg在 fun 函數運行時指定的 this 值。須要注意的是，指定的 this 值並不必定是該函數執行時真正的 this 值，若是這個函數處於非嚴格模式下，則指定爲 null 或 undefined 時會自動指向全局對象（瀏覽器中就是window對象），同時值爲原始值（數字，字符串，布爾值）的 this 會指向該原始值的自動包裝對象。
• argsArray一個數組或者類數組對象，其中的數組元素將做爲單獨的參數傳給 fun 函數。若是該參數的值爲null 或 undefined，則表示不須要傳入任何參數。從ECMAScript 5 開始可使用類數組對象。

bind語法 fun.bind(thisArg[, arg1[, arg2[, ...]]])

• thisArg 當綁定函數被調用時，該參數會做爲原函數運行時的 this 指向。當使用new 操做符調用綁定函數時，該參數無效。
• arg1, arg2, ... 當綁定函數被調用時，這些參數將置於實參以前傳遞給被綁定的方法。