因為最近面試被問太多這樣的套路了
- 談談對XXX的理解？
- 你對XXX是怎麼實現的有什麼思路？
- 你可以自己手寫實現一個簡單demo嗎？
所以就整理了一下
手寫實現Bind函式
// 簡單實現
Function.prototype.bind = function(){
var self = this;
// 儲存傳入的上下文
context = [].shift().call(arguments);
// 儲存傳入的引數
params = [].split().call(arguments);
return this.apply(context,[].concat.call(params,[].split().call(arguments)))
}
// MDN原始碼實現
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
// closest thing possible to the ECMAScript 5 internal IsCallable function
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function () {},
// 下面這句有點難以理解…我的理解也不一定正確
// 當bind返回的函式不是作為建構函式的話，this instanceof fNOP 是false，反之為true
// 所以就是進入Othis || window
fBound = function () {
return fToBind.apply(this instanceof fNOP && oThis
? this
: oThis || window,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
// 把原來函式的原型鏈傳給了fbound，然後返回fbound就好
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
複製程式碼- Bind是什麼：bind就是改變某個方法的執行時上下文主體（簡單理解為改變this的指向）
- Bind解決了什麼問題：簡單理解為，在你需要的時候去借用一個函式。（指定某個方法的執行時上下文主體）
- Bind和apply，call的區別在哪裡：
- bind返回的是改變了上下文後的函式，apply，call返回的是改變了上下文後的函式的執行結果
- 傳參格式不同，Bind是一個個傳，apply傳一個陣列
手寫實現Promise
try {
module.exports = Promise
} catch (e) {
console.log(e)
}
function Promise(executor) {
var self = this
// 確定一個當前狀態值
self.status = 'pending'
// 建立一個resolved 和 reject 的呼叫鏈
self.onResolvedCallback = []
self.onRejectedCallback = []
function resolve(value) {
// 如果傳入的是一個Promise物件，則繼續鏈式呼叫
if (value instanceof Promise) {
return value.then(resolve, reject)
}
setTimeout(function() { // 非同步執行所有的回撥函式
if (self.status === 'pending') {
self.status = 'resolved'
self.data = value
for (var i = 0; i < self.onResolvedCallback.length; i++) {
self.onResolvedCallback[i](value)
}
}
})
}
function reject(reason) {
setTimeout(function() { // 非同步執行所有的回撥函式
if (self.status === 'pending') {
self.status = 'rejected'
self.data = reason
for (var i = 0; i < self.onRejectedCallback.length; i++) {
self.onRejectedCallback[i](reason)
}
}
})
}
// 這個executor就是執行函式，但是其實我沒有查到這個函式的相關資料 = =
try {
executor(resolve, reject)
} catch (reason) {
reject(reason)
}
}
function resolvePromise(promise2, x, resolve, reject) {
var then
var thenCalledOrThrow = false
if (promise2 === x) {
return reject(new TypeError('Chaining cycle detected for promise!'))
}
if (x instanceof Promise) {
if (x.status === 'pending') { //because x could resolved by a Promise Object
x.then(function(v) {
resolvePromise(promise2, v, resolve, reject)
}, reject)
} else { //but if it is resolved, it will never resolved by a Promise Object but a static value;
x.then(resolve, reject)
}
return
}
if ((x !== null) && ((typeof x === 'object') || (typeof x === 'function'))) {
try {
then = x.then //because x.then could be a getter
if (typeof then === 'function') {
then.call(x, function rs(y) {
if (thenCalledOrThrow) return
thenCalledOrThrow = true
return resolvePromise(promise2, y, resolve, reject)
}, function rj(r) {
if (thenCalledOrThrow) return
thenCalledOrThrow = true
return reject(r)
})
} else {
resolve(x)
}
} catch (e) {
if (thenCalledOrThrow) return
thenCalledOrThrow = true
return reject(e)
}
} else {
resolve(x)
}
}
Promise.prototype.then = function(onResolved, onRejected) {
var self = this
var promise2
onResolved = typeof onResolved === 'function' ? onResolved : function(v) {
return v
}
onRejected = typeof onRejected === 'function' ? onRejected : function(r) {
throw r
}
if (self.status === 'resolved') {
return promise2 = new Promise(function(resolve, reject) {
setTimeout(function() { // 非同步執行onResolved
try {
var x = onResolved(self.data)
resolvePromise(promise2, x, resolve, reject)
} catch (reason) {
reject(reason)
}
})
})
}
if (self.status === 'rejected') {
return promise2 = new Promise(function(resolve, reject) {
setTimeout(function() { // 非同步執行onRejected
try {
var x = onRejected(self.data)
resolvePromise(promise2, x, resolve, reject)
} catch (reason) {
reject(reason)
}
})
})
}
if (self.status === 'pending') {
// 這裡之所以沒有非同步執行，是因為這些函式必然會被resolve或reject呼叫，而resolve或reject函式裡的內容已是非同步執行，建構函式裡的定義
return promise2 = new Promise(function(resolve, reject) {
self.onResolvedCallback.push(function(value) {
try {
var x = onResolved(value)
resolvePromise(promise2, x, resolve, reject)
} catch (r) {
reject(r)
}
})
self.onRejectedCallback.push(function(reason) {
try {
var x = onRejected(reason)
resolvePromise(promise2, x, resolve, reject)
} catch (r) {
reject(r)
}
})
})
}
}
Promise.prototype.catch = function(onRejected) {
return this.then(null, onRejected)
}
Promise.deferred = Promise.defer = function() {
var dfd = {}
dfd.promise = new Promise(function(resolve, reject) {
dfd.resolve = resolve
dfd.reject = reject
})
return dfd
}
複製程式碼手寫原生AJAX
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{
// 舊版IE用ActiveXObject
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
// readyState有5個狀態，分別代表
// 0: 請求未初始化
// 1: 伺服器連線已建立
// 2: 請求已接收
// 3: 請求處理中
// 4: 請求已完成，且響應已就緒
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();
}
複製程式碼手寫Promise包裝下的AJAX
function myGet(url) {
return new Promise(function(resolve, reject) {
$.get(url, resolve);
});
}
myGet('/url1').then(function (data) {
// 一些處理，data為返回值
return myGet('/url2');
}).then(function (data) {
// 一些處理
return myGet('/url3');
}).then(function (data) {
// 最終處理
});
複製程式碼手寫 EventEmitter
// 參考https://blog.csdn.net/bdss58/article/details/51473107
// 參考https://github.com/mqyqingfeng/EventEmitter/blob/master/eventEmitter.js
// 參考https://juejin.im/post/5b5797b0f265da0fa8674669
class EventEmitter {
constructor(max_event) {
this.listeners = new Map();
// 設定一個最大監聽數
this.max_event = max_event || 10;
}
// 新增一個監聽器
addListener(label, callback) {
this.listeners.has(label) || this.listeners.set(label, []); // 這裡的意思其實是，如果有這個label，那麼將傳入的cb函式再傳給label下的函式，再放到隊尾；如果沒有label，直接push
this.listeners.get(label).push(callback);
}
// 移除一個監聽器
removeListener(label, callback) {
let listeners = this.listeners.get(label);
let index;
if (listeners && listeners.length) {
// MDN：reduce() 方法對累加器和陣列中的每個元素（從左到右）應用一個函式，將其簡化為單個值。
// reduce() API:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
// 注意到addListener方法中，一個label是對應了一個陣列的，也就是說label下可以監聽多個函式，那麼remove和emit都要找到這個使用者指定的函式。找不到就是-1；但是這裡有個問題就是使用者如果重複監聽怎麼辦
// 也就是兩次addListener同一個label同一個callback
index = listeners.reduce((i, listener, index) => {
return (isFunction(listener) && listener === callback) ? i = index : i;
}, -1);
}
// 如果有這個函式，刪掉
if (index > -1) {
listeners.splice(index, 1);
this.listeners.set(label, listeners);
return true;
}
return false;
}
// 監聽，呼叫，注意這裡是把這個label下的所有方法全都呼叫一次
emit(label, ...args) {
let listeners = this.listeners.get(label);
if (listeners && listeners.length) {
listeners.forEach((listener) => {
listener(...args);
})
return true;
}
return false;
}
}
// 實現觀察者
class Observer {
constructor(id, subject) {
this.id = id;
this.subject = subject;
}
on(label, callback) {
this.subject.addListener(label, callback);
}
}
複製程式碼手寫kmp演算法
var kmp = function(sourceStr, subStr){
var partMatch = kmpGetPartMatchLen(subStr);
var result = false;
for(var i = 0; i < sourceStr.length; i++){
for(var j = 0; j < subStr.length; j++){
if(subStr.charAt(j) === sourceStr.charAt(i + j)){
if(j === subStr.length - 1){
result = true;
break;
}
}else{
//實現回滾,以subStr為參照物，即sourceStr往前移動
if(j > 0 && partMatch[j-1] >= 0){
//公式在此處實現
i += (j - 1 - partMatch[j-1] - 1);
}else{
break;
}
}
}
if(result) break;
}
if(result){
return i;
}else{
return -1;
}
};
複製程式碼參考資料