아 날로 그 구현 call, apply 및 bind

역할
apply. call. bind 는 함수 가 실 행 될 때 문맥 (this 지향) 을 바 꾸 기 위해 존재 합 니 다.
구별:

세 사람의 첫 번 째 매개 변 수 는 모두 this 의 지향

이다.

apply 의 두 번 째 매개 변 수 는 배열 이 고 call 과 bid 의 두 번 째 및 그 후의 매개 변 수 는 모두 함수 의 입 참

입 니 다.

bid 는 즉시 실행 되 는 것 이 아니 라 콜 과 apply 회

call 의 간단 한 시 뮬 레이 션 실현
생각:

함수 정 의 는 어디 에 있 습 니까?전역 에 효과 가 있 기 때문에 Function 의 원형 대상 으로 정의 합 니 다

매개 변수 수신 매개 변수?바 인 딩 함수 가 호출 되 어 두 번 째 및 그 후의 인자

를 받 습 니 다.

this 를 어떻게 명시 적 으로 연결 합 니까? 호출 된 함수 가 지정 한 대상 이 가지 고 있다 면 함수 내부 의 this 는 이 대상

을 가리 키 고 있 습 니 다.
코드 이전 판:

      Function.prototype.bind = function(context) {
           let ctx = context || window
           //     this  context
           ctx.func = this
           console.log(this, '------this')
           //     
           let args = Array.from(arguments).slice(1)
           //                  ？
           // const res = args.length ? ctx.func(...args) : ctx.func()
           const res = ctx.func(...args)
           delete ctx.func
           //     ？     OK 
           return res
       }
       let name = '   '
       function sayName() {
           console.log(this.name)
       }
       let obj = {
           name: '       '
       }
       sayName.bind(obj)

apply 의 간단 한 시 뮬 레이 션 실현
apply 의 실현 은 콜 과 같 습 니 다. 전 삼 방식 을 바 꾸 는 것 에 불과 합 니 다.

       Function.prototype.apply = function(context) {
            let ctx = context || window
            ctx.func = this
            let args = arguments[1]
            let isArray = Array.isArray(args)
            if (!isArray) {
                alert('-------          ')
                return
            }
            let res = args ? ctx.func(...args) : ctx.func()
            delete ctx.func
            return res
        }

        let name = '   '
        function sayName() {
            console.log(this.name)
        }
        let obj = {
            name: '       '
        }
        sayName.apply(obj, [12])

bid 의 시 뮬 레이 션 실현
생각:

함수 정 의 는 어디 에 있 습 니까?전역 에 효과 가 있 기 때문에 Function 의 원형 대상 으로 정의 합 니 다

매개 변수 수신 매개 변수?bind 함 수 는 귀속 함 수 를 되 돌려 줍 니 다. 최종 호출 은 함수 실 삼 과 귀속 함수 의 실 삼 을 입력 해 야 합 니 다!!

this 를 어떻게 명시 적 으로 연결 합 니까? 호출 된 함수 가 지정 한 대상 이 가지 고 있다 면 함수 내부 의 this 는 이 대상

을 가리 키 고 있 습 니 다.

      Function.prototype.bind = function(context) {
            //         ，        
            let ctx = JSON.parse(JSON.stringify(context)) || window
            ctx.func = this
            let args = Array.from(arguments).slice(1)

            return function() {
                return args.length ? ctx.func(...args) : ctx.func()
            }
        }

        let name = '   '
        function sayName() {
            console.log(this.name)
        }
        let obj = {
            name: '       '
        }
        // sayName.bind(obj)
        // sayName.apply(obj, [12])
        sayName.bind(obj)()

참고 문서