本文针对目前常见的面试题，仅提供了相应的核心原理及思路，部分边界细节未处理。后续会持续更新，希望对你有所帮助。
1. 实现一个call函数
// 思路：将要改变this指向的方法挂到目标this上执行并返回 Function.prototype.mycall = function (context) { if (typeof this !== 'function') { throw new TypeError('not funciton') } context = context || window context.fn = this let arg = [...arguments].slice(1) let result = context.fn(...arg) delete context.fn return result }
2. 实现一个apply函数
// 思路：将要改变this指向的方法挂到目标this上执行并返回 Function.prototype.myapply = function (context) { if (typeof this !== 'function') { throw new TypeError('not funciton') } context = context || window context.fn = this let result if (arguments[1]) { result = context.fn(...arguments[1]) } else { result = context.fn() } delete context.fn return result }
3. 实现一个bind函数
// 思路：类似call，但返回的是函数 Function.prototype.mybind = function (context) { if (typeof this !== 'function') { throw new TypeError('Error') } let _this = this let arg = [...arguments].slice(1) return function F() { // 处理函数使用new的情况 if (this instanceof F) { return new _this(...arg, ...arguments) } else { return _this.apply(context, arg.concat(...arguments)) } } }
4. instanceof的原理
// 思路：右边变量的原型存在于左边变量的原型链上 function instanceOf(left, right) { let leftValue = left.__proto__ let rightValue = right.prototype while (true) { if (leftValue === null) { return false } if (leftValue === rightValue) { return true } leftValue = leftValue.__proto__ } }
5. Object.create的基本实现原理
// 思路：将传入的对象作为原型 function create(obj) { function F() {} F.prototype = obj return new F()
6. new本质
function myNew (fun) { return function () { // 创建一个新对象且将其隐式原型指向构造函数原型 let obj = { __proto__ : fun.prototype } // 执行构造函数 fun.call(obj, ...arguments) // 返回该对象 return obj } } function person(name, age) { this.name = name this.age = age } let obj = myNew(person)('chen', 18) // {name: "chen", age: 18}
7. 实现一个基本的Promise
// 未添加异步处理等其他边界情况 // ①自动执行函数，②三个状态，③then class Promise { constructor (fn) { // 三个状态 this.state = 'pending' this.value = undefined this.reason = undefined let resolve = value => { if (this.state === 'pending') { this.state = 'fulfilled' this.value = value } } let reject = value => { if (this.state === 'pending') { this.state = 'rejected' this.reason = value } } // 自动执行函数 try { fn(resolve, reject) } catch (e) { reject(e) } } // then then(onFulfilled, onRejected) { switch (this.state) { case 'fulfilled': onFulfilled() break case 'rejected': onRejected() break default: } } }
8. 实现浅拷贝
// 1. ...实现 let copy1 = {...{x:1}} // 2. Object.assign实现 let copy2 = Object.assign({}, {x:1})
9. 实现一个基本的深拷贝
// 1. JOSN.stringify()/JSON.parse() let obj = {a: 1, b: {x: 3}} JSON.parse(JSON.stringify(obj)) // 2. 递归拷贝 function deepClone(obj) { let copy = obj instanceof Array ? [] : {} for (let i in obj) { if (obj.hasOwnProperty(i)) { copy[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i] } } return copy }
10. 使用setTimeout模拟setInterval
// 可避免setInterval因执行时间导致的间隔执行时间不一致 setTimeout (function () { // do something setTimeout (arguments.callee, 500) }, 500)
11. js实现一个继承方法
// 借用构造函数继承实例属性 function Child () { Parent.call(this) } // 寄生继承原型属性 (function () { let Super = function () {} Super.prototype = Parent.prototype Child.prototype = new Super() })()
12. 实现一个基本的Event Bus
// 组件通信，一个触发与监听的过程 class EventEmitter { constructor () { // 存储事件 this.events = this.events || new Map() } // 监听事件 addListener (type, fn) { if (!this.events.get(type)) { this.events.set(type, fn) } } // 触发事件 emit (type) { let handle = this.events.get(type) handle.apply(this, [...arguments].slice(1)) } } // 测试 let emitter = new EventEmitter() // 监听事件 emitter.addListener('ages', age => { console.log(age) }) // 触发事件 emitter.emit('ages', 18) // 18
13. 实现一个双向数据绑定