javascript面试题(3)手写

朴灿烈づ我的快乐病毒、 2023-02-23 09:29 1阅读 0赞

*  [实现 new 方法][new]
 *  [实现 Promise][Promise]
 *  [实现一个 call 函数][call]
 *  [实现一个 apply 函数][apply]
 *  [实现一个 bind 函数][bind]
 *  [浅拷贝、深拷贝的实现][Link 1]
 *  [实现一个节流函数][Link 2]
 *  [实现一个防抖函数][Link 3]
 *  [instanceof 的原理][instanceof]
 *  [柯里化函数的实现][Link 4]
 *  [Object.create 的基本实现原理][Object.create]
 *  [实现一个基本的 Event Bus][Event Bus]
 *  [实现一个双向数据绑定][Link 5]
 *  [实现一个简单路由][Link 6]
 *  [实现懒加载][Link 7]
 *  [rem 基本设置][rem]
 *  [手写实现 AJAX][AJAX]

[回到顶部][Link 8]

### 实现 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)

[回到顶部][Link 8]

### 实现 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:
        }
      }
    }

[回到顶部][Link 8]

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

[回到顶部][Link 8]

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

[回到顶部][Link 8]

### 实现一个 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方法的实现][bind 1]

[回到顶部][Link 8]

### 浅拷贝、深拷贝的实现 ###

浅拷贝：

复制// 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
    }

[回到顶部][Link 8]

### 实现一个节流函数 ###

复制// 思路：在规定时间内只触发一次
    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))

[回到顶部][Link 8]

### 实现一个防抖函数 ###

复制// 思路:在规定时间内未触发第二次，则执行
    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))

[回到顶部][Link 8]

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

[回到顶部][Link 8]

### 柯里化函数的实现 ###

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

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

复制/**
     * 实现要点：柯里化函数接收到足够参数后，就会执行原函数，那么我们如何去确定何时达到足够的参数呢？
     * 柯里化函数需要记住你已经给过他的参数，如果没给的话，则默认为一个空数组。
     * 接下来每次调用的时候，需要检查参数是否给够，如果够了，则执行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）][js_ES6]

[回到顶部][Link 8]

### Object.create 的基本实现原理 ###

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

[回到顶部][Link 8]

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

[回到顶部][Link 8]

### 实现一个双向数据绑定 ###

复制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
    })

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

[回到顶部][Link 8]

### 实现一个简单路由 ###

复制// 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]()
      }
    }

[回到顶部][Link 8]

### 实现懒加载 ###

复制<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)

[回到顶部][Link 8]

### 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)

[回到顶部][Link 8]

### 手写实现 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_CSS]  
[2019前端面试系列——JS面试题][2019_JS]  
[2019前端面试系列——JS高频手写代码题][2019_JS 1]  
[2019前端面试系列——Vue面试题][2019_Vue]  
[2019前端面试系列——HTTP、浏览器面试题][2019_HTTP]

[new]: https://www.cnblogs.com/chenwenhao/p/11294541.html#_label0
[Promise]: https://www.cnblogs.com/chenwenhao/p/11294541.html#_label1
[call]: https://www.cnblogs.com/chenwenhao/p/11294541.html#_label2
[apply]: https://www.cnblogs.com/chenwenhao/p/11294541.html#_label3
[bind]: https://www.cnblogs.com/chenwenhao/p/11294541.html#_label4
[Link 1]: https://www.cnblogs.com/chenwenhao/p/11294541.html#_label5
[Link 2]: https://www.cnblogs.com/chenwenhao/p/11294541.html#_label6
[Link 3]: https://www.cnblogs.com/chenwenhao/p/11294541.html#_label7
[instanceof]: https://www.cnblogs.com/chenwenhao/p/11294541.html#_label8
[Link 4]: https://www.cnblogs.com/chenwenhao/p/11294541.html#_label9
[Object.create]: https://www.cnblogs.com/chenwenhao/p/11294541.html#_label10
[Event Bus]: https://www.cnblogs.com/chenwenhao/p/11294541.html#_label11
[Link 5]: https://www.cnblogs.com/chenwenhao/p/11294541.html#_label12
[Link 6]: https://www.cnblogs.com/chenwenhao/p/11294541.html#_label13
[Link 7]: https://www.cnblogs.com/chenwenhao/p/11294541.html#_label14
[rem]: https://www.cnblogs.com/chenwenhao/p/11294541.html#_label15
[AJAX]: https://www.cnblogs.com/chenwenhao/p/11294541.html#_label16
[Link 8]: https://www.cnblogs.com/chenwenhao/p/11294541.html#_labelTop
[bind 1]: https://www.jianshu.com/p/9d75886102a7
[js_ES6]: https://www.jianshu.com/p/c87242cd2f6c
[Link 9]: https://juejin.im/post/5d26e368e51d4577407b1dd7
[2019_CSS]: https://www.cnblogs.com/chenwenhao/p/11217590.html
[2019_JS]: https://www.cnblogs.com/chenwenhao/p/11253403.html
[2019_JS 1]: https://www.cnblogs.com/chenwenhao/p/11294541.html
[2019_Vue]: https://www.cnblogs.com/chenwenhao/p/11258895.html
[2019_HTTP]: https://www.cnblogs.com/chenwenhao/p/11267238.html