撩課大前端-面試寶典-第九篇

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; // 釋放對象


分享到:


相關文章: