소개하다.

Javascript 자체는 함수식 프로그래밍 패러다임과 대상방향 프로그래밍 패러다임의 혼합체입니다.이것은 대상을 대상으로 프로그래밍하는 기본 요소 중의 하나다.
이것은 자바스크립트에 내장된 매개 변수 중 하나입니다. 자바스크립트 함수에서 은밀하게 사용할 수 있습니다.함수를 호출할 때 자바스크립트 엔진은 막후에서 값을 전달합니다.예를 들어, 이것은 호출 함수의 대상에 대한 인용을 포함한다.이것이 바로 왜 함수 상하문이라고도 불리는가이다.

이것은 함수 호출과 관계가 있다

이것은 간단한 소개다.우리가 어떻게 해야만 이 가치의 실질을 이해할 수 있는지 깊이 있게 이해하는 것이 본고의 주요 목표이다.
함수에서 이 매개 변수의 값은 함수를 호출하는 방식에 달려 있다.네, 자바스크립트에서 함수를 호출하는 방법은 다릅니다.
우리는 4가지 방식으로 자바스크립트에서 함수를 호출할 수 있다.

일종의 기능으로-

assemble() /* assume that *assemble* is a simple javascript function*/

일종의 방법으로-

avengers.assemble() /*This ties the function call to an object 
enabling OOPS. This is also called calling a function on an 
object.*/ 

하나의 구조기로서-

new Avenger() /* This is how you create new objects in 
javascript: preceding function call with 'new'.*/

함수의 응용/호출 방법을 통해 -

smash.call(hulk); // smash is a function here.;
smash.apply(hulk);

우리는 예를 통해 하나하나 그것들을 토론할 것이다.
함수로 호출하기

// all ways to invoke a function as a function.
function assemble(){
    console.log(this); //outputs window object
}
assemble();

let assemble = function(){
    console.log(this); // outputs window object
}
assemble();

(function(){
    console.log(this); // outputs window object
})();

모든 상황에서, 우리는 컨트롤러가 창 대상을 출력하는 것을 볼 수 있다.따라서 함수를 함수로 호출할 때 함수에 있는 이 인자는 창의 대상을 인용하기 시작합니다. 이것은 브라우저에 내장된javascript 전역의 대상입니다.그러나 만약 우리가 엄격한 모드에서 코드를 실행한다면, 이러한 상황에서 이것은 정의되지 않을 것이다.

function assemble(){
    'use strict';
    console.log(this); //outputs undefined
}

메소드로 호출:
함수가 대상의 속성에 지정되면, 그것은 하나의 방법이 된다.

let avengers = {
    assemble:function(){
        console.log(this); //outputs avengers object
    }
};
avengers.assemble(); // assemble is called upon avangers.

이 예에서 Assembly는 복수자 대상의 한 방법이다.assemble가 avengers 대상으로 호출되었을 때, assemble 함수에 있는 이 매개 변수는 avengers 대상에 대한 인용을 저장하고 있음을 관찰했습니다.이것은 OOPS가 어떻게 자바스크립트에서 실현되는지 이해하게 한다.
만약 함수가 호출된다면, 함수 중의 이 매개 변수는 함수를 정의하는 대상을 가리킬 것이다.하나의 함수가 정의된 대상에 의해 호출되었을 때, 우리는 이 함수가 이미 하나의 방법으로 호출되었다고 말한다.
구조 함수로 호출하기
자바스크립트의 간단한 함수가 특정한 방식으로 호출되면 구조 함수가 됩니다.코드에 직접 들어가서 이 구체적인 방법을 이해합시다.

function Avenger(name,weapon){
    this.name = name;
    this.weapon = weapon;
}
let Thor = new Avenger('Thor','Mjolnir');

여기 보면 복수자 자체가 간단한 자바스크립트 함수야.호출할 때, 그 앞에 내장된 자바스크립트 키워드 new가 있습니다.이런 유형의 호출은 단순 함수를 구조 함수로 변환한다.그래서 우리는 함수를 구조 함수로 호출한다고 말한다.
모든 함수가 구조 함수로 호출될 때 세 가지 일이 발생한다.

메모리에 빈 자바스크립트 대상을 새로 만듭니다.

구조 함수(복수자 함수)에서 이 인자는 새로 만든 대상을 인용하기 시작합니다.

구조 함수 실행이 완료되면 새로운 구조의 대상은 새로운 연산자의 값으로 되돌아온다. 구조 함수에 되돌아오는 문장이 없어도.따라서 Thor 변수는 다음 그림과 같이 새 객체를 참조하기 시작합니다.

