2019前端面试系列——JS高频手写代码题

 

实现 new 方法

/*


    

  • 

    1.创建一个空对象
    

    • 

  • 

    2.链接到原型
    

    • 

  • 

    3.绑定this值
    

    • 

  • 

    4.返回新对象
    
*/
    
// 第一种实现
    
function createNew() {
    
let obj = {}  // 1.创建一个空对象
    

    let constructor = [].shift.call(arguments)
    
// let [constructor,...args] = [...arguments]
    

    obj.proto = constructor.prototype  // 2.链接到原型
    

    let result = constructor.apply(obj, arguments)  // 3.绑定this值
    
// let result = constructor.apply(obj, args)
    

    return typeof result === 'object' ? result : obj  // 4.返回新对象
    
}
    

    • 



function People(name,age) {

this.name = name

this.age = age

}


let peo = createNew(People,'Bob',22)

console.log(peo.name)

console.log(peo.age)

实现 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(this.value)
        break
      case 'rejected':
        onRejected(this.value)
        break
      default:
    }
  }
}

实现一个 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
}

实现一个 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
}

实现一个 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))
    }
  }
}

更多介绍：bind方法的实现

浅拷贝、深拷贝的实现

浅拷贝：

// 1. ...实现

let copy1 = {...{x:1}}


// 2. Object.assign实现

let copy2 = Object.assign({}, {x:1})

深拷贝：

// 1. JOSN.stringify()/JSON.parse()  

// 缺点：拷贝对象包含 正则表达式，函数，或者undefined等值会失败

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

}

实现一个节流函数

// 思路：在规定时间内只触发一次

function throttle (fn, delay) {

// 利用闭包保存时间

let prev = Date.now()

return function () {

let context = this

let arg = arguments

let now = Date.now()

if (now - prev >= delay) {

fn.apply(context, arg)

prev = Date.now()

}

}

}


function fn () {

console.log('节流')

}

addEventListener('scroll', throttle(fn, 1000))

实现一个防抖函数

// 思路:在规定时间内未触发第二次，则执行

function debounce (fn, delay) {

// 利用闭包保存定时器

let timer = null

return function () {

let context = this

let arg = arguments

// 在规定时间内再次触发会先清除定时器后再重设定时器

clearTimeout(timer)

timer = setTimeout(function () {

fn.apply(context, arg)

}, delay)

}

}


function fn () {

console.log('防抖')

}

addEventListener('scroll', debounce(fn, 1000))

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__
  }
}

柯里化函数的实现

柯里化函数的定义：将多参数的函数转换成单参数的形式。
柯里化函数实现的原理：利用闭包原理在执行可以形成一个不销毁的作用域，然后把需要预先处理的内容都储存在这个不销毁的作用域中，并且返回一个最少参数函数。

第一种：固定传入参数，参数够了才执行

/**


    

  • 实现要点：柯里化函数接收到足够参数后，就会执行原函数，那么我们如何去确定何时达到足够的参数呢？
    • 

  • 柯里化函数需要记住你已经给过他的参数，如果没给的话，则默认为一个空数组。
    • 

  • 接下来每次调用的时候，需要检查参数是否给够，如果够了，则执行fn，没有的话则返回一个新的 curry 函数，将现有的参数塞给他。
    • 

  • 



*/

// 待柯里化处理的函数

let sum = (a, b, c, d) => {

return a + b + c + d

}


// 柯里化函数，返回一个被处理过的函数 

let curry = (fn, ...arr) => {  // arr 记录已有参数

return (...args) => {   // args 接收新参数

if (fn.length <= (...arr,...args)) {  // 参数够时，触发执行

return fn(...arr, ...args)

} else {  // 继续添加参数

return curry(fn, [...arr, ...args])

}

}

}


var sumPlus = curry(sum)

sumPlus(1)(2)(3)(4)

sumPlus(1, 2)(3)(4)

sumPlus(1, 2, 3)(4)

第二种：不固定传入参数，随时执行

/**


    

  • 当然了，柯里化函数的主要作用还是延迟执行，执行的触发条件不一定是参数个数相等，也可以是其他的条件。
    • 

  • 例如参数个为0的情况，那么我们需要对上面curry函数稍微做修改
    
*/
    
// 待柯里化处理的函数
    
let sum = arr => {
    
return arr.reduce((a, b) => {
    
return a + b
    
})
    
}
    • 



let curry = (fn, ...arr) => {  // arr 记录已有参数

return (...args) => {  // args 接收新参数

if (args.length === 0) {  // 参数为空时，触发执行

return fn(...arr, ...args)

} else {  // 继续添加参数

return curry(fn, ...arr, ...args)

}

}

}


var sumPlus = curry(sum)

sumPlus(1)(2)(3)(4)()

sumPlus(1, 2)(3)(4)()

sumPlus(1, 2, 3)(4)()

参考链接：js如何用一句代码实现函数的柯里化（ES6）

Object.create 的基本实现原理

复制// 思路：将传入的对象作为原型
function create(obj) {
  function F() {}
  F.prototype = obj
  return new F()
}

实现一个基本的 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

实现一个双向数据绑定

