react和vue的比较
相同 1)vitual dom 2)组件化 3)props,单一数据流
不同点 1)react是jsx和模板;(jsx可以进行更多的js逻辑和操作) 2)状态管理(react) 3)对象属性(vue) 4)vue:view——medol之间双向绑定 5)vue:组件之间的通信(props,callback,emit)
开源分享:docs.qq.com/doc/DSmRnRG…
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
1. 基本结论: 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'//这一步可以通过生成函数兼容旧浏览器 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() } //developer.mozilla.org/zh-CN/docs/…
存在弊端: 所有通过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)
最后
除了简历做到位,面试题也必不可少,整理了些题目,前面有117道汇总的面试到的题目,后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。