apply 및 call 메서드를 사용하여 호출하기
우리는 자바스크립트에서 함수가 첫 번째 유형의 대상이라는 것을 안다.따라서 속성을 지정할 수 있습니다.호출과 응용은 자바스크립트의 모든 함수에서 사용할 수 있는 내장 방법입니다.이 두 가지 기능의 작업 방식은 거의 비슷하다.
이제 코드에 다시 한 번 깊이 들어가 그 메커니즘을 이해하자.

function setQuality(...args){
    this.qualities = args;
}
let Thor = {name : 'Thor'};
let Captain = {name : 'Steve'};
setQuality.call(Captain,'diligent','persistent','motivated');

setQuality.apply(Thor,['loyal','heroic','bold'])

console.log(Thor.qualities); // outputs ['loyal','heroic','bold']
console.log(Captain.qualities); // outputs ['diligent','persistent','motivated']

위의 예에서 우리는 함수 setQuality가 있다.이 함수는args 매개 변수로 표시된 매개 변수 목록을 수락합니다.이것은 특수한 매개 변수로rest 매개 변수라고 부른다.rest 매개 변수 here 에 대한 더 많은 정보를 읽을 수 있습니다.현재args를 순수한javascript수 그룹으로 간주하고 함수에 보내는 모든 인자를 포함합니다.
이제 품질을 설정할 때call 방법을 호출하고 setQuality 자체를 호출합니다.첫 번째 논점은 setQuality다.호출은 setQuality에서 이 매개변수의 값이 됩니다.나머지 매개변수는 setQuality에 전달됩니다.call은 setQuality를 호출하는 매개 변수입니다. setQuality의args 매개 변수로 표시된 그룹에 들어갑니다.
마찬가지로 품질을 설정할 때.apply 방법을 호출할 때 setQuality 자체를 호출합니다.첫 번째 논점은 setQuality다.apply는 setQuality에서 이 매개 변수의 값이 됩니다.두 번째 논점은 품질이다.apply는 하나의 그룹입니다.이 그룹의 값은 setQuality를 호출하는 매개 변수만 표시하고 setQuality의args 매개 변수로 표시된 그룹에 들어갑니다.
호출 방법에 대한 더 많은 정보를 읽을 수 있습니다 here.
apply methodhere에 대한 더 많은 정보를 읽을 수 있습니다.

이것은 이벤트 처리 프로그램에서 실현된 것이다

이 매개변수의 값이 이벤트 처리 프로그램 역할을 하는 함수에서 어떻게 결정되는지 이해하려면 다음 예를 들겠습니다.

<button id='demo'>Click!</button>
<script>
    function Avenger(name,weapon){
        this.name = name;
        this.weapon = weapon;
        this.maxHealth = 100;
        this.displayMaxHealth = function(){
            console.log(this.maxHealth);// outputs undefined.
        }
    }
    let Thor = new Avenger('Thor','Mjolnir');
    let btn = document.getElementById('demo');
    btn.addEventListener('click',Thor.displayMaxHealth);
</script>

우리가 단추를 눌렀을 때, 컨트롤러의 출력이 100이 아니라 undefined였는데, 이것은 좀 놀랍다.이 배후의 원인은 이렇다.
addeventListener 방법에서 디스플레이 맥스 헬스 방법에 대한 인용을 전달했습니다. 이 방법은 Avenger 함수에 정의되어 있습니다.DOM에서 id가 "demo"버튼을 클릭하면 브라우저의 이벤트 처리 시스템에서 display Max Health (이벤트 처리 프로그램) 를 호출합니다.따라서 이 함수를 호출할 때 이 함수에 전달되는 값도 브라우저의 이벤트 처리 시스템에 의해 결정된다.Thor 객체가 아닌 button 요소로 설정합니다.
button 대상에 max Health라는 변수가 없기 때문에 컨트롤러에서 undefined를 출력합니다.
따라서 이벤트 프로세서에 대해 이 매개 변수는 이벤트 대상인 DOM 요소를 가리키며 브라우저의 이벤트 처리 시스템이 처리한다.
현재, 만약 우리가 정확한 값 100을 출력하고 싶다면, 자바스크립트는 우리에게 몇 가지 방법을 제공했다.
그 중 하나는 내장된bind 방법을 사용하는 것이다.이 방법은 apply와call과 같이 자바스크립트의 모든 함수에 정의되어 있습니다.함수에 이 방법을 호출하면 새 함수를 만들고 되돌려줍니다.이 새 함수는 약간의 특수한 특성이 있다.

새 함수의 주체는bind를 호출하는 함수의 주체와 같다.

