文章目录
一、JS基础-原理实现
二、Promise
一、JS基础-原理实现
实现new
function newOperator(ctor) {
if (typeof ctor !== 'function') {
throw new Error('Constructor not a function')
}
const newObj = Object.create(ctor.prototype)
const args = [].slice.call(arguments, 1)
const returnObj = ctor.apply(newObj, args)
const isObj = typeof returnObj==='object' && returnObj !== null;
const isFunction = typeof returnObj === 'function'
if (isObj || isFunction) {
return returnObj
}
return newObj
}
实现bind
- 基本结论： bind是函数原型对象上，每个函数都可以调用 函数使用bind后，被调用对象是传入bind的第一个参数 当new
被bind后的函数时，this指向了新生成的对象
Function.prototype.bindMock = function(target) {
const originalFun = this;//this是调用bind的函数
const args = [].slice.call(arguments,1)
return function bound() {
const boundArgs = [].slice.call(arguments)
const finalArgs = args.concat(boundArgs)
//this是new生成的对象
if(this instanceof bound) {
// new bound这种情况
// orginalFun要绑定到新生成对象上调用
const result = orginalFun.apply(this, finalArgs)
const isObject = typeof result ==='object' && result!==null
const isFunction = typeof result ==='function'
if (isObject || isFunction) {
return result
}
return this
} else {
return orginalFun.apply(target, finalArgs)
}
}
}
3、实现apply， call
function getGlobalObject() {
return this
}
Function.prototype.applyFn = function(target, argsArray) {
//check
if (typeof this !== 'function') {
throw new TypeError(this+"is not function")
}
if (argsArray === null ||typeof argsArray === 'undefined') {
argsArray =[]
}
if (argsArray !== new Object(argsArray)) {
throw new TypeError('createListFromArrayLike called on non-object')
}
if (typeof target === 'undefined') {
target = getGlobalObject()
}
var original = target['_fn']
var hasOriginal = target.hasOwnProperty('_fn')
target['_fn'] = this;
var result = target['_fn'](...argsArray)//这一步可以通过生成函数兼容旧浏览器
if (hasOriginal) {
target['_fn'] = original;
}
return result;
}
4、实现一下es6的extends
function extends(child, parent) {
if (typeof child !== 'function' && parent !== null) {
throw new TypeError("super expression must either be null or a function")
}
child.prototype=Object.create(parent.prototype, {
constructor: {
value: child,
writable: true,
configurable: true
}
})
if (parent) {
child.__proto_ == parent
}
}
5、Object.create实现， Object.create传null和{} 有啥区别吗
function createFun(o){
//错误检查
function Empty(){
}
Empty.prototype=o
return new Empty()
}
//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create#polyfill
存在弊端： 所有通过Object.create出来的对象共享原始obj属性
Object.create(null) 会创建一个真正的空对象，并没有继承Object原型链上的方法
6、实现数组扁平化函数flat
function reduceDim(arr, depth){
let curQueue=[]
let nextQueue=[]
curQueue = curQueue.push(arr)
let curDepth =0
let hasNext=true
while(hasNext) {
hasNext=false
while(curQueue.length) {
let item = curQueue.shift()
if (item instanceof Array) {
for (i of item){
nextQueue.push(i)
hasNext=true
}
}else {
nextQueue.push(item)
}
}
curDepth++
if (curDepth===depth) return nextQueue
let tmp = curQueue
curQueue = nextQueue
nextQueue = tmp
}
return curQueue;
}
Array.prototype.flatFn = function (depth) {
let result =[]
if (depth===undefined) depth=1
if (depth ==0) return this
const originArray = this;
const length = originArray.length
for (let i=0;i<length;i++) {
let item = originArray[i]
if (item instanceof Array) {
let sub = reduceDim(item, depth)
console.log()
result=result.concat(sub)
} else {
result.push(item)
}
}
return result
}
7、防抖节流区分,手写
// throttle
function throttle(fn, delay) {
let timer = null
let busy=false
return function(){
if (!busy){
busy=true
timer=setTimeout(()=>{
fn()
busy=false
}, delay)
}
}
}
// debounce
function debounce(fn,delay){
let timer =null
// let busy=false
return function () {
// if (busy) {
clearTimeout(timer)
// }
// busy=true
timer =setTimeout(()=>{
fn()
// busy=false
}, delay)
}
}
分享一款面试题库
