前端面試中常考的源碼實現
👇 內容速覽 👇javascript
- 手動實現
call/apply/bind - 實現深拷貝函數
- 基於
ES5/ES6實現雙向綁定 instanceof原理與實現- 實現支持綁定、解綁和派發的事件類
手動擼個call/apply/bind
實現call
來看下call的原生表現形式：html
function test(arg1, arg2) {
console.log(arg1, arg2)
console.log(this.a, this.b)
}
run.call({
a: 'a',
b: 'b'
}, 1, 2)
複製代碼
好了，開始手動實現咱們的call2。在實現的過程有個關鍵：前端
若是一個函數做爲一個對象的屬性，那麼經過對象的.運算符調用此函數，this就是此對象vue
let obj = {
a: 'a',
b: 'b',
test: function (arg1, arg2) {
console.log(arg1, arg2)
// this.a 就是 a; this.b 就是 b
console.log(this.a, this.b)
}
}
obj.test(1, 2)
複製代碼
知道了實現關鍵，下面就是咱們模擬的call：java
Function.prototype.call2 = function(context) {
if(typeof this !== 'function') {
throw new TypeError('Error')
}
// 默認上下文是window
context = context || window
// 保存默認的fn
const { fn } = context
// 前面講的關鍵，將函數自己做爲對象context的屬性調用，自動綁定this
context.fn = this
const args = [...arguments].slice(1)
const result = context.fn(...args)
// 恢復默認的fn
context.fn = fn
return result
}
// 如下是測試代碼
function test(arg1, arg2) {
console.log(arg1, arg2)
console.log(this.a, this.b)
}
test.call2({
a: 'a',
b: 'b'
}, 1, 2)
複製代碼
實現apply
apply和call實現相似，只是傳入的參數形式是數組形式，而不是逗號分隔的參數序列。webpack
所以，藉助es6提供的...運算符，就能夠很方便的實現數組和參數序列的轉化。css3
Function.prototype.apply2 = function(context) {
if(typeof this !== 'function') {
throw new TypeError('Error')
}
context = context || window
const { fn } = context
context.fn = this
let result
if(Array.isArray(arguments[1])) {
// 經過...運算符將數組轉換爲用逗號分隔的參數序列
result = context.fn(...arguments[1])
} else {
result = context.fn()
}
context.fn = fn
return result
}
/** * 如下是測試代碼 */
function test(arg1, arg2) {
console.log(arg1, arg2)
console.log(this.a, this.b)
}
test.apply2({
a: 'a',
b: 'b'
}, [1, 2])
複製代碼
實現bind
bind的實現有點意思，它有兩個特色：git
- 自己返回一個新的函數，因此要考慮
new的狀況 - 能夠「保留」參數，內部實現了參數的拼接
Function.prototype.bind2 = function(context) {
if(typeof this !== 'function') {
throw new TypeError('Error')
}
const that = this
// 保留以前的參數，爲了下面的參數拼接
const args = [...arguments].slice(1)
return function F() {
// 若是被new建立實例，不會被改變上下文！
if(this instanceof F) {
return new that(...args, ...arguments)
}
// args.concat(...arguments): 拼接以前和如今的參數
// 注意：arguments是個類Array的Object, 用解構運算符..., 直接拿值拼接
return that.apply(context, args.concat(...arguments))
}
}
/** * 如下是測試代碼 */
function test(arg1, arg2) {
console.log(arg1, arg2)
console.log(this.a, this.b)
}
const test2 = test.bind2({
a: 'a',
b: 'b'
}, 1) // 參數 1
test2(2) // 參數 2
複製代碼
實現深拷貝函數
實現一個對象的深拷貝函數，須要考慮對象的元素類型以及對應的解決方案：es6
- 基礎類型：這種最簡單，直接賦值便可
- 對象類型：遞歸調用拷貝函數
- 數組類型：這種最難，由於數組中的元素多是基礎類型、對象還可能數組，所以要專門作一個函數來處理數組的深拷貝
/** * 數組的深拷貝函數 * @param {Array} src * @param {Array} target */
function cloneArr(src, target) {
for(let item of src) {
if(Array.isArray(item)) {
target.push(cloneArr(item, []))
} else if (typeof item === 'object') {
target.push(deepClone(item, {}))
} else {
target.push(item)
}
}
return target
}
/** * 對象的深拷貝實現 * @param {Object} src * @param {Object} target * @return {Object} */
function deepClone(src, target) {
const keys = Reflect.ownKeys(src)
let value = null
for(let key of keys) {
value = src[key]
if(Array.isArray(value)) {
target[key] = cloneArr(value, [])
} else if (typeof value === 'object') {
// 若是是對象並且不是數組, 那麼遞歸調用深拷貝
target[key] = deepClone(value, {})
} else {
target[key] = value
}
}
return target
}
複製代碼
這段代碼是否是比網上看到的多了不少？由於考慮很周全，請看下面的測試用例：
// 這個對象a是一個囊括以上全部狀況的對象
let a = {
age: 1,
jobs: {
first: "FE"
},
schools: [
{
name: 'shenda'
},
{
name: 'shiyan'
}
],
arr: [
[
{
value: '1'
}
],
[
{
value: '2'
}
],
]
};
let b = {}
deepClone(a, b)
a.jobs.first = 'native'
a.schools[0].name = 'SZU'
a.arr[0][0].value = '100'
console.log(a.jobs.first, b.jobs.first) // output: native FE
console.log(a.schools[0], b.schools[0]) // output: { name: 'SZU' } { name: 'shenda' }
console.log(a.arr[0][0].value, b.arr[0][0].value) // output: 100 1
console.log(Array.isArray(a.arr[0])) // output: true
複製代碼
看到測試用例，應該會有人奇怪爲何最後要輸出Array.isArray(a.arr[0])。這主要是由於網上不少實現方法沒有針對array作處理，直接將其當成object，這樣拷貝後雖然值沒問題，可是array的元素會被轉化爲object。這顯然是錯誤的作法。
而上面所說的深拷貝函數就解決了這個問題。
基於ES5/ES6實現「雙向綁定」
要想實現，就要先看看什麼是「雙向數據綁定」，它和「單向數據綁定」有什麼區別？這樣才能知道要實現什麼效果嘛。
雙向綁定：視圖（View）的變化能實時讓數據模型（Model）發生變化，而數據的變化也能實時更新到視圖層。
單向數據綁定：只有從數據到視圖這一方向的關係。
ES5的Object.defineProperty
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script> const obj = { value: '' } function onKeyUp(event) { obj.value = event.target.value } // 對 obj.value 進行攔截 Object.defineProperty(obj, 'value', { get: function() { return value }, set: function(newValue) { value = newValue document.querySelector('#value').innerHTML = newValue // 更新視圖層 document.querySelector('input').value = newValue // 數據模型改變 } }) </script>
</head>
<body>
<p>
值是：<span id="value"></span>
</p>
<input type="text" onkeyup="onKeyUp(event)">
</body>
</html>
複製代碼
ES6的Proxy
隨着，vue3.0放棄支持了IE瀏覽器。並且Proxy兼容性愈來愈好，能支持13種劫持操做。
所以，vue3.0選擇使用Proxy來實現雙向數據綁定，而再也不使用Object.defineProperty。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
const obj = {}
const newObj = new Proxy(obj, {
get: function(target, key, receiver) {
return Reflect.get(target, key, receiver)
},
set: function(target, key, value, receiver) {
if(key === 'value') {
document.querySelector('#value').innerHTML = value
document.querySelector('input').value = value
}
return Reflect.set(target, key, value, receiver)
}
})
function onKeyUp(event) {
newObj.value = event.target.value
}
</script>
</head>
<body>
<p>
值是：<span id="value"></span>
</p>
<input type="text" onkeyup="onKeyUp(event)">
</body>
</html>
複製代碼
instanceof原理與實現
instanceof是經過原型鏈來進行判斷的，因此只要不斷地經過訪問__proto__，就能夠拿到構造函數的原型prototype。直到null中止。
/** * 判斷left是否是right類型的對象 * @param {*} left * @param {*} right * @return {Boolean} */
function instanceof2(left, right) {
let prototype = right.prototype;
// 沿着left的原型鏈, 看看是否有何prototype相等的節點
left = left.__proto__;
while(1) {
if(left === null || left === undefined) {
return false;
}
if(left === prototype) {
return true;
}
left = left.__proto__;
}
}
/** * 測試代碼 */
console.log(instanceof2([], Array)) // output: true
function Test(){}
let test = new Test()
console.log(instanceof2(test, Test)) // output: true
複製代碼
實現支持綁定、解綁和派發的事件類
實現思路：這裏涉及了「訂閱/發佈模式」的相關知識。參考addEventListener(type, func)和removeEventListener(type, func)的具體效果來實現便可。
// 數組置空：
// arr = []; arr.length = 0; arr.splice(0, arr.length)
class Event {
constructor() {
this._cache = {};
}
// 註冊事件：若是不存在此種type，建立相關數組
on(type, callback) {
this._cache[type] = this._cache[type] || [];
let fns = this._cache[type];
if (fns.indexOf(callback) === -1) {
fns.push(callback);
}
return this;
}
// 觸發事件：對於一個type中的全部事件函數，均進行觸發
trigger(type, ...data) {
let fns = this._cache[type];
if (Array.isArray(fns)) {
fns.forEach(fn => {
fn(...data);
});
}
return this;
}
// 刪除事件：刪除事件類型對應的array
off(type, callback) {
let fns = this._cache[type];
// 檢查是否存在type的事件綁定
if (Array.isArray(fns)) {
if (callback) {
// 卸載指定的回調函數
let index = fns.indexOf(callback);
if (index !== -1) {
fns.splice(index, 1);
}
} else {
// 所有清空
fns = [];
}
}
return this;
}
}
// 如下是測試函數
const event = new Event();
event
.on("test", a => {
console.log(a);
})
.trigger("test", "hello");
複製代碼
更多系列文章
《前端知識體系》
- JavaScript基礎知識梳理(上)
- JavaScript基礎知識梳理(下)
- 談談promise/async/await的執行順序與V8引擎的BUG
- 前端面試中常考的源碼實現
- Flex上手與實戰
- ......
《設計模式手冊》
《Webpack4漸進式教程》
相關文章
- 1. 《前端面試手記》之常考的源碼實現
- 2. JavaScript中各類源碼實現（前端面試筆試必備）
- 3. 前端面試常考知識點---js
- 4. 前端面試-----常考題篇（一）
- 5. 前端面試常考知識點---CSS
- 6. 前端面試 - 常考的手撕代碼題
- 7. 前端面試中常遇到的算法題及考察點
- 8. 前端常見的面試
- 9. 前端面試大全：ES6 知識點及常考面試題
- 10. 常見前端面試代碼題
- 更多相關文章...
- • 現實生活中的 XML - XML 教程
- • Hibernate實現增刪改查 - Hibernate教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 《前端面試手記》之常考的源碼實現
- 2. JavaScript中各類源碼實現（前端面試筆試必備）
- 3. 前端面試常考知識點---js
- 4. 前端面試-----常考題篇（一）
- 5. 前端面試常考知識點---CSS
- 6. 前端面試 - 常考的手撕代碼題
- 7. 前端面試中常遇到的算法題及考察點
- 8. 前端常見的面試
- 9. 前端面試大全：ES6 知識點及常考面試題
- 10. 常見前端面試代碼題