閱讀原始碼的好處，不用說都知道，首先進大廠必備，還可以提升自己的能力，學習前人的經驗。原始碼往往是前人留下的最佳實踐，我們跟著前人的腳步去學習會讓我們事半功倍。
- call、apply、bind 實現
- new 實現
- class 實現繼承
- async/await 實現
- reduce 實現
- 實現一個雙向資料繫結
- instanceof 實現
- Array.isArray 實現
- Object.create 的基本實現原理
- getOwnPropertyNames 實現
- promise 實現
- 手寫一個防抖/節流函式
- 柯里化函式的實現
- 手寫一個深拷貝
call、apply、bind 實現
call、apply、bind本質都是改變this的指向，不同點call、apply是直接呼叫函式，bind是返回一個新的函式。call跟apply就只有引數上不同。
bind 實現
- 箭頭函式的
this永遠指向它所在的作用域 - 函式作為建構函式用
new關鍵字呼叫時，不應該改變其this指向，因為new繫結的優先順序高於顯示繫結和硬繫結
Function.prototype.mybind = function(thisArg) {
if (typeof this !== 'function') {
throw TypeError("Bind must be called on a function");
}
// 拿到引數，為了傳給呼叫者
const args = Array.prototype.slice.call(arguments, 1),
// 儲存 this
self = this,
// 構建一個乾淨的函式，用於儲存原函式的原型
nop = function() {},
// 繫結的函式
bound = function() {
// this instanceof nop, 判斷是否使用 new 來呼叫 bound
// 如果是 new 來呼叫的話，this的指向就是其例項，
// 如果不是 new 呼叫的話，就改變 this 指向到指定的物件 o
return self.apply(
this instanceof nop ? this : thisArg,
args.concat(Array.prototype.slice.call(arguments))
);
};
// 箭頭函式沒有 prototype，箭頭函式this永遠指向它所在的作用域
if (this.prototype) {
nop.prototype = this.prototype;
}
// 修改繫結函式的原型指向
bound.prototype = new nop();
return bound;
}
}
複製程式碼測試 mybind
const bar = function() {
console.log(this.name, arguments);
};
bar.prototype.name = 'bar';
const foo = {
name: 'foo'
};
const bound = bar.mybind(foo, 22, 33, 44);
new bound(); // bar, [22, 33, 44]
bound(); // foo, [22, 33, 44]
複製程式碼call 實現
bind是封裝了call的方法改變了this的指向並返回一個新的函式，那麼call是如何做到改變this的指向呢？原理很簡單，在方法呼叫模式下，this總是指向呼叫它所在方法的物件，this的指向與所在方法的呼叫位置有關，而與方法的宣告位置無關（箭頭函式特殊）。先寫一個小demo來理解一下下。
const foo = { name: 'foo' };
foo.fn = function() {
// 這裡的 this 指向了 foo
// 因為 foo 呼叫了 fn，
// fn 的 this 就指向了呼叫它所在方法的物件 foo 上
console.log(this.name); // foo
};
複製程式碼利用 this 的機制來實現 call
Function.prototype.mycall = function(thisArg) {
// this指向呼叫call的物件
if (typeof this !== 'function') {
// 呼叫call的若不是函式則報錯
throw new TypeError('Error');
}
// 宣告一個 Symbol 屬性，防止 fn 被佔用
const fn = Symbol('fn')
const args = [...arguments].slice(1);
thisArg = thisArg || window;
// 將呼叫call函式的物件新增到thisArg的屬性中
thisArg[fn] = this;
// 執行該屬性
const result = thisArg[fn](...args);
// 刪除該屬性
delete thisArg[fn];
// 返回函式執行結果
return result;
}
複製程式碼apply 實現
Function.prototype.myapply = function(thisArg) {
if (typeof this !== 'function') {
throw this + ' is not a function';
}
const args = arguments[1];
const fn = Symbol('fn')
thisArg[fn] = this;
const result = thisArg[fn](...arg);
delete thisArg[fn];
return result;
};
複製程式碼測試 mycall myapply
const bar = function() {
console.log(this.name, arguments);
};
bar.prototype.name = 'bar';
const foo = {
name: 'foo'
};
bar.mycall(foo, 1, 2, 3); // foo [1, 2, 3]
bar.myapply(foo, [1, 2, 3]); // foo [1, 2, 3]
複製程式碼reduce 實現原理
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
Array.prototype.myreduce = function reduce(callbackfn) {
// 拿到陣列
const O = this,
len = O.length;
// 下標值
let k = 0,
// 累加器
accumulator = undefined,
// k下標對應的值是否存在
kPresent = false,
// 初始值
initialValue = arguments.length > 1 ? arguments[1] : undefined;
if (typeof callbackfn !== 'function') {
throw new TypeError(callbackfn + ' is not a function');
}
// 陣列為空，並且有初始值，報錯
if (len === 0 && arguments.length < 2) {
throw new TypeError('Reduce of empty array with no initial value');
}
// 如果初始值存在
if (arguments.length > 1) {
// 設定累加器為初始值
accumulator = initialValue;
// 初始值不存在
} else {
accumulator = O[k];
++k;
}
while (k < len) {
// 判斷是否為 empty [,,,]
kPresent = O.hasOwnProperty(k);
if (kPresent) {
const kValue = O[k];
// 呼叫 callbackfn
accumulator = callbackfn.apply(undefined, [accumulator, kValue, k, O]);
}
++k;
}
return accumulator;
};
複製程式碼測試
const rReduce = ['1', null, undefined, , 3, 4].reduce((a, b) => a + b, 3);
const mReduce = ['1', null, undefined, , 3, 4].myreduce((a, b) => a + b, 3);
console.log(rReduce, mReduce);
// 31nullundefined34 31nullundefined34
複製程式碼new 實現
我們需要知道當
new的時候做了什麼事情
- 建立一個新物件；
- 將建構函式的作用域賦給新物件（因此 this 就指向了這個新物件）
- 執行建構函式中的程式碼（為這個新物件新增屬性）
- 返回新物件。
因為 new 沒辦法重寫，我們使用 myNew 函式來模擬 new
function myNew() {
// 建立一個例項物件
var obj = new Object();
// 取得外部傳入的構造器
var Constructor = Array.prototype.shift.call(arguments);
// 實現繼承，例項可以訪問構造器的屬性
obj.__proto__ = Constructor.prototype;
// 呼叫構造器，並改變其 this 指向到例項
var ret = Constructor.apply(obj, arguments);
// 如果建構函式返回值是物件則返回這個物件，如果不是物件則返回新的例項物件
return typeof ret === 'object' && ret !== null ? ret : obj;
}
複製程式碼測試 myNew
// ========= 無返回值 =============
const testNewFun = function(name) {
this.name = name;
};
const newObj = myNew(testNewFun, 'foo');
console.log(newObj); // { name: "foo" }
console.log(newObj instanceof testNewFun); // true
// ========= 有返回值 =============
const testNewFun = function(name) {
this.name = name;
return {};
};
const newObj = myNew(testNewFun, 'foo');
console.log(newObj); // {}
console.log(newObj instanceof testNewFun); // false
複製程式碼class 實現繼承
主要使用
es5跟es6對比看下class繼承的原理
實現繼承 A extends B
使用 es6 語法
class B {
constructor(opt) {
this.BName = opt.name;
}
}
class A extends B {
constructor() {
// 向父類傳參
super({ name: 'B' });
// this 必須在 super() 下面使用
console.log(this);
}
}
複製程式碼使用 es5 語法
使用寄生組合繼承的方式
- 原型鏈繼承，使子類可以呼叫父類原型上的方法和屬性
- 借用建構函式繼承，可以實現向父類傳參
- 寄生繼承，創造乾淨的沒有構造方法的函式，用來寄生父類的 prototype
// 實現繼承，通過繼承父類 prototype
function __extends(child, parent) {
// 修改物件原型
Object.setPrototypeOf(child, parent);
// 寄生繼承，建立一個乾淨的建構函式，用於繼承父類的 prototype
// 這樣做的好處是，修改子類的 prototype 不會影響父類的 prototype
function __() {
// 修正 constructor 指向子類
this.constructor = child;
}
// 原型繼承，繼承父類原型屬性，但是無法向父類建構函式傳參
child.prototype =
parent === null
? Object.create(parent)
: ((__.prototype = parent.prototype), new __());
}
var B = (function() {
function B(opt) {
this.name = opt.name;
}
return B;
})();
var A = (function(_super) {
__extends(A, _super);
function A() {
// 借用繼承，可以實現向父類傳參, 使用 super 可以向父類傳參
return (_super !== null && _super.apply(this, { name: 'B' })) || this;
}
return A;
})(B);
複製程式碼測試 class
const a = new A();
console.log(a.BName, a.constructor); // B ,ƒ A() {}
複製程式碼async/await 實現
原理就是利用
generator（生成器）分割程式碼片段。然後我們使用一個函式讓其自迭代，每一個yield用promise包裹起來。執行下一步的時機由promise來控制
async/await 是關鍵字，不能重寫它的方法，我們使用函式來模擬
非同步迭代，模擬非同步函式
function _asyncToGenerator(fn) {
return function() {
var self = this,
args = arguments;
// 將返回值promise化
return new Promise(function(resolve, reject) {
// 獲取迭代器例項
var gen = fn.apply(self, args);
// 執行下一步
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, 'next', value);
}
// 丟擲異常
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, 'throw', err);
}
// 第一次觸發
_next(undefined);
});
};
}
複製程式碼執行迭代步驟，處理下次迭代結果
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
// 迭代器完成
resolve(value);
} else {
// -- 這行程式碼就是精髓 --
// 將所有值promise化
// 比如 yield 1
// const a = Promise.resolve(1) a 是一個 promise
// const b = Promise.resolve(a) b 是一個 promise
// 可以做到統一 promise 輸出
// 當 promise 執行完之後再執行下一步
// 遞迴呼叫 next 函式，直到 done == true
Promise.resolve(value).then(_next, _throw);
}
}
複製程式碼測試 _asyncToGenerator
const asyncFunc = _asyncToGenerator(function*() {
const e = yield new Promise(resolve => {
setTimeout(() => {
resolve('e');
}, 1000);
});
const a = yield Promise.resolve('a');
const d = yield 'd';
const b = yield Promise.resolve('b');
const c = yield Promise.resolve('c');
return [a, b, c, d, e];
});
asyncFunc().then(res => {
console.log(res); // ['a', 'b', 'c', 'd', 'e']
});
複製程式碼實現一個雙向繫結
defineProperty 版本
// 資料
const data = {
text: 'default'
};
const input = document.getElementById('input');
const span = document.getElementById('span');
// 資料劫持
Object.defineProperty(data, 'text', {
// 資料變化 --> 修改檢視
set(newVal) {
input.value = newVal;
span.innerHTML = newVal;
}
});
// 檢視更改 --> 資料變化
input.addEventListener('keyup', function(e) {
data.text = e.target.value;
});
複製程式碼proxy 版本
// 資料
const data = {
text: 'default'
};
const input = document.getElementById('input');
const span = document.getElementById('span');
// 資料劫持
const handler = {
set(target, key, value) {
target[key] = value;
// 資料變化 --> 修改檢視
input.value = value;
span.innerHTML = value;
return value;
}
};
const proxy = new Proxy(data, handler);
// 檢視更改 --> 資料變化
input.addEventListener('keyup', function(e) {
proxy.text = e.target.value;
});
複製程式碼Object.create 的基本實現原理
if (typeof Object.create !== "function") {
Object.create = function (prototype, properties) {
if (typeof prototype !== "object") { throw TypeError(); }
function Ctor() {}
Ctor.prototype = prototype;
var o = new Ctor();
if (prototype) { o.constructor = Ctor; }
if (properties !== undefined) {
if (properties !== Object(properties)) { throw TypeError(); }
Object.defineProperties(o, properties);
}
return o;
};
}
複製程式碼instanceof 實現
原理：
L的__proto__是不是等於R.prototype，不等於再找L.__proto__.__proto__直到__proto__為null
// L 表示左表示式，R 表示右表示式
function instance_of(L, R) {
var O = R.prototype;
L = L.__proto__;
while (true) {
if (L === null) return false;
// 這裡重點：當 O 嚴格等於 L 時，返回 true
if (O === L) return true;
L = L.__proto__;
}
}
複製程式碼Array.isArray 實現
Array.myIsArray = function(o) {
return Object.prototype.toString.call(Object(o)) === '[object Array]';
};
console.log(Array.myIsArray([])); // true
複製程式碼getOwnPropertyNames 實現
備註：不能拿到不可列舉的屬性
if (typeof Object.getOwnPropertyNames !== 'function') {
Object.getOwnPropertyNames = function(o) {
if (o !== Object(o)) {
throw TypeError('Object.getOwnPropertyNames called on non-object');
}
var props = [],
p;
for (p in o) {
if (Object.prototype.hasOwnProperty.call(o, p)) {
props.push(p);
}
}
return props;
};
}
複製程式碼Promise 實現
實現原理：其實就是一個釋出訂閱者模式
- 建構函式接收一個
executor函式，並會在new Promise()時立即執行該函式 then時收集依賴，將回撥函式收集到成功/失敗佇列executor函式中呼叫resolve/reject函式resolve/reject函式被呼叫時會通知觸發佇列中的回撥
先看一下整體程式碼，有一個大致的概念
完整程式碼
const isFunction = variable => typeof variable === 'function';
// 定義Promise的三種狀態常量
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class MyPromise {
// 建構函式，new 時觸發
constructor(handle: Function) {
try {
handle(this._resolve, this._reject);
} catch (err) {
this._reject(err);
}
}
// 狀態 pending fulfilled rejected
private _status: string = PENDING;
// 儲存 value，用於 then 返回
private _value: string | undefined = undefined;
// 失敗佇列，在 then 時注入，resolve 時觸發
private _rejectedQueues: any = [];
// 成功佇列，在 then 時注入，resolve 時觸發
private _fulfilledQueues: any = [];
// resovle 時執行的函式
private _resolve = val => {
const run = () => {
if (this._status !== PENDING) return;
this._status = FULFILLED;
// 依次執行成功佇列中的函式，並清空佇列
const runFulfilled = value => {
let cb;
while ((cb = this._fulfilledQueues.shift())) {
cb(value);
}
};
// 依次執行失敗佇列中的函式，並清空佇列
const runRejected = error => {
let cb;
while ((cb = this._rejectedQueues.shift())) {
cb(error);
}
};
/*
* 如果resolve的引數為Promise物件，
* 則必須等待該Promise物件狀態改變後當前Promsie的狀態才會改變
* 且狀態取決於引數Promsie物件的狀態
*/
if (val instanceof MyPromise) {
val.then(
value => {
this._value = value;
runFulfilled(value);
},
err => {
this._value = err;
runRejected(err);
}
);
} else {
this._value = val;
runFulfilled(val);
}
};
// 非同步呼叫
setTimeout(run);
};
// reject 時執行的函式
private _reject = err => {
if (this._status !== PENDING) return;
// 依次執行失敗佇列中的函式，並清空佇列
const run = () => {
this._status = REJECTED;
this._value = err;
let cb;
while ((cb = this._rejectedQueues.shift())) {
cb(err);
}
};
// 為了支援同步的Promise，這裡採用非同步呼叫
setTimeout(run);
};
// then 方法
then(onFulfilled?, onRejected?) {
const { _value, _status } = this;
// 返回一個新的Promise物件
return new MyPromise((onFulfilledNext, onRejectedNext) => {
// 封裝一個成功時執行的函式
const fulfilled = value => {
try {
if (!isFunction(onFulfilled)) {
onFulfilledNext(value);
} else {
const res = onFulfilled(value);
if (res instanceof MyPromise) {
// 如果當前回撥函式返回MyPromise物件，必須等待其狀態改變後在執行下一個回撥
res.then(onFulfilledNext, onRejectedNext);
} else {
//否則會將返回結果直接作為引數，傳入下一個then的回撥函式，並立即執行下一個then的回撥函式
onFulfilledNext(res);
}
}
} catch (err) {
// 如果函式執行出錯，新的Promise物件的狀態為失敗
onRejectedNext(err);
}
};
// 封裝一個失敗時執行的函式
const rejected = error => {
try {
if (!isFunction(onRejected)) {
onRejectedNext(error);
} else {
const res = onRejected(error);
if (res instanceof MyPromise) {
// 如果當前回撥函式返回MyPromise物件，必須等待其狀態改變後在執行下一個回撥
res.then(onFulfilledNext, onRejectedNext);
} else {
//否則會將返回結果直接作為引數，傳入下一個then的回撥函式，並立即執行下一個then的回撥函式
onFulfilledNext(res);
}
}
} catch (err) {
// 如果函式執行出錯，新的Promise物件的狀態為失敗
onRejectedNext(err);
}
};
switch (_status) {
// 當狀態為pending時，將then方法回撥函式加入執行佇列等待執行
case PENDING:
this._fulfilledQueues.push(fulfilled);
this._rejectedQueues.push(rejected);
break;
// 當狀態已經改變時，立即執行對應的回撥函式
case FULFILLED:
fulfilled(_value);
break;
case REJECTED:
rejected(_value);
break;
}
});
}
// catch 方法
catch(onRejected) {
return this.then(undefined, onRejected);
}
// finally 方法
finally(cb) {
return this.then(
value => MyPromise.resolve(cb()).then(() => value),
reason =>
MyPromise.resolve(cb()).then(() => {
throw reason;
})
);
}
// 靜態 resolve 方法
static resolve(value) {
// 如果引數是MyPromise例項，直接返回這個例項
if (value instanceof MyPromise) return value;
return new MyPromise(resolve => resolve(value));
}
// 靜態 reject 方法
static reject(value) {
return new MyPromise((resolve, reject) => reject(value));
}
// 靜態 all 方法
static all(list) {
return new MyPromise((resolve, reject) => {
// 返回值的集合
let values = [];
let count = 0;
for (let [i, p] of list.entries()) {
// 陣列引數如果不是MyPromise例項，先呼叫MyPromise.resolve
this.resolve(p).then(
res => {
values[i] = res;
count++;
// 所有狀態都變成fulfilled時返回的MyPromise狀態就變成fulfilled
if (count === list.length) resolve(values);
},
err => {
// 有一個被rejected時返回的MyPromise狀態就變成rejected
reject(err);
}
);
}
});
}
// 新增靜態race方法
static race(list) {
return new MyPromise((resolve, reject) => {
for (let p of list) {
// 只要有一個例項率先改變狀態，新的MyPromise的狀態就跟著改變
this.resolve(p).then(
res => {
resolve(res);
},
err => {
reject(err);
}
);
}
});
}
}
複製程式碼防抖/節流
防抖函式onscroll 結束時觸發一次，延遲執行
function debounce(func, wait) {
let timeout;
return function() {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
// 使用
window.onscroll = debounce(function() {
console.log('debounce');
}, 1000);
複製程式碼
節流函式onscroll 時，每隔一段時間觸發一次，像水滴一樣
function throttle(fn, delay) {
var prevTime = Date.now();
return function() {
var curTime = Date.now();
if (curTime - prevTime > delay) {
fn.apply(this, arguments);
prevTime = curTime;
}
};
}
// 使用
var throtteScroll = throttle(function() {
console.log('throtte');
}, 1000);
window.onscroll = throtteScroll;
複製程式碼函式柯里化實現
其實我們無時無刻不在使用柯里化函式，只是沒有將它總結出來而已。它的本質就是將一個引數很多的函式分解成單一引數的多個函式。
實際應用中：
- 延遲計算 （用閉包把傳入引數儲存起來，當傳入引數的數量足夠執行函式時，開始執行函式）
- 動態建立函式 （引數不夠時會返回接受剩下引數的函式）
- 引數複用（每個引數可以多次複用）
const curry = fn =>
(judge = (...args) =>
args.length >= fn.length
? fn(...args)
: (...arg) => judge(...args, ...arg));
const sum = (a, b, c, d) => a + b + c + d;
const currySum = curry(sum);
currySum(1)(2)(3)(4); // 10
currySum(1, 2)(3)(4); // 10
currySum(1)(2, 3)(4); // 10
複製程式碼手寫一個深拷貝
淺拷貝只複製地址值，實際上還是指向同一堆記憶體中的資料，深拷貝則是重新建立了一個相同的資料，二者指向的堆記憶體的地址值是不同的。這個時候修改賦值前的變數資料不會影響賦值後的變數。
要實現一個完美的神拷貝太複雜了，這裡簡單介紹一下吧，可以應用於大部分場景了
判斷型別函式
function getType(obj) {
const str = Object.prototype.toString.call(obj);
const map = {
'[object Boolean]': 'boolean',
'[object Number]': 'number',
'[object String]': 'string',
'[object Function]': 'function',
'[object Array]': 'array',
'[object Date]': 'date',
'[object RegExp]': 'regExp',
'[object Undefined]': 'undefined',
'[object Null]': 'null',
'[object Object]': 'object'
};
if (obj instanceof Element) {
// 判斷是否是dom元素，如div等
return 'element';
}
return map[str];
}
複製程式碼簡單版深拷貝，列舉三個例子 array object function，可以自行擴充套件。主要是引發大家的思考
function deepCopy(ori) {
const type = getType(ori);
let copy;
switch (type) {
case 'array':
return copyArray(ori, type, copy);
case 'object':
return copyObject(ori, type, copy);
case 'function':
return copyFunction(ori, type, copy);
default:
return ori;
}
}
function copyArray(ori, type, copy = []) {
for (const [index, value] of ori.entries()) {
copy[index] = deepCopy(value);
}
return copy;
}
function copyObject(ori, type, copy = {}) {
for (const [key, value] of Object.entries(ori)) {
copy[key] = deepCopy(value);
}
return copy;
}
function copyFunction(ori, type, copy = () => {}) {
const fun = eval(ori.toString());
fun.prototype = ori.prototype
return fun
}
複製程式碼最後有幾件小事
- 有想入群的學習前端進階的加我微信
luoxue2479回覆加群即可 - 有錯誤的話歡迎在留言區指出，一起討論，也可以加我微信
- 每天在群裡會有專題討論 github.com/luoxue-vict…
- 鄙人公眾號【前端技匠】，一起來學習吧。
參考文章