手写js编程题

127 阅读2分钟

手写 call

var value = 2;
var foo = {
    value: 1
}
function bar(name,age) {
    return {
        name: name,
        age: age,
        value: this.value
    }
}
Function.prototype.call2 = function(foo) {
    var foo = foo || window
    var args = []
    for(var i=1;i< arguments.length;i++) {
        args.push('arguments['+i+']')
    }
    foo.fn = this
    var result = eval('foo.fn('+ args +')')
    delete foo.fn
    return result
}
console.log(bar.call2(foo,'xiaoxiao',20))

手写 apply

var value = 2;
var foo = {
    value: 1
}
function bar(name,age) {
    return {
        name:name,
        age: age,
        value: this.value
    }
}
Function.prototype.apply2 = function(foo) {
    var foo = foo || window;
    foo.fn = this;
    var args = []
    for(var i = 0; i < arguments.length; i++) {
        args.push('arguments['+i+']')
    }
    var result = eval('foo.fn('+ args +')')
    delete foo.fn;
    return result;
}
console.log(bar.apply2(foo,['xiaoxio',18]))

手写 new

var value = 2;
var foo = {
    value: 1
}
function bar(name,age) {
    return {
        name:name,
        age: age,
        value: this.value
    }
}
Function.prototype.apply2 = function(foo) {
    var foo = foo || window;
    foo.fn = this;
    var args = []
    for(var i = 0; i < arguments.length; i++) {
        args.push('arguments['+i+']')
    }
    var result = eval('foo.fn('+ args +')')
    delete foo.fn;
    return result;
}
console.log(bar.apply2(foo,['xiaoxio',18]))function Dog(name,age) {
    this.name = name
    this.age = age
} 
Dog.prototype.bark = function() {
    console.log('wangwang')
}
Dog.prototype.sayName = function() {
    console.log('my_name_is',this.name)
}

function _new(Fn) {
    //创建一个新的对象obj
    //obj的__proto__指向构造函数的原型
    //将构造函数的this指向这个对象
    //返回构造函数返回的类型

    let obj = {};
    obj.__proto__ = Fn.prototype;
    // let obj = Object.create(Fn.prototype) //意思是obj.__proto__指向Fn.prototype
    let args = Array.prototype.slice.call(arguments,1)
    let result = Fn.apply(obj,args);
    return typeof result == 'object' ? result : obj //如果构造函数有返回值,就返回,否则就返回obj
}
let sanmapo = _new(Dog,'三毛',18)
console.log(sanmapo)

手写 bind

var foo ={
    value: 1
}
function bar(name,age) {
    console.log(name)
    console.log(age)
    console.log(this.value)
}
Function.prototype.bind2 = function(foo) {
    var bar = this;
    console.log(arguments)
    var args = Array.prototype.slice.call(arguments,1) //把类数组arguments转成数组,并且输出下标1之后的
    return function() {
        var bindArgs = Array.prototype.slice.call(arguments)
        return bar.apply(foo,args.concat(bindArgs))
    }
}
var bindFoo = bar.bind2(foo,'shiyueyue')
bindFoo(18)

手写防抖 debounce

var count = 1;
var container = document.getElementById('container')
function getUserAction() {
  container.innerHTML = count++
}
function demounce(func,wait) {
  var timeout;
  return function() {
    var context = this;
    var args = arguments;
    clearInterval(timeout)
    timeout = setTimeout(function() {
      func.apply(context,args)
    },wait)
    
  }
}
container.onmousemove = demounce(getUserAction,1000)

手写节流 throttle

var count = 1;
var container = document.getElementById('container')
function getUserAction() {
  container.innerHTML = count++
}

function throttle(func, wait) {
    var timeout;

    return function() {
        context = this;
        args = arguments;
        if (!timeout) {
            timeout = setTimeout(function(){
                timeout = null;
                func.apply(context, args)
            }, wait)
        }

    }
}
container.onmousemove = throttle(getUserAction,3000)

深拷贝 deepcopy

function deepcopy(obj) {
    if(typeof obj !== 'object') return
    var newObj = obj instanceof Array ? [] : {}
    for(var key in obj) {
        if (typeof obj[key] == 'object') {
            newObj[key] = deepcopy(obj[key])
        } else {
            newObj[key] = obj[key]
        }
    }
    return newObj
}
var arr = ['old',1, {old:1} ]
var newObj = deepcopy(arr)
newObj[2].old = 2
console.log(arr)
console.log(newObj)

数组扁平化 flatten

//递归的方法
function flatten(arr) {
    var result = []
    for(var i=0;i<arr.length;i++) {
        if (Array.isArray(arr[i])) {
            result = result.concat(flatten(arr[i]))
        } else {
            result.push(arr[i])
        }
    }
    return result
}

var arr = [1, [2, 3, [4]]]
console.log(flatten(arr))

函数柯里化

function curry(add) {
    var args = Array.prototype.slice.call(arguments,1)
    return function() {
        var afterArgs = Array.prototype.slice.call(arguments)
        return add.apply(this,args.concat(afterArgs))
    }
}
function add(a,b) {
    return a + b
}
var a = curry(add,1)
console.log(a(2))
// console.log(a)