手写代码合集 - Githubissues

call

Function.prototype.myCall = function () {
    if (typeof this !== 'function') {
        throw 'caller is not a function'
    }
    const othis = arguments[0] || window
    othis._fn = this // 获取方法
    const args = [...arguments].slice(1) // 获取参数
    const res = othis._fn(...args) // 调用方法
    // Reflect.deleteProperty(othis, '_fn') // 恢复现场 不过有必要吗？？
    return res
}

延伸学习：Reflect

apply

改造上方即可

bind

fn.bind(target[,...args])可以改变fn的this指向，返回一个新的函数。注意：

new的优先级高于bind

参数需要拼接：bind时&调用时

Function.prototype.myBind = function() {
let self = this // 获取函数对象
let args = [...args]
let context = args.shift()
return function newFn(....restArgs) {
   return self.apply(this instanceof newFn ? this : context, args.concat(restArgs))
}
}

new

如果构造函数返回的是一个对象，则返回该对象，否则返回一个新的实例对象，this指向该实例对象。

function myNew = function(Con, ...args) {
 if(typeof Con != 'function') {
     throw Con + ' is not a function'
 }
 const obj = {} // 创建新对象
 Object.setPrototypeOf(obj, Con.prototype) // 指定对象的原型对象
 const res = Con.apply(obj, args)  // 修改this指向
 return res instanceof Object ? res : obj // 处理返回值为对象的情况
}

instanceof

function myInstanceof(left, right){
    let left = Object.getPrototypeOf(left)
    let right = right.prototype
    while(left) {
       if(left === null) return false
       if(left === right) return true
       left = Object.getPrototypeOf(left)
    }
}

节流

节流是指在连续的触发事件中，间隔固定interval触发

第一种方法时间戳

function throttle1(func, wait) {
    var previous = 0
    return function () {
        var self = this
        var now = + new Date()
        if(now - previous > wait) {
            previous = now
            return func.apply(self, [...arguments])
        }
    }
}

第二种方法定时器

function throttle2(func, wait) {
    var timeout
     return function () {
         var self = this
         if(!timeout) {
             timeout = setTimeout(() => {
                timeout = null
                func.apply(self, [...arguments])
              }, wait)
          }
     }
}

防抖

防抖是指在停止触发事件后intervalms执行函数

function debounce(func, wait){
var timeout
return function () {
   var self = this
   clearTimeout(timeout)
   setTimeout(() => {
       func.apply(self,[...arguments])
    }, wait)
}
}

promise

ajax

//1.创建AJAX实例
var xhr = new XMLHttpRequest()
//2.打开URL（配置发送请求的信息）
//METHOD:HTTP请求方式
//URL:请求地址（API接口地址）
//ASYNC:设置同步或者异步，默认是TRUE异步，FALSE同步
//USER-NAME:传递给服务器的用户名
//USER-PASS:传递给服务器的密码
xhr.open('GET', 'http://url', true)
//3.监听AJAX状态，在状态为X的时候，获取服务器响应的内容
//AJAX状态码：0 1 2 3 4
xhr.onreadystatechange=function(){
if(xhr.readyState===4 && /^(2|3)\d{2}$/.test(xhr.status)){
  let result = xhr.responseText;
}
}
//4.发送请求
//SEND中放的是请求主体的内容
xhr.send(null)

数组扁平化

#### 数组去重
- 1. Set
```javascript
function unique(arr) {
    return [...new Set(arr)]
}

遍历，indexOf

function unique2(arr) {
let res = []
arr.forEach((item) => {
if(res.indexOf(item) === -1) { 
    res.push(item)
}
})
return res
}

reduce

function unique3(arr) {
return arr.reduce((prev, cur) => {
prev.indexOf(cur) !== -1 ?  prev : prev.push(cur)
return prev
}, [])
}

发布订阅

使用发布订阅模式实现一个EventBus


class EventBus {
constructor () {
this.task = {}
}
on(name, cb) {
if(!this.task[name]) {
    this.task[name] = []
}

typeof cb === 'function' && this.task[name].push(cb)
}

off(name, cb) { let taskQueque = this.task[name] if(taskQueque && taskQueque.length > 0) {

    if(typeof cb === 'function') {
        let index = taskQueque.indexOf(cb)
        index != -1 && taskQueque.splice(index, 1)
    }

    if(typeof cb === 'undefined') {
        this.task[name].length = 0
    }
}

}

emit(name, ...args) { let taskQueque = this.task[name] if(taskQueque && taskQueque.length > 0) { taskQueque.forEach((cb) => { cb(...args) }) } }

once(name, cb) { let callback = function(...args) { this.off(name, cb) cb(...args) }

typeof cb === 'function' && this.on(name, callback)

} }

moyahuang / 2020Flag

手写代码合集 #11