一些常见的手写js题目

╰+攻爆jí腚メ 2021-08-28 23:18 352阅读 0赞

1、call

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') // black 18

2、apply

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
    }

3、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) )
        }
        function tmp() {}
        tmp.prototype = this.prototype;
        resFn.prototype = new tmp();
        
        return resFn;
    }

bind2

Function.prototype.bind2 = function (context) {
        var self = this;
        var args = Array.prototype.slice.call(arguments, 1);
    
        var fbound = function () {
    
            var bindArgs = Array.prototype.slice.call(arguments);
            // 当作为构造函数时，this 指向实例，self 指向绑定函数，因为下面一句 `fbound.prototype = this.prototype;`，已经修改了 fbound.prototype 为 绑定函数的 prototype，此时结果为 true，当结果为 true 的时候，this 指向实例。
            // 当作为普通函数时，this 指向 window，self 指向绑定函数，此时结果为 false，当结果为 false 的时候，this 指向绑定的 context。
            self.apply(this instanceof self ? this : context, args.concat(bindArgs));
        }
        // 修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承函数的原型中的值
        fbound.prototype = this.prototype;
        return fbound;
    }

4、深拷贝

5、new

创建一个新的对象
    继承父类原型上的方法.
    添加父类的属性到新的对象上并初始化. 保存方法的执行结果.
    如果执行结果有返回值并且是一个对象, 返回执行的结果, 否则, 返回新创建的对象
    
    function _new(obj, ...rest){
      // 基于obj的原型创建一个新的对象
      const newObj = Object.create(obj.prototype);
    
      // 添加属性到新创建的newObj上, 并获取obj函数执行的结果.
      const result = obj.apply(newObj, rest);
    
      // 如果执行结果有返回值并且是一个对象, 返回执行的结果, 否则, 返回新创建的对象
      return typeof result === 'object' ? result : newObj;
    }

6、防抖

7、节流

8、promise

var promise = new Promise((resolve,reject) => {
        if (操作成功) {
            resolve(value)
        } else {
            reject(error)
        }
    })
    promise.then(function (value) {
        // success
    },function (value) {
        // failure
    })

9、promise  A+

10、实现一个eventBus

// 组件通信，一个触发与监听的过程
    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

11、实现一个双向数据绑定

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

12、Object.create 的基本实现原理

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

12、获取url参数

/**
     * [获取URL中的参数名及参数值的集合]
     * 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明
     * @param {[string]} urlStr [当该参数不为空的时候，则解析该url中的参数集合]
     * @return {[string]}       [参数集合]
     */
    function GetRequest(urlStr) {
        if (typeof urlStr == "undefined") {
            var url = decodeURI(location.search); //获取url中"?"符后的字符串
        } else {
            var url = "?" + urlStr.split("?")[1];
        }
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }

13、 查找数组中最小值

14、在数组中查找最大值