또한 새 함수에서 이 매개 변수의 값은bind 방법의 첫 번째 매개 변수로 전달되는 값에 항상 귀속됩니다. 우리가 현재 어떤 방식으로 새 함수를 호출하든지.

우리가 상술한 예시를 수정할 때, 이 점은 매우 분명하게 변할 것이다.

<button id='demo'>Click!</button>
<script>
    function Avenger(name,weapon){
        this.name = name;
        this.weapon = weapon;
        this.maxHealth = 100;
        this.displayMaxHealth = function(){
            console.log(this.maxHealth);// outputs 100
        }
    }
    let Thor = new Avenger('Thor','Mjolnir');
    let btn = document.getElementById('demo');
    btn.addEventListener('click',Thor.displayMaxHealth.bind(Thor));
</script>

두 번째 방법은 화살표 함수를 사용하는 것이다.이것은 화살표 함수를 사용하는 상황에서 이 매개 변수의 값은 특정한 방식으로 확정되기 때문에 다음 절에서 토론할 것이다.

화살표 기능입니다.

화살표 함수는 ES6에서 도입된 것으로 자바스크립트에서 매우 멋진 특성이다.
화살표 함수에 자신의this값이 없습니다. 이것은javascript 엔진이 화살표 함수를 호출할 때this 매개 변수에 값을 전달하지 않는다는 것을 의미합니다.그렇다면 가치는 무엇일까
결정하셨어요?
화살표 함수의 경우 이 매개변수의 값은 선언할 때 결정됩니다.그것의 값은 성명 화살표 함수의 상하문에 의해 결정된다.이 점은 예를 통해 명확하게 변할 것이다.

function Avenger(name,weapon){
    this.name = name;
    this.weapon = weapon;
    this.maxHealth = 100;
    this.reduceHealth = () =>{
        this.maxHealth-=Math.floor(((Math.random())*100)+1);
    }
}
let Thor = new Avenger('Thor','Mjolnir');
Thor.reduceHealth();
console.log(Thor.maxHealth);// will output a numeric value.

reduceHealth 함수는 구조 함수 Avenger에서 선언하는 arrow 함수입니다.그래서 리듀스 헬스는 복수자 함수의 상하문에서 성명한 것이다.복수자는 하나의 함수이기 때문에 그 상하문을 함수 상하문이라고 부른다.복수자 함수에서 이 값은 새로운 구조의 대상을 가리킨다.현재 우리는 복수자 함수 중의 이 매개 변수의 값이 Reduce Health 함수 중의 이 매개 변수에 전달되었다고 말할 수 있다. 위의 예와 같다.
예를 하나 더 들다.

let Captain ={
    name:'Steve',
    weapon:'Shield',
    maxHealth:100,
    displayMaxHealth : () =>{
       console.log(this.maxHealth);
    }
}
Captain.displayMaxHealth(); // console outputs undefined.

왜 이 예에서 컨트롤러가 정의되지 않은 것으로 출력됩니까?이것은 이 매개 변수의 값이 화살표 함수에서 확정되기 때문이다.
이 예에서 displayMaxHealth는 Captain 객체의 한 방법입니다.앞의 예시와 달리, 그것은 함수 상하문에서 성명한 것이 아니다.Captain 객체 자체는 모든 함수 외부의 글로벌 컨텍스트에서 선언됩니다.따라서 Captain 객체에 선언된 displayMaxHealth 메서드를 글로벌 컨텍스트에서 선언이라고 합니다.
주: 전역 상하문, 전역 단계(모든 함수 이외)는 동의어입니다.
이것은 전 세계적으로 어떤 가치가 있습니까?어디 보자.

console.log(this); //this outputs global 'window' object.

따라서 displayMaxHealth는 전역 상하문에 있고 이 내부 전역 상하문 값은 창 대상이기 때문에 전역 상하문에서 이 매개 변수의 값은 displayMaxHealth 함수에 있는 이 매개 변수에 전달됩니다.
현재, 이 내부에 maxHealth가 창의 대상을 가리키고 있으며, 창의 대상은 maxHealth라는 변수를 포함하지 않습니다.이것은 왜 위의 예에서 우리의 출력이 정의되지 않았는지 설명한다.
주의: 전역 상하문에서strict 모드를 사용하면 이 값은 정의되지 않습니다.

결론

이 개념은 자바스크립트에서 가장 기본적이고 가장 중요한 개념 중의 하나이다.때때로 이 개념의 본질을 잡으려면 좀 까다로워질 때가 있다.그러나 이 개념을 완전히 이해하게 되면 장기적으로 보면 큰 도움이 될 것이다.
이 설명들이 JavaScript의 이 개념을 진정으로 이해하는 데 도움을 줄 수 있기를 바랍니다.