撩課-Web大前端天天5道面試題-Day4

1. 如何理解閉包？

爲何要使用閉包：
由於JS中變量的做用域分類：
全局變量和局部變量。

函數內部能夠讀取函數外部的全局變量；
在函數外部沒法讀取函數內的局部變量。

爲了讓函數執行完成後，內部的函數、變量還
能被調用，能夠採用閉包延長
局部變量/函數的生命週期。

定義和用法：
當一個函數的返回值是
另一個函數，而返回的那個函數
若是調用了其父函數內部的其它變量，
若是返回的這個函數在外部被執行，
就產生了閉包。

表現形式：
使函數外部可以調用
函數內部定義的變量。

使用場景:
排他、函數節流、網絡...

使用閉包的注意點：

濫用閉包，會形成內存泄漏；
因爲閉包會使得函數中的變量
都被保存在內存中，內存消耗很大，
因此不能濫用閉包，
不然會形成網頁的性能問題，
在IE中可能致使內存泄露。
解決方法是，在退出函數以前，
將不使用的局部變量指向null。
複製代碼

2. 如何獲取瀏覽器URL中查詢字符串中的參數？

function getParamsWithUrl(url) {
    var args = url.split('?');
    if (args[0] === url) {
        return "";
    }
    var arr = args[1].split('&');
    var obj = {};
    for (
    var i = 0; 
    i < arr.length; 
    i++) {
        var arg = arr[i].split('=');
        obj[arg[0]] = arg[1];
    }
    return obj;
}

var href = getParamsWithUrl
('http://www.itlike.com? id=1022&name=撩課&age=1');

console.log(href['name']); // 撩課

複製代碼

3.JS有哪些手段能夠實現繼承？

1. 原型鏈繼承
將父類的實例做爲子類的原型;

2. 藉助構造函數繼承
使用父類的構造函數來加強子類實例，
等因而複製父類的實例屬性給子類；
（沒用到原型）

3. 寄生組合繼承（完美）
經過寄生方式，
砍掉父類的實例屬性，
這樣，在調用兩次父類的構造的時候，
就不會初始化兩次實例方法/屬性，
避免的組合繼承的缺點

4. 組合繼承
經過調用父類構造，
繼承父類的屬性並保留傳參的優勢，
而後經過將父類實例做爲子類原型，
實現函數複用

5. 拷貝繼承
支持多繼承，沒法獲取父類
不可枚舉的方法

6. 實例繼承
爲父類實例添加新特性，
做爲子類實例返回

複製代碼

4. 用純JS實現，點擊一個列表時，輸出對應的索引？

方式一：
for(let i = 0, len = lis.length;
i < len; i++)
{
    lis[i].addEventListener
    ('click', function () {
        console.log(i);
    }, false);
}

方式二：
for(var i = 0, len = lis.length; 
i < len; i++) {
    (function (i) {
        lis[i].addEventListener
        ('click', function () {
            console.log(i);
        }, false);
    })(i)
}

方式三：
var ul = document.querySelector('ul');
var lis = document.querySelectorAll('ul li');
ul.addEventListener('click', 
function (e) {
    var target = e.target;
    if(target.nodeName.toLowerCase() === 'li') {
        console.log(
        [].indexOf.call(lis, target)
        );
    }
}, false);

複製代碼

5. 如下代碼有內存泄漏嗎？

var user = {
    name: '撩課', 
    age: 12, 
    gender: '女'
};
var box = document.getElementById('box');
box.onclick = function() {
    box.innerHTML = user.name;
};
// ...其餘操做
user = null; // 釋放對象

答：存在內存泄漏，
這是js中垃圾回收的引用計數形成的。
徹底去除內存泄漏是不現實的，可是，
若是採用下面的方法能夠減小內存泄漏：

var user = {
    name: '撩課',
    age: 12,
    gender: '女'
};
var box = document.getElementById('box');
(function (name) {
    box.onclick = function() {
        box.innerHTML = name;
    };
})(user.name);
// ...其餘操做
user = null; // 釋放對象

複製代碼