常见的手写js

new

new 操作符

new 的原理是什么？通过 new 的方式创建对象和通过字面量创建有什么区别？

在调用new的过程中会发生四件操作

1. 新建了一个对象
2. 新对象链接到原型对象上
3. 绑定 this
4. 返回这个新对象

function create() {
    // 1.创建一个新对象
    let obj = {};
    // 获取第一个参数，也就是获取构造函数
    let Con = [].shift.call(arguments);
    // 2.新对象继承构造函数原型对象上的所有方法
    obj.__proto__ = Con.prototype;
    // 3.构造函数的this指向新对象obj，并将剩余的参数传进去执行，得到结果result
    let result = Con.apply(obj, arguments);
    // 4.如果得到的结果是个对象的话就返回result，如果不是的话就返回对象obj
    return result instanceof Object ? result : obj;
}

关于上面代码的第四条注释：构造函数如果返回原始值，那么这个返回值毫无意义

function Test(name) {
    this.name = name;
    return 1;
}

const t = new Test("zhl");
console.log(t.name); // 'zhl'

对于创建一个对象来说，更推荐使用字面量的方式创建对象（无论性能上还是可读性）。因为你使用 new Object() 的方式创建对象需要通过作用域链一层层找到
Object，但是你使用字面量的方式就没这个问题。

instanceof 原理

instanceof 的原理是什么？

instanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype

function myInstanceof(left, right) {
    let prototype = right.prototype;
    left = left.__proto__;
    while (true) {
        if (left === null || left === undefined) return false;
        if (prototype === left) return true;
        left = left.__proto__;
    }
}

分析:

• 首先获取类型的原型
• 然后获得对象的原型
• 然后一直循环判断对象的原型是否等于类型的原型，直到对象原型为 null，因为原型链最终为 null

防抖与节流

之前看到一个很形象的比喻。节流防抖就好比乘电梯，比如 delay 是 10 秒，防抖就是电梯每进来一个人就要等 10 秒再运行，而节流就是电梯保证每
10 秒可以运行一次

手写 call、apply、bind

call 实现

Function.prototype.myCall = function (context, ...args) {
    context = context || globalThis; // 没有传入上下文，默认指向全局对象
    const mySymbol = Symbol('mySymbol') // 避免和上下文的属性名冲突
    context[mySymbol] = this // 把调用的函数赋值给上下文的属性
    const result = context[mySymbol](...args) // 调用函数
    delete context[mySymbol] // 删除上下文的属性
    return result // 返回函数的执行结果
}

apply 实现

Function.prototype.myApply = function (context, args) {
    context = context || globalThis;
    const mySymbol = Symbol('mySymbol')
    context[mySymbol] = this
    const result = context[mySymbol](...args)
    delete context[mySymbol]
    return result
}

bind 实现

Funtion.prototype.myBind = function (context, ...args) {
    const fn = this
    return function (...newArgs) {
        return fn.apply(context, args.concat(newArgs))
    }
}