复制let obj = {}
let input = document.getElementById('input')
let span = document.getElementById('span')
// 数据劫持
Object.defineProperty(obj, 'text', {
  configurable: true,
  enumerable: true,
  get() {
    console.log('获取数据了')
  },
  set(newVal) {
    console.log('数据更新了')
    input.value = newVal
    span.innerHTML = newVal
  }
})
// 输入监听
input.addEventListener('keyup', function(e) {
  obj.text = e.target.value
})

详细的实现见：这应该是最详细的响应式系统讲解了

实现一个简单路由

复制// hash路由
class Route{
  constructor(){
    // 路由存储对象
    this.routes = {}
    // 当前hash
    this.currentHash = ''
    // 绑定this，避免监听时this指向改变
    this.freshRoute = this.freshRoute.bind(this)
    // 监听
    window.addEventListener('load', this.freshRoute, false)
    window.addEventListener('hashchange', this.freshRoute, false)
  }
  // 存储
  storeRoute (path, cb) {
    this.routes[path] = cb || function () {}
  }
  // 更新
  freshRoute () {
    this.currentHash = location.hash.slice(1) || '/'
    this.routes[this.currentHash]()
  }
}

实现懒加载


  
  • ""
    • 
  
  • ""
    • 
  
  • ""
    • 
  
  • ""
    • 
  
  • ""
    • 
  
  • ""
    • 
  
  • ""
    • 
  
  • ""
    • 
  
  • ""
    • 

">复制    <ul>
  <li><img src="./imgs/default.png" data="./imgs/1.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/2.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/3.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/4.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/5.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/6.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/7.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/8.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/9.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/10.png" alt=""></li>
</ul>

    复制let imgs =  document.querySelectorAll('img')
// 可视区高度
let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
function lazyLoad () {
  // 滚动卷去的高度
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  for (let i = 0; i < imgs.length; i ++) {
    // 图片在可视区冒出的高度
    let x = clientHeight + scrollTop - imgs[i].offsetTop
    // 图片在可视区内
    if (x > 0 && x < clientHeight+imgs[i].height) {
      imgs[i].src = imgs[i].getAttribute('data')
    }
  }
}
// addEventListener('scroll', lazyLoad) or setInterval(lazyLoad, 1000)

    rem 基本设置

    复制// 提前执行，初始化 resize 事件不会执行
setRem()
// 原始配置
function setRem () {
  let doc = document.documentElement
  let width = doc.getBoundingClientRect().width
  let rem = width / 75
  doc.style.fontSize = rem + 'px'
}
// 监听窗口变化
addEventListener("resize", setRem)

    手写实现 AJAX

    // 1. 简单流程
    

    // 实例化
    
let xhr = new XMLHttpRequest()
    
// 初始化
    
xhr.open(method, url, async)
    
// 发送请求
    
xhr.send(data)
    
// 设置状态变化回调处理请求结果
    
xhr.onreadystatechange = () => {
    
if (xhr.readyStatus === 4 && xhr.status === 200) {
    
console.log(xhr.responseText)
    
}
    
}
    

    // 2. 基于promise实现
    

    function ajax (options) {
    
// 请求地址
    
const url = options.url
    
// 请求方法
    
const method = options.method.toLocaleLowerCase() || 'get'
    
// 默认为异步true
    
const async = options.async
    
// 请求参数
    
const data = options.data
    
// 实例化
    
const xhr = new XMLHttpRequest()
    
// 请求超时
    
if (options.timeout && options.timeout > 0) {
    
xhr.timeout = options.timeout
    
}
    
// 返回一个Promise实例
    
return new Promise ((resolve, reject) => {
    
xhr.ontimeout = () => reject && reject('请求超时')
    
// 监听状态变化回调
    
xhr.onreadystatechange = () => {
    
if (xhr.readyState == 4) {
    
// 200-300 之间表示请求成功，304资源未变，取缓存
    
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
    
resolve && resolve(xhr.responseText)
    
} else {
    
reject && reject()
    
}
    
}
    
}
    
// 错误回调
    
xhr.onerror = err => reject && reject(err)
    
let paramArr = []
    
let encodeData
    
// 处理请求参数
    
if (data instanceof Object) {
    
for (let key in data) {
    
// 参数拼接需要通过 encodeURIComponent 进行编码
    
paramArr.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
    
}
    
encodeData = paramArr.join('&')
    
}
    
// get请求拼接参数
    
if (method === 'get') {
    
// 检测url中是否已存在 ? 及其位置
    
const index = url.indexOf('?')
    
if (index === -1) url += '?'
    
else if (index !== url.length -1) url += '&'
    
// 拼接url
    
url += encodeData
    
}
    
// 初始化
    
xhr.open(method, url, async)
    
// 发送请求
    
if (method === 'get') xhr.send(null)
    
else {
    
// post 方式需要设置请求头
    
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8')
    
xhr.send(encodeData)
    
}
    
})
    
}

    2019前端面试系列——CSS面试题
    2019前端面试系列——JS面试题
    2019前端面试系列——JS高频手写代码题
    2019前端面试系列——Vue面试题
    2019前端面试系列——HTTP、浏览器面试题

    【推广】 免费学中医，健康全家人
    原文地址：https://www.cnblogs.com/owenzh/p/13225384.html