js의 호출, 적용, 바인딩의 차이점과 원리, 확장 기능의 고급 적용

머리말

면접 과정에서 새로운 지식을 확장할 수 있는 새로운 질문이 많이 등장하고, 학업에서 간과했던 점도 발견하게 될 것입니다.

이틀 전 면접에서 면접관님이 call, Apply, Bind의 차이점에 대해 질문하셨습니다. 사실 면접관이 더 묻고 싶은 것이 무엇인지, 즉 확장된 것이 무엇인지도 이해해야 한다.

---

call

call은 모든 함수에서 호출할 수 있는 메소드입니다. Function.prototypeFunction.prototype里的方法

作用

1. 调用函数

2. 改变this，作为第一个参数

3. 传递参数，第二个参数之后的所有个数的参数

案例

function fn1(){
    console.log(1);
}
function fn2(){
    console.log(2);
}
fn1.call(fn2); //输出 1
fn1.call.call(fn2); //输出 2

解析：
第一行输出，调用了fn1并将this指向fn2
第二行输出，事实上，执行的call()才是关键，这里就涉及了Function.prototype.call()的机制，它只是把.call()之前的代码段当作一个变量，将传递的代码段指向this，则fn1.call指向了fn2，于是就相对于fn2.call()，只是这里传递的this为window

运用

• 继承的方法

    function Father(uname,age){
        this.uname= uname;
        this.age=age;
    }
    Father.prototype={
        constructor:Father,
        sing:function(){
            console.log("唱跳rap");
        }
    }
    function Son(){
        Father.call(this,uname,age)
    }
    Son.prototype=new Father();

apply

apply同样也是所有函数都能调用的方法，是Function.prototype里的方法

作用

1. 调用函数

2. 改变this

3. 传递参数，第二个参数之后的所有数组参数

与call的区别

apply第二个参数是Array，而call是将参数以个数的形式传入

运用

• 运用Math函数获取最大值

    let arr=Array.of(2,42,56,89,1,24,56,22)
    let max=Math.max.apply(Math,arr)
    console.log(max);

bind

bind同样也是所有函数都能调用的方法，是Function.prototype里的方法

作用

1. 改变this

2. 传递参数，第二个参数之后的所有个数参数

3. 返回新函数

与call、apply的区别

与前两者的最大不同就是不会调用函数并且修改后返回新的函数

运用

let btns=document.querySelectorAll("button")
for(let btn of btns){
    btn.onclick=function(){
        this.disabled=true;
        setTimeout(function(){
            this.disabled=false;
        }.bind(this),2000);
    }
}

上面的案例修改了定时器的this，同时不会调用函数。但事实上如果你用了箭头函数的写法，因箭头函数的this是关乎上下文的this，因此会简单许多，这个案例意在给我们理解bind

function

1. 함수 호출에 있는 메소드입니다. li>
2. 이것을 첫 번째 매개변수로 변경하세요🎜
3. 🎜매개변수를 전달하고, 두 번째 매개변수 다음에는 모든 매개변수를 전달하세요🎜

🎜Case🎜

let btns=document.querySelectorAll("button")
for(let btn of btns){
    btn.onclick=function(){
        this.disabled=true;
        setTimeout(()=>{
            this.disabled=false;
        },2000);
    }
}

🎜🎜Analytics🎜 :
출력의 첫 번째 줄은 fn1을 호출하고 this가 fn2를 가리킵니다.
사실 출력의 두 번째 줄은 , call() 실행이 핵심입니다. 여기에는 .call()을 변환하는 <code>Function.prototype.call() 메커니즘이 포함됩니다. code> 앞의 코드 세그먼트는 변수로 처리되고 전달된 코드 세그먼트는 this를 가리키고 fn1.call은 fn2를 가리키므로 fn2.call()이지만 여기에 전달된 this는 window🎜🎜🎜

• 🎜🎜rrreee에서 상속된 메서드입니다. li>🎜apply🎜🎜apply도 모든 함수에서 호출할 수 있는 메소드입니다. Function.prototype🎜🎜function🎜
  1. 🎜call에 있는 메소드입니다. function🎜
  2. 🎜Change this🎜
  3. 🎜매개변수 전달, 두 번째 매개변수 뒤의 모든 배열 매개변수🎜
  🎜와 call🎜🎜의 차이점은 적용 두 번째 매개변수는 Array 이고 호출은 숫자 형식으로 매개변수를 전달하는 것입니다🎜🎜Use🎜
  • 🎜Math 함수를 사용하여 최대값을 얻으세요🎜rrreee
  🎜bind🎜 🎜bind도 모든 함수에 동일합니다. 호출할 수 있는 메소드는 Function.prototype🎜🎜function🎜
  1. 🎜change this🎜
  2. 에 있는 메소드입니다. 🎜두 번째 매개변수 이후 매개변수 전달 모든 숫자 매개변수🎜
  3. 🎜새 함수 반환🎜
  🎜호출과 적용의 차이점🎜🎜처음 두 매개변수와의 가장 큰 차이점은 함수가 호출되지 않고 수정 후 반환됩니다. 새로운 함수 🎜🎜는 위의 🎜rrreee🎜 사례를 사용하여 함수를 호출하지 않고 타이머의 this를 수정합니다. 하지만 실제로 화살표 함수를 사용하면 화살표 함수의 this가 컨텍스트 this와 관련되어 있기 때문에 훨씬 간단해집니다. 바인딩을 이해한 후 아래 화살표 함수 작성 방법을 첨부하세요🎜rrreee🎜추천 튜토리얼: "🎜JS Tutorial🎜"🎜

위 내용은 js의 호출, 적용, 바인딩의 차이점과 원리, 확장 기능의 고급 적용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!