手写JS源码之new操作符、防抖、节流、杨辉三角

/ 前端Javascript / 没有评论 / 664浏览

手写new操作符

function myNew() {
  // 创建一个新对象 obj
  const obj = new Object();
  // 取参数的第一项为构造函数fn,这里可以写(arguments,1)也可以直接(arguments),都是代表参数的第一项,取构造函数
  const fn = [].shift.call(arguments);
  
  // 将obj.__proto__连接到构造函数fn的原型
  obj.__proto__ = fn.prototype;
  // result接收构造函数执行后的返回结果
  let result = fn.apply(obj, arguments);
  // 如果构造函数返回一个对象,则将该对象返回,否则返回步骤1创建的对象
  return typeof result === 'object' ? result : obj;
}

new 操作符的作用:

创建一个新的实例对象。

新的实例对象的__proto__属性与构造函数的prototype全等。

改变this指向,使其指向新创建的实例对象。

也就是说,通过new操作符实现的实例对象,即可访问构造函数的属性,也可以访问构造函数原型上的属性。

手写防抖函数/节流函数

关注前端体验或性能优化的应该能听到防抖,节流。

防抖:在短时间内多次触发同一个函数只执行最后一次。

节流:多次触发同一个函数,同一时间内只执行一次。

函数防抖(debounce)

function debounce(fn, wait) {
    let timer = null;
    return function() {
        if (timer) clearTimeout(timer);
        let args = arguments;
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, wait);
    }
}

函数节流(throttle)

// 方法一:时间戳
function throttle(fn, delay) {
    let preTime = Date.now();
    return function() {
        const lastTime = Date.now();
        if (lastTime - preTime >= delay) {
            fn.apply(this, arguments);
            preTime = lastTime;
        }
    }
}

// 方法二:定时器实现
function throttle2(fn, delay) {
    let timer = null;
    return function() {
        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(this, arguments);
                // 执行完事件(调用完接口),清除定时器
                clearTimeout(timer);
                timer = null;
            }, delay);
        }
    }
}

手写杨辉三角

在杨辉三角中,每个数是它左上方和右上方的数的和。

function yanghui(n) {
    const dp = [...Array(n)].fill(0).map(x => [...Array(n)].fill(0));
    dp[0][0] = 1;
    for (let i = 1; i < n; i++) {
        dp[i][0] = dp[i-1][0];
        for (let j = 1; j <= i; j++) {
            dp[i][j] = dp[i-1][j-1] + dp[i-1][j];
        }
    }
    return dp;
}
yanghui(5);
// 0: (5) [1, 0, 0, 0, 0]
// 1: (5) [1, 1, 0, 0, 0]
// 2: (5) [1, 2, 1, 0, 0]
// 3: (5) [1, 3, 3, 1, 0]
// 4: (5) [1, 4, 6, 4, 1]