이 기사에서는 호출, 적용 및 바인드 메소드 구현에 대한 심층적인 이해를 제공합니다.-JS 튜토리얼-php.cn

이 글에서는 코드 예제를 사용하여 호출, 적용 및 바인딩 구현 방법에 대한 심층 분석을 제공합니다. 이러한 메소드의 구체적인 사용법은 MDN 또는 사이트의 기사에 이미 명확하게 설명되어 있으므로 생략하겠습니다. 여기서 자세히 설명하지 마세요.

이 기사에서는 호출, 적용 및 바인드 메소드 구현에 대한 심층적인 이해를 제공합니다.

call 직접 구현

ES3 버전

Function.prototype.myCall = function(thisArg){
    if(typeof this != &#39;function&#39;){
        throw new Error(&#39;The caller must be a function&#39;)
    }
     if(thisArg === undefined || thisArg === null){
        thisArg = globalThis
    } else {
        thisArg = Object(thisArg)
    }   
    var args = []
    for(var i = 1;i < arguments.length;i ++){
        args.push(&#39;arguments[&#39; + i + &#39;]&#39;)
    }
    thisArg.fn = this
    var res = eval(&#39;thisArg.fn(&#39; + args + &#39;)&#39;)
    delete thisArg.fn
    return res
}

로그인 후 복사

ES6 버전

Function.prototype.myCall = function(thisArg,...args){
    if(typeof this != &#39;function&#39;){
        throw new Error(&#39;The caller must be a function&#39;)
    }
    if(thisArg === undefined || thisArg === null){
        thisArg = globalThis
    } else {
        thisArg = Object(thisArg)
    }
    thisArg.fn = this
    const res = thisArg.fn(...args)
    delete thisArg.fn
    return res
}

로그인 후 복사

call을 통해 함수를 호출할 때 에 전달할 수 있습니다. >call 의 thisArg는 함수에서 이를 지정합니다. 그리고 이는 우리의 주요 목표인 thisArg를 통해 함수가 호출되는 한 달성될 수 있습니다. call 调用函数的时候，可以通过传给 call 的 thisArg 指定函数中的 this。而只要使得函数是通过 thisArg 调用的，就能实现这一点，这就是我们的主要目标。

实现要点

最终是通过函数去调用 myCall 的，所以 myCall 和 call 一样挂载在函数原型上。同时，也正因为是通过函数去调用 myCall 的，所以在 myCall 内部我们可以通过 this 拿到 myCall的调用者，也就是实际执行的那个函数。
按理说，myCall 是挂载在函数原型上，当我们通过一个非函数去调用 myCall 的时候，肯定会抛出错误，那么为什么还要在 myCall 中检查调用者的类型，并自定义一个错误呢？这是因为，当一个调用者 obj = {} 是一个对象，但是继承自 Function 的时候（obj.__proto__ = Function.prototype），它作为一个非函数实际上也是可以调用 myCall 方法的，这时候如果不进行类型检查以确保它是个函数，那么后面直接将它当作函数调用的时候，就会抛出错误了
传给 call 的 thisArg 如果是 null 或者 undefined，那么 thisArg 实际上会指向全局对象；如果 thisArg 是一个基本类型，那么可以使用 Object() 做一个装箱操作，将其转化为一个对象 —— 主要是为了确保后续可以以方法调用的方式去执行函数。那么可不可以写成 thisArg = thisArg ? Object(thisArg) : globalThis 呢？其实是不可以的，如果 thisArg 是布尔值 false，那么会导致 thisArg 最终等于 globalThis，但实际上它应该等于 Boolean {false}。
前面说过，可以在 myCall 里通过 this 拿到实际执行的那个函数，所以 thisArg.fn = this 相当于将这个函数作为 thisArg 的一个方法，后面我们就可以通过 thisArg 对象去调用这个函数了。
thisArg.fn = this 相当于是给 thisArg 增加了一个 fn 属性，所以返回执行结果之前要 delete 这个属性。此外，为了避免覆盖 thisArg 上可能存在的同名属性 fn，这里也可以使用 const fn = Symbol('fn') 构造一个唯一属性，然后 thisArg[fn] = this。
ES3 版本和 ES6 版本主要的区别在于参数的传递以及函数的执行上：
- ES6 因为引入了剩余参数，所以不管实际执行函数的时候传入了多少个参数，都可以通过 args 数组拿到这些参数，同时因为引入了展开运算符，所以可以展开 args 参数数组，把参数一个个传递给函数执行
- 但在 ES3 中没有剩余参数这个东西，所以在定义 myCall 的时候只接收一个 thisArg 参数，然后在函数体中通过 arguments 类数组拿到所有参数。我们需要的是 arguments 中除第一个元素（thisArg）之外的所有元素，怎么做呢？如果是 ES6，直接[...arguments].slice(1)
- 구현 포인트
myCall이 함수 프로토타입에 탑재되어 있는 것은 당연합니다. 함수가 아닌 것을 통해 myCall을 호출하면 오류가 발생합니다. ? 또한 myCall에서 호출자의 유형을 확인하고 사용자 정의 오류를 정의하시겠습니까? 이는 호출자 obj = {}가 객체이지만 Function(obj.__proto__ = Function.prototype</code >)에서 상속받는 경우, 함수가 아닌 경우 실제로 <code>myCall 메서드를 호출할 수 있습니다. 이때 함수인지 확인하기 위한 유형 검사가 수행되지 않으면 나중에 함수로 직접 호출될 때 오류가 발생합니다
🎜call에 전달된 thisArg가 null이거나 정의되지 않은 경우 thisArg는 실제로 전역 객체를 가리킵니다. thisArg가 기본 유형이면 Object는 Used()는 박싱 작업을 수행하고 이를 개체로 변환합니다. 이는 주로 나중에 메서드 호출을 통해 함수가 실행될 수 있도록 보장하기 위한 것입니다. 그러면 thisArg = thisArg ? Object(thisArg) : globalThis 로 쓸 수 있나요? 실제로는 불가능합니다. thisArg가 부울 값 false인 경우 thisArg는 결국 globalThis와 같아지지만 실제로는 Boolean {false}와 같아야 합니다. 🎜🎜🎜🎜앞서 언급한 것처럼 myCall에서 this를 통해 실제로 실행되는 함수를 얻을 수 있으므로 thisArg.fn = this는 이 함수를 thisArg A 메소드로 사용하는 것과 같습니다. , 나중에 thisArg 개체를 통해 이 함수를 호출할 수 있습니다. 🎜🎜🎜🎜thisArg.fn = this는 thisArg에 fn 속성을 추가하는 것과 동일하므로 실행 결과를 반환하기 전에 이 속성을 삭제해야 합니다. 또한 thisArg에 존재할 수 있는 동일한 이름으로 fn 속성을 덮어쓰는 것을 방지하려면 const fn = Symbol('fn')을 사용하여 고유한 속성을 구성한 다음 < 코드>thisArg[fn] = this< /code>. 🎜🎜🎜🎜ES3 버전과 ES6 버전의 주요 차이점은 매개변수 전달과 함수 실행입니다. 🎜

이 기사에서는 호출, 적용 및 바인드 메소드 구현에 대한 심층적인 이해를 제공합니다.

call 직접 구현

手写实现 bind