스스로 콜,apply,bind

콜,apply,bind

첫 번째 단계는 Function의 원형 위에 함수를 새로 만듭니다.my Apply라고 합니다

const obj = {
    name:'joy',
};

function getName() {
    console.log(this.name);
}

Function.prototype.newApply= function () {
    console.log(this);
};

getName.newApply(); //ƒ getName(){ console.log(this.name); }

이때 출력됩니다.this는 getName 함수입니다.내가 전에 쓴 문장(this의 지향을 확정)에 의하면,this 귀속의 우선순위는
화살표 함수 > new > 명시적 > 암시적 > 기본 바인딩
call, apply는 디스플레이 귀속에 속합니다. 화살표 함수와new로 대체할 수 없습니다. 그렇지 않으면 우선순위가 바뀝니다. 은식 귀속 방식만 사용할 수 있습니다.

그래서 우리는 은밀한 귀속 방식으로this의 지향을 바꾸어야 한다

const obj = {
    name:'joy'
};

function getName(){
    console.log(this.name);
}

Function.prototype.newApply= function (that) {
    that.myFn = this;
    const result = that.myFn();
    return result
};

getName.newApply(obj); //joy

여기는this의 지향을 바꾸는 기능을 초보적으로 완성하였으니, 우리 좀 보완합시다

전달 매개 변수와this 호출을 추가하지 않습니다

const obj = {
    name:'joy'
};

function getName(a,b){
    console.log(this.name,a,b);
}

Function.prototype.newApply = function (that,arg) {
    if(typeof this !== 'function'){
        throw this+'is not a function'
    }
    that = that || window; // window 
    arg = arg || [];
    that.myFn = this;
    const result = that.myFn(...arg); // , 
    delete that.myFn; // , 
    return result;
};

getName.newApply(obj,[1,2]); // joy

이런 apply가 완성되었습니다. 아직 고려하지 않은 부분이 있을 수 있지만 대략적인 기능이 모두 나왔습니다.call도 차이가 많지 않지만 전참이 같지 않습니다

const obj = {
    name:'joy'
};

function getName(a,b){
    console.log(this.name,a,b);
}

  Function.prototype.newCall = function (that, ...arg) {
            if (typeof this !== 'function') {
                throw this + 'is not a function'
            }
            that = that || window; // window 
            that.myFn = this;
            const result = that.myFn(...arg); // , 
            delete that.myFn; // , 
            return result;
        };

        getName.newApply(obj, 1, 2); // joy 1 2

이상은 apply와call이 스스로 실현하는 방식입니다.

다음 난점인 bind에 도착했습니다. bind는 좀 다릅니다.call과 apply는 귀속 직접 호출이고,bind는 귀속 불호출입니다. 귀속 후의 함수를 되돌려줍니다

그럼 직접 어플리케이션을 이용하면 되잖아

    const obj = {
        name:'joy'
    };

    function getName(){
        console.log(this.name);
    }

    Function.prototype.newBind = function (that) {
        const fn = this;
        return function () {
            fn.apply(that)
        }
    };

    getName.newBind(obj)() //joy

다시 최적화하세요

    const obj = {
        name:'joy'
    };

    function getName(){
        console.log(this.name);
    }

    Function.prototype.newBind = function (that) {
        if (typeof this !== 'function') {
            throw new TypeError('Error')
        }
        const args = [...arguments].slice(1);
        const fn = this;
        return function () {
            fn.apply(that)
        };
        //  
        return function F() {
            //  , new this 
            if (this instanceof F) {
                return new fn(...args, ...arguments)
            }
            return fn.apply(that, args.concat(...arguments))
        }
    };

    getName.newBind(obj)() //joy

콜,apply,bind를 실현하는 내용입니다.