1.手动实现 call、apply、bind
call 实现
call 核心：
- 将函数设为对象的属性
- 执行&删除这个函数
- 指定 this 到函数并传入给定参数执行函数
- 如果不传入参数，默认指向为 window
Function.prototype.call = function(context = window) {
context.fn = this
context.fn(...[...arguments].slice(1))
delete context.fn
}
to do:
方法中 fn 不是唯一值，可能已经被占用
apply 实现
Function.prototype.apply = function(context = window) {
context.fn = this
context.fn(...arguments[1])
delete context.fn
}
bind 实现
Function.prototype.bind = function(context = window) {
let _this = this
// 保留了当前函数传入的参数
let args = [...arguments].slice(1)
return function() {
return _this.apply(context, args.concat([...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() {},
fBound = function() {
return fToBind.apply(
this instanceof fNOP && oThis ? this : oThis || window,
aArgs.concat(Array.prototype.slice.call(arguments))
)
}
fNOP.prototype = this.prototype
fBound.prototype = new fNOP()
return fBound
}
}
2.手动实现符合 Promise/A+规范的 Promise、手动实现 async await
Promise
基础版
let Promise = function(executor) {
let self = this // 缓存一下this
self.status = 'pending' // 状态管理 由pending变为resolved或者rejected
self.value = undefined // 成功后的值 传给resolve
self.reason = undefined // 失败原因 传给reject
self.onResolvedCallbacks = [] // 存放then中成功的回调
self.onRejectedCallbacks = [] // 存放then中失败的回调
// 这里说明一下，第三步使用定时器。执行完 new Promise 之后，会执行then方法，此时会把then中的方法缓存起来，
// 并不执行：此时状态还是pending。等到定时器2秒之后，执行
// resolve|reject 时，而是依次执行存放在数组中的方法。 参考发布订阅模式
function resolve(value) {
// pending => resolved
if (self.status === 'pending') {
self.value = value
self.status = 'resolved'
// 依次执行缓存的成功的回调
self.onResolvedCallbacks.forEach(fn => fn(self.value))
}
}
function reject(value) {
// pending => rejected
if (self.status === 'pending') {
self.value = value
self.status = 'rejected'
// 依次执行缓存的失败的回调
self.onRejectedCallbacks.forEach(fn => fn(self.reason))
}
}
try {
// new Promise 时 executor执行
executor(resolve, reject)
} catch (error) {
reject(error) // 当executor中执行有异常时，直接执行reject
}
}
Promise.prototype.then = function(onFulfilled, onRejected) {
let self = this
// 执行了 resolve
if (self.status === 'resolved') {
onFulfilled(self.value)
}
// 执行了 reject
if (self.status === 'rejected') {
onRejected(self.reason)
}
// new Promise中可以支持异步行为 当既不执行resolve又不执行reject时
// 状态是默认的等待态pending
if (self.status === 'pending') {
self.onResolvedCallbacks.push(onFulfilled)
self.onRejectedCallbacks.push(onRejected)
}
}
最终版
function Promise(executor) {
let self = this
self.status = 'pending'
self.value = undefined
self.reason = undefined
self.onResolvedCallbacks = []
self.onRejectedCallbacks = []
function resolve(value) {
if (self.status === 'pending') {
self.status = 'resolved'
self.value = value
self.onResolvedCallbacks.forEach(function(fn) {
fn()
})
}
}
function reject(reason) {
if (self.status === 'pending') {
self.status = 'rejected'
self.value = reason
self.onResolvedCallbacks.forEach(function(fn) {
fn()
})
}
}
try {
executor(resolve, reject)
} catch (err) {
reject(err)
}
}
function resolvePromise(promise2, x, resolve, reject) {
if (promise2 === x) {
return reject(new TypeError('循环引用'))
}
let called
if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
try {
let then = x.then
if (typeof then === 'function') {
then.call(
x,
function(y) {
if (called) return
called = true
resolvePromise(promise2, y, resolve, reject)
},
function(err) {
if (called) return
called = true
reject(err)
}
)
} else {
resolve(x)
}
} catch (err) {
if (called) return
called = true
reject(err)
}
} else {
return resolve(x)
}
}
Promise.prototype.then = function(onFulfiled, onRejected) {
//成功和失败默认不传给一个函数
onFulfiled =
typeof onFulfiled === 'function'
? onFulfiled
: function(value) {
return value
}
onRejected =
typeof onRejected === 'function'
? onRejected
: function(err) {
throw err
}
let self = this
let promise2 //新增: 返回的promise
if (self.status === 'resolved') {
promise2 = new Promise(function(resolve, reject) {
setTimeout(function() {
//用setTimeOut实现异步
try {
let x = onFulfiled(self.value) //x可能是普通值 也可能是一个promise, 还可能是别人的promise
resolvePromise(promise2, x, resolve, reject) //写一个方法统一处理
} catch (e) {
reject(e)
}
})
})
}
if (self.status === 'rejected') {
promise2 = new Promise(function(resolve, reject) {
setTimeout(function() {
try {
let x = onRejected(self.reason)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
})
})
}
if (self.status === 'pending') {
promise2 = new Promise(function(resolve, reject) {
self.onResolvedCallbacks.push(function() {
setTimeout(function() {
try {
let x = onFulfiled(self.value)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
})
})
self.onRejectedCallbacks.push(function() {
setTimeout(function() {
try {
let x = onRejected(self.reason)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
})
})
})
}
return promise2
}
async/await
ES2017 标准引入了 async 函数，使得异步操作变得更加方便。
async 函数是什么？一句话，它就是 Generator 函数的语法糖。
读取文件
// 用Generator 函数实现
const fs = require('fs')
const readFile = function(fileName) {
return new Promise(function(resolve, reject) {
fs.readFile(fileName, function(error, data) {
if (error) return reject(error)
resolve(data)
})
})
}
const gen = function*() {
const f1 = yield readFile('/etc/fstab')
const f2 = yield readFile('/etc/shells')
console.log(f1.toString())
console.log(f2.toString())
}
//上面代码的函数gen可以写成async函数
const asyncReadFile = async function() {
const f1 = await readFile('/etc/fstab')
const f2 = await readFile('/etc/shells')
console.log(f1.toString())
console.log(f2.toString())
}
async 函数对 Generator 函数的改进，体现在以下四点。
（1）内置执行器。
Generator 函数的执行必须靠执行器，所以才有了 co 模块，而 async 函数自带执行器。也就是说，async 函数的执行，与普通函数一模一样，只要一行。
asyncReadFile();
上面的代码调用了 asyncReadFile 函数，然后它就会自动执行，输出最后结果。这完全不像 Generator 函数，需要调用 next 方法，或者用 co 模块，才能真正执行，得到最后结果。
（2）更好的语义。
async 和 await，比起星号和 yield，语义更清楚了。async 表示函数里有异步操作，await 表示紧跟在后面的表达式需要等待结果。
（3）更广的适用性。
co 模块约定，yield 命令后面只能是 Thunk 函数或 Promise 对象，而 async 函数的 await 命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。
（4）返回值是 Promise。
async 函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用 then 方法指定下一步的操作。
进一步说，async 函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而 await 命令就是内部 then 命令的语法糖。
async 函数的实现原理
// async 函数的实现原理，就是将 Generator 函数和自动执行器，包装在一个函数里
async function fn(args) {
// ...
}
// 等同于
function fn(args) {
return spawn(function*() {
// ...
});
}
// spawn函数(自动执行器)的实现
function spawn(genF) {
return new Promise(function(resolve, reject) {
const gen = genF();
function step(nextF) {
let next;
try {
next = nextF();
} catch (e) {
return reject(e);
}
if(next.done) {
return resolve(next.value)
}
Promise.resolve(next.value).then(funtion(v){
step(function(){ return gen.next(v) })
}, function(e){
step(function(){ return gen.throw(e) })
})
}
step(function(){ return gen.next(undefined) })
});
}
3.手写一个 EventEmitter 实现事件发布、订阅
class EventEmitter {
constructor() {
this.subs = {
any: []
}
}
// 添加订阅
subscribe(type = 'any', fn) {
if (!this.subs[type]) {
this.subs[type] = []
}
this.subs[type].push(fn) // 将订阅方法保存在数组里
}
// 退订
unsubscribe(type = 'any', fn) {
this.subs[type] = this.subs[type].filter(function(item) {
return item !== fn
}) // 将退订的方法从数组中移除
}
// 发布订阅
publish(type = 'any', ...args) {
this.subs[type].forEach(function(item) {
item(...args) // 根据不同的类型调用相应的方法
})
}
}
4.可以说出两种实现双向绑定的方案、可以手动实现
极简版的双向绑定
我们都知道,Object.defineProperty 的作用就是劫持一个对象的属性,通常我们对属性的 getter 和 setter 方法进行劫持,在对象的属性发生变化时进行特定的操作。
我们就对对象 obj 的 text 属性进行劫持,在获取此属性的值时打印'get val',在更改属性值的时候对 DOM 进行操作,这就是一个极简的双向绑定。
const obj = {}
Object.defineProperty(obj, 'text', {
get: function() {
console.log('get val')
},
set: function(newVal) {
console.log('set val:' + newVal)
document.getElementById('input').value = newVal
document.getElementById('span').innerHTML = newVal
}
})
const input = document.getElementById('input')
input.addEventListener('keyup', function(e) {
obj.text = e.target.value
})
升级版的双向绑定
Vue 的操作就是加入了发布订阅模式，结合 Object.defineProperty 的劫持能力，实现了可用性很高的双向绑定。
首先，我们以发布订阅的角度看我们第一部分写的那一坨代码,会发现它的监听、发布和订阅都是写在一起的,我们首先要做的就是解耦。
我们先实现一个订阅发布中心，即消息管理员（Dep）,它负责储存订阅者和消息的分发,不管是订阅者还是发布者都需要依赖于它。
let uid = 0
// 用于储存订阅者并发布消息
class Dep {
constructor() {
// 设置id,用于区分新Watcher和只改变属性值后新产生的Watcher
this.id = uid++
// 储存订阅者的数组
this.subs = []
}
// 触发target上的Watcher中的addDep方法,参数为dep的实例本身
depend() {
Dep.target.addDep(this)
}
// 添加订阅者
addSub(sub) {
this.subs.push(sub)
}
notify() {
// 通知所有的订阅者(Watcher)，触发订阅者的相应逻辑处理
this.subs.forEach(sub => sub.update())
}
}
// 为Dep类设置一个静态属性,默认为null,工作时指向当前的Watcher
Dep.target = null
现在我们需要实现监听者(Observer),用于监听属性值的变化。
// 监听者，监听对象属性值的变化
class Observer {
constructor(value) {
this.value = value
this.walk(value)
}
// 遍历属性值并监听
walk(value) {
Object.keys(value).forEach(key => this.convert(key, value[key]))
}
// 执行监听的具体方法
convert(key, val) {
defineReactive(this.value, key, val)
}
}
function defineReactive(obj, key, val) {
const dep = new Dep()
// 给当前属性的值添加监听
let childOb = observe(val)
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: () => {
// 如果Dep类存在target属性，将其添加到dep实例的subs数组中
// target指向一个Watcher实例，每个Watcher都是一个订阅者
// Watcher实例在实例化过程中，会读取data中的某个属性，从而触发当前get方法
if(Dep.target){
dep.depend()
}
return val
}
set: newVal => {
if (val === newVal) return
val = newVal
// 对新值进行监听
childOb = observe(newVal)
// 通知所有订阅者，数值被改变了
dep.notify()
}
})
}
function observe(value) {
// 当值不存在，或者不是复杂数据类型时，不再需要继续深入监听
if(!value || typeof value !== 'object'){
return
}
return new Observer(value)
}
那么接下来就简单了,我们需要实现一个订阅者(Watcher)。
class Watcher {
constructor(vm, expOrFn, cb) {
this.depIds = {} // hash储存订阅者的id,避免重复的订阅者
this.vm = vm // 被订阅的数据一定来自于当前Vue实例
this.cb = cb // 当数据更新时想要做的事情
this.expOrFn = expOrFn // 被订阅的数据
this.val = this.get() // 维护更新之前的数据
}
// 对外暴露的接口，用于在订阅的数据被更新时，由订阅者管理员(Dep)调用
update() {
this.run()
}
addDep(dep) {
// 如果在depIds的hash中没有当前的id,可以判断是新Watcher
// 因此可以添加到dep的数组中储存
// 此判断是避免同id的Watcher被多次储存
if (!this.depIds.hasOwnProperty(dep.id)) {
dep.addSub(this)
this.depIds[dep.id] = dep
}
}
run() {
const val = this.get()
if (val !== this.val) {
this.val = val
this.cb.call(this.vm, val)
}
}
get() {
// 当前订阅者(Watcher)读取被订阅数据的最新更新后的值时
// 通知订阅者管理员收集当前订阅者
Dep.target = this
const val = this.vm._data[this.expOrFn]
// 置空，用于下一个Watcher使用
Dep.target = null
return val
}
}
那么我们最后完成 Vue,将上述方法挂载在 Vue 上。
class Vue {
constructor(options = {}) {
// 简化了$options的处理
this.$options = options
// 简化了对data的处理
let data = (this._data = this.$options.data)
// 将所有data最外层属性代理到Vue实例上
Object.keys(data).forEach(key => this._proxy(key))
// 监听数据
observe(data)
}
// 对外暴露调用订阅者的接口，内部主要在指令中使用订阅者
$watch(expOrFn, cb) {
new Watcher(this, expOrFn, cb)
}
_proxy(key) {
Object.defineProperty(this, key, {
configurable: true,
enumerable: true,
get: () => this._data[key],
set: val => {
this._data[key] = val
}
})
}
}
Proxy 实现的双向绑定
const input = document.getElementById('input')
const p = document.getElementById('p')
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 === 'text') {
input.value = value
p.innerHTML = value
}
return Reflect.set(target, key, value, receiver)
}
})
input.addEventListener('keyup', function(e) {
newObj.text = e.target.value
})
5.手写 JSON.parse、JSON.stringify
JSON.parse
window.JSON.parse = function(jsonStr) {
return eval('(' + jsonStr + ')')
}
JSON.stringify
window.JSON.stringify = function(jsonObj) {
val result = '',
curVal
if (jsonObj === null) return String(jsonObj)
switch (typeof jsonObj) {
case 'number':
case 'boolean':
return String(jsonObj)
case 'string':
return '"' + jsonObj + '"'
case 'undefined':
case 'function':
return undefined
}
switch (Object.prototype.toString.call(jsonObj)) {
case '[object Array]':
result += '['
for (var i = 0, len = jsonObj.length; i < len; i++) {
curVal = JSON.stringify(jsonObj[i])
result += (curVal === undefined ? null : curVal) + ','
}
if (result !== '[') {
result = result.slice(0, -1)
}
result += ']'
return result
case '[object Date]':
return (
'"' + (jsonObj.toJSON ? jsonObj.toJSON() : jsonObj.toString()) + '"'
)
case '[object RegExp]':
return '{}'
case '[object Object]':
result += '{'
for (i in jsonObj) {
if (jsonObj.hasOwnProperty(i)) {
curVal = JSON.stringify(jsonObj[i])
if (curVal !== undefined) {
result += '"' + i + '":' + curVal + ','
}
}
}
if (result !== '{') {
result = result.slice(0, -1)
}
result += '}'
return result
case '[object String]':
return '"' + jsonObj.toString() + '"'
case '[object Number]':
case '[object Boolean]':
return jsonObj.toString()
}
}
