1.实现一个new操作符
new操作符做了这些事:
它创建了一个全新的对象 它会被执行[[Prototype]](也就是__proto__)链接。 它使this指向新创建的对象。 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error),那么new表达式中的函数调用将返回该对象引用。
function New ( func) {
var res = { } ;
if ( func. prototype !== null ) {
res. __proto__ = func. prototype;
}
var ret = func. apply ( res, Array. prototype. slice. call ( arguments, 1 ) ) ;
if ( ( typeof ret === "object" || typeof ret === "function" ) && ret !== null ) {
return ret;
}
return res;
}
function Add ( a, b) {
this . a = a;
this . b = b;
}
Add. prototype. add = function ( ) {
return this . a + this . b;
}
let obj = New ( Add, 1 , 2 ) ;
obj. add ( ) ;
2.实现一个JSON.stringify
JSON.stringify(value[, replacer [, space]]):
Boolean | Number| String 类型会自动转换成对应的原始值。 undefined、任意函数以及symbol,会被忽略(出现在非数组对象的属性值中时),或者被转换成 null(出现在数组中时)。 不可枚举的属性会被忽略。 如果一个对象的属性值通过某种间接的方式指回该对象本身,即循环引用,属性也会被忽略。
function jsonStringify ( obj) {
let type = typeof obj;
if ( type !== "object" ) {
if ( /string|undefined|function/ . test ( type) ) {
obj = '"' + obj + '"' ;
}
return String ( obj) ;
} else {
let json = [ ]
let arr = Array. isArray ( obj)
for ( let k in obj) {
let v = obj[ k] ;
let type = typeof v;
if ( /string|undefined|function/ . test ( type) ) {
v = '"' + v + '"' ;
} else if ( type === "object" ) {
v = jsonStringify ( v) ;
}
json. push ( ( arr ? "" : '"' + k + '":' ) + String ( v) ) ;
}
return ( arr ? "[" : "{" ) + String ( json) + ( arr ? "]" : "}" )
}
}
jsonStringify ( { x : 5 } )
jsonStringify ( [ 1 , "false" , false ] )
jsonStringify ( { b: undefined} )
3.实现一个JSON.parse
JSON.parse(text[, reviver])
用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作)。
3.1第一种直接使用eval
function jsonParse ( opt) {
return eval ( '(' + opt + ')' ) ;
}
jsonParse ( jsonStringify ( { x : 5 } ) )
jsonParse ( jsonStringify ( [ 1 , "false" , false ] ) )
jsonParse ( jsonStringify ( { b: undefined} ) )
它会执行JS代码,有XSS漏洞。如果你只想记这个方法,就得对参数json做校验
var rx_one = /^[\],:{}\s]*$/ ;
var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g ;
var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g ;
var rx_four = /(?:^|:|,)(?:\s*\[)+/g ;
if (
rx_one. test (
json
. replace ( rx_two, "@" )
. replace ( rx_three, "]" )
. replace ( rx_four, "" )
)
) {
var obj = eval ( "(" + json + ")" ) ;
}
3.2.第二种:Function
核心:Function与eval有相同的字符串参数特性。
var jsonStr = '{ "age": 20, "name": "jack" }'
var json = ( new Function ( 'return ' + jsonStr) ) ( ) ;
4. 实现一个call或 apply
4.1 Function.call按套路实现
将函数设为对象的属性 执行&删除这个函数 指定this到函数并传入给定参数执行函数 如果不传入参数,默认指向为 window
4.1.1.简单版
var foo = {
value: 1 ,
bar: function ( ) {
console. log ( this . value)
}
}
foo. bar ( )
4.1.2.完善版
Function. prototype. call2 = function ( content = window) {
content. fn = this ;
let args = [ ... arguments] . slice ( 1 ) ;
let result = content. fn ( ... args) ;
delete content. fn;
return result;
}
let foo = {
value: 1
}
function bar ( name, age) {
console. log ( name)
console. log ( age)
console. log ( this . value) ;
}
bar. call2 ( foo, 'black' , '18' )
4.2Function.apply的模拟实现
apply()的实现和call()类似,只是参数形式不同。直接贴代码吧:
Function. prototype. apply2 = function ( context = window) {
context. fn = this
let result;
if ( arguments[ 1 ] ) {
result = context. fn ( ... arguments[ 1 ] )
} else {
result = context. fn ( )
}
delete context. fn
return result
}
5.实现一个Function.bind()
会创建一个新函数。当这个新函数被调用时,bind() 的第一个参数将作为它运行时的 this,之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )此外,bind实现需要考虑实例化后对原型链的影响。
Function. prototype. bind2 = function ( content) {
if ( typeof this != "function" ) {
throw Error ( "not a function" )
}
let fn = this ;
let args = [ ... arguments] . slice ( 1 ) ;
let resFn = function ( ) {
return fn. apply ( this instanceof resFn ? this : content, args. concat ( ... arguments) )
}
return resFn;
}
let foo = {
value: 1
}
function bar ( name, age) {
console. log ( name)
console. log ( age)
console. log ( this . value) ;
}
bar. bind2 ( foo, 'black' , '18' ) ( )
6. 实现一个继承
一般只建议写这种,因为其它方式的继承会在一次实例中调用两次父类的构造函数或有其它缺点。
核心实现是:用一个 F 空的构造函数去取代执行了 Parent 这个构造函数。
function Parent ( name) {
this . name = name;
}
Parent. prototype. sayName = function ( ) {
console. log ( 'parent name:' , this . name) ;
}
function Child ( name, parentName) {
Parent. call ( this , parentName) ;
this . name = name;
}
function create ( proto) {
function F ( ) { }
F . prototype = proto;
return new F ( ) ;
}
Child. prototype = create ( Parent. prototype) ;
Child. prototype. sayName = function ( ) {
console. log ( 'child name:' , this . name) ;
}
Child. prototype. constructor = Child;
var parent = new Parent ( 'father' ) ;
parent. sayName ( ) ;
var child = new Child ( 'son' , 'father' ) ;
child. sayName ( ) ;
7. 实现一个JS函数柯里化
在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术:函数柯里化的主要作用和特点就是参数复用、提前返回和延迟执行
7.1通用版
function curry ( fn, args) {
var length = fn. length;
var args = args || [ ] ;
return function ( ) {
newArgs = args. concat ( Array. prototype. slice. call ( arguments) ) ;
if ( newArgs. length < length) {
return curry. call ( this , fn, newArgs) ;
} else {
return fn. apply ( this , newArgs) ;
}
}
}
function multiFn ( a, b, c) {
return a * b * c;
}
var multi = curry ( multiFn) ;
multi ( 2 ) ( 3 ) ( 4 ) ;
multi ( 2 , 3 , 4 ) ;
multi ( 2 ) ( 3 , 4 ) ;
multi ( 2 , 3 ) ( 4 ) ;
7.2ES6骚写法
const curry = ( fn, arr = [ ] ) => ( ... args) => (
arg => arg. length === fn. length
? fn ( ... arg)
: curry ( fn, arg)
) ( [ ... arr, ... args] )
let curryTest= curry ( ( a, b, c, d) => a+ b+ c+ d)
curryTest ( 1 , 2 , 3 ) ( 4 )
curryTest ( 1 , 2 ) ( 4 ) ( 3 )
curryTest ( 1 , 2 ) ( 3 , 4 )
8.手写一个Promise
promise规范
三种状态pending| fulfilled(resolved) | rejected
当处于pending状态的时候,可以转移到fulfilled(resolved)或者rejected状态
当处于fulfilled(resolved)状态或者rejected状态的时候,就不可变
必须有一个then异步执行方法,then接受两个参数且必须返回一个promise
promise1= promise. then ( onFulfilled, onRejected)
8.1promise流程图分析
var promise = new Promise ( ( resolve, reject) => {
if ( 操作成功) {
resolve ( value)
} else {
reject ( error)
}
} )
promise. then ( function ( value) {
} , function ( value) {
} )
8.2 面试够用版
function myPromise ( constructor) {
let self= this ;
self. status= "pending"
self. value= undefined;
self. reason= undefined;
function resolve ( value) {
if ( self. status=== "pending" ) {
self. value= value;
self. status= "resolved" ;
}
}
function reject ( reason) {
if ( self. status=== "pending" ) {
self. reason= reason;
self. status= "rejected" ;
}
}
try {
constructor ( resolve, reject) ;
} catch ( e) {
reject ( e) ;
}
}
myPromise. prototype. then = function ( onFullfilled, onRejected) {
let self= this ;
switch ( self. status) {
case "resolved" :
onFullfilled ( self. value) ;
break ;
case "rejected" :
onRejected ( self. reason) ;
break ;
default :
}
}
var p= new myPromise ( function ( resolve, reject) { resolve ( 1 ) } ) ;
p. then ( function ( x) { console. log ( x) } )
8.3 大厂专供版
const PENDING = "pending" ;
const FULFILLED = "fulfilled" ;
const REJECTED = "rejected" ;
function Promise ( excutor) {
let that = this ;
that. status = PENDING ;
that. value = undefined;
that. reason = undefined;
that. onFulfilledCallbacks = [ ] ;
that. onRejectedCallbacks = [ ] ;
function resolve ( value) {
if ( value instanceof Promise ) {
return value. then ( resolve, reject) ;
}
setTimeout ( ( ) => {
if ( that. status === PENDING ) {
that. status = FULFILLED ;
that. value = value;
that. onFulfilledCallbacks. forEach ( cb => cb ( that. value) ) ;
}
} ) ;
}
function reject ( reason) {
setTimeout ( ( ) => {
if ( that. status === PENDING ) {
that. status = REJECTED ;
that. reason = reason;
that. onRejectedCallbacks. forEach ( cb => cb ( that. reason) ) ;
}
} ) ;
}
try {
excutor ( resolve, reject) ;
} catch ( e ) {
reject ( e) ;
}
}
Promise. prototype. then = function ( onFulfilled, onRejected) {
const that = this ;
let newPromise;
onFulfilled =
typeof onFulfilled === "function" ? onFulfilled : value => value;
onRejected =
typeof onRejected === "function" ? onRejected : reason => {
throw reason;
} ;
if ( that. status === FULFILLED ) {
return newPromise = new Promise ( ( resolve, reject) => {
setTimeout ( ( ) => {
try {
let x = onFulfilled ( that. value) ;
resolvePromise ( newPromise, x, resolve, reject) ;
} catch ( e) {
reject ( e) ;
}
} ) ;
} )
}
if ( that. status === REJECTED ) {
return newPromise = new Promise ( ( resolve, reject) => {
setTimeout ( ( ) => {
try {
let x = onRejected ( that. reason) ;
resolvePromise ( newPromise, x, resolve, reject) ;
} catch ( e) {
reject ( e) ;
}
} ) ;
} ) ;
}
if ( that. status === PENDING ) {
return newPromise = new Promise ( ( resolve, reject) => {
that. onFulfilledCallbacks. push ( ( value) => {
try {
let x = onFulfilled ( value) ;
resolvePromise ( newPromise, x, resolve, reject) ;
} catch ( e) {
reject ( e) ;
}
} ) ;
that. onRejectedCallbacks. push ( ( reason) => {
try {
let x = onRejected ( reason) ;
resolvePromise ( newPromise, x, resolve, reject) ;
} catch ( e) {
reject ( e) ;
}
} ) ;
} ) ;
}
} ;
9.防抖和节流
9.1防抖->input输入、按钮点击
当一次事件发生后,事件处理器要等一定阈值的时间,如果这段时间过去后 再也没有 事件发生,就处理最后一次发生的事件。假设还差 0.01 秒就到达指定时间,这时又来了一个事件,那么之前的等待作废,需要重新再等待指定时间。
function debounce ( fn, wait= 50 , immediate) {
let timer;
return function ( ) {
if ( immediate) {
fn. apply ( this , arguments)
}
if ( timer) clearTimeout ( timer)
timer = setTimeout ( ( ) => {
fn. apply ( this , arguments)
} , wait)
}
}
9.2节流->鼠标移动、页面滚动
function throttle ( fn, wait) {
let prev = new Date ( ) ;
return function ( ) {
const args = arguments;
const now = new Date ( ) ;
if ( now - prev > wait) {
fn. apply ( this , args) ;
prev = new Date ( ) ;
}
}
}
9.3 结合实践
const throttle = function ( fn, delay, isDebounce) {
let timer
let lastCall = 0
return function ( ... args) {
if ( isDebounce) {
if ( timer) clearTimeout ( timer)
timer = setTimeout ( ( ) => {
fn ( ... args)
} , delay)
} else {
const now = new Date ( ) . getTime ( )
if ( now - lastCall < delay) return
lastCall = now
fn ( ... args)
}
}
}
10.手写一个JS深拷贝
10.1乞丐版
var newObj = JSON . parse ( JSON . stringify ( someObj ) ) ;
10.2面试够用
function deepCopy ( obj) {
if ( typeof obj == "object" ) {
var result = obj. constructor == Array ? [ ] : { } ;
for ( let i in obj) {
result[ i] = typeof obj[ i] == "object" ? deepCopy ( obj[ i] ) : obj[ i] ;
}
} else {
var result = obj;
}
return result;
}
11.实现一个instanceOf
function instanceOf ( left, right) {
let proto = left. __proto__;
let prototype = right. prototype
while ( true ) {
if ( proto === null ) return false
if ( proto === prototype) return true
proto = proto. __proto__;
}
}