이 키워드는 자바스크립트에서 무엇입니까? -제1부

What is THIS keyword in JavaScript?

개발자로서 그 작업 원리를 이해하는 것이 매우 중요하다.
이 항목은 다음 두 개의 기사로 구성됩니다.

이 키워드는 무엇입니까? 그리고 서로 다른 유형의 귀속입니다.

화살표 함수와 this 키워드.

이 키워드는 단지 한 대상에 대한 인용에 불과하다.인용된 값은 현재 실행 상하문에 달려 있습니다. (호출 방법과 인원을 의미합니다.)나는 이것이 매우 곤혹스럽게 들리는 것을 알고 있기 때문에, 예를 들어, 나는 당신에게 this 키워드가 가리키는 사람을 어떻게 찾는지 설명할 것입니다.

let fullName = function () {
    return `${this.firstName} ${this.lastName}`;
};
let Person = function (firstName, lastName) {
    return {
        firstName,
        lastName,
        fullName
    };
};

let person1 = Person("Dwight", "Schrute");
let person2 = Person("Jim", "Halpert");

console.log(person1.fullName()); // Dwight Schrute
console.log(person2.fullName()); // Jim Halpert

당신은 이미 답을 얻었을 수도 있지만, 답을 이해하는 방식도 매우 중요합니까?이것은 매우 간단하다. 나도 개인적으로 이 엄지손가락 규칙을 사용하는 것을 기억한다. 항상 소유자의 대상 (방법은 누가 호출한 것) 을 보거나 원점의 왼쪽을 본다.여기, 첫 번째 출력this에서 대상.점 왼쪽은person1이기 때문에 person1.fullName() 방법에서 이것은person1의 대상을 인용하여 이름과 성씨를 되돌려줍니다.이런 유형의 귀속을 스텔스 귀속이라고 하는데, 잠시 후에 이에 대해 상세하게 설명할 것입니다.
현재 우리는 이 키워드의 몇 가지 기본 지식을 이해했고, 서로 다른 유형의 귀속을 이해하게 되었다.

1. 암시적 바인딩
대부분의 코드 라이브러리에서 이러한 유형의 연결을 볼 수 있으며, 그 작업 원리를 이해하는 것이 매우 중요하다.우리가 전에 토론한 경험의 법칙은 이런 유형의 귀속에 적용된다.예를 들어 엄지 규칙이 다음 유형의 장면에서 어떻게 작동하는지 살펴보자.

let fullName = function () {
    return `${this.firstName} ${this.lastName}`;
};
let person1Friend= {
    firstName: "Angela",
    lastName: "Martin",
    fullName
}
let person2Friend = {
    firstName: "Pam",
    lastName: "Beesly",
    fullName
}
let Person = function (firstName, lastName, friend) {
    return {
        firstName,
        lastName,
        fullName,
        friend
    };
};

let person1 = Person("Dwight", "Schrute", person1Friend);
let person2 = Person("Jim", "Halpert", person2Friend);

console.log(person1.friend.fullName()); // Angela Martin
console.log(person2.friend.fullName()); // Pam Beesly      

"left to the dot"을 보십시오. 현재 여자친구의 대상을 인용하기 때문에 fullName 방법은 이 친구의 이름과 성씨를 되돌려줍니다.
참고: 점 왼쪽에 내용이 없으면 fullName 비엄격한 모드로 전역 또는 창 객체에 자신을 바인딩합니다.이것은 전역/기본 귀속이라고 불리며, 우리는 뒤에서 상세하게 토론할 것이다.

2. 명시적 바인딩/고정 바인딩
어떤 경우 개발자로서 자바스크립트 엔진이 현재 실행 중인 상하문과 특정 대상을 연결하는 것을 특별히 알려주기를 바랍니다.너는 아마 this 방법을 들어 본 적이 있을 것이다.이 방법들은 모든 함수에 적용되니, 우리는 몇 가지 예로 상세하게 토론합시다.

전화

이 방법은 첫 번째 인자를 인용하거나 가리키는 대상으로 받아들인다.Rest 매개변수가 함수에 매개변수로 전달됩니다.

const TheOffice = {
    characters: ["Jim Halpert", "Michale Scott", "Dwight Schrute"],
};
const Friends = {
    characters: ["Joey Tribbiani", "Rachel Green", "Chandler Bing"],
};
const SiliconValley = {
    characters: ["Jin Yang", "Richard Hendricks", "Jared Dunn"],
};

const displayCharacters = function (series, channel) {
    this.characters.forEach(function (character) {
        console.log(`${character} is featured in ${series} aired on ${channel}`);
    });
};

displayCharacters.call(TheOffice, "The Office", "NBC"); 
/*
Output:
Jim Halpert is featured in The Office aired on NBC
Michale Scott is featured in The Office aired on NBC
Dwight Schrute is featured in The Office aired on NBC
*/
displayCharacters.call(Friends, "Friends", "NBC");
/*
Output:
Joey Tribbiani is featured in Friends aired on NBC
Rachel Green is featured in Friends aired on NBC
Chandler Bing is featured in Friends aired on NBC
*/
displayCharacters.call(SiliconValley, "Silicon Valley", "HBO");
/*
Output:
Jin Yang is featured in Silicon Valley aired on HBO
Richard Hendricks is featured in Silicon Valley aired on HBO
Jared Dunn is featured in Silicon Valley aired on HBO
*/

따라서 위에서 볼 수 있듯이 모든 대상이 이 시리즈의 캐릭터를 비추고 나타낸다.우리는 또한 두 개의 매개 변수 (series와 channel name) 를 전달한 다음 그것들을 call(), apply() and bind() 에 전달했다.

적용

displayCharacters 방법은 apply()와 유사하다.차이점은 apply () 방법이 쉼표로 구분된 값이 아닌 매개 변수 그룹을 받아들이는 것이다.아래의 예는 우리가 언제 사용할 수 있는지call() 방법을 설명할 것이다.

const person = { name: "John Green" };
const cars = ["Aston Martin", "Maserati", "BMW", "Alfa Romeo"];

const showCars = function (car1, car2, car3, car4) {
    console.log(`${this.name} owns ${car1}, ${car2}, ${car3} and ${car4}`);
};

showCars.apply(person, cars); /*John Green owns Aston Martin, Maserati, BMW and Alfa Romeo */

만약 우리가 상술한 예시apply 방법을 사용해야 한다면 우리는 반드시 모든 자동차 이름을 매개 변수로 전달해야 한다. 아래와 같다.

showCars.call(person, cars[0], cars[1], cars[2], cars[3]);

바인딩

이것은 call 방법과 같지만, 즉시 실행하는 것이 아니라, 나중에 호출할 수 있는 함수를 되돌려줍니다.

const TheOffice = {
    characters: ["Jim Halpert", "Michale Scott", "Dwight Schrute"],
};
const displayCharacters = function (series, channel) {
    this.characters.forEach(function (character) {
        console.log(
            `${character} is featured in ${series} aired on ${channel}`
        );
    });
};

let showTheOfficeCharacters = displayCharacters.bind(
    TheOffice,
    "The Office",
    "NBC"
);
showTheOfficeCharacters();
/*
Output:
Jim Halpert is featured in The Office aired on NBC
Michale Scott is featured in The Office aired on NBC
Dwight Schrute is featured in The Office aired on NBC
*/

3. 글로벌/윈도우/기본 바인딩
이 유형의 귀속에서 현재 실행 상하문에서 이 키워드를 찾을 수 없으면 기본적으로 이 키워드는 비엄격 모드로 전역 실행 상하문을 인용합니다.네, 이상합니다. 하지만 자바스크립트는 이렇게 작동합니다.다음 예를 들어 내가 말한 것이 전체적인 귀속이 무엇인지 봅시다.

function displayInfo () {
  console.log(`My name is ${this.name} and I am ${this.age} years old`)
}
const user = {
  name: 'John Green',
  age: 34
}
displayInfo() // My name is undefined and I am undefined years old

왜 우리가 본 것은 정의되지 않은 것입니까?예, 이것이 바로 그 작업 원리입니다. 우리는 그것을 어떠한 대상call에도 귀속시키지 않았기 때문에 기본적으로 자신을 전역에 귀속시키고 비엄격한 모드에 있기 때문에 this와 this.name는 정의되지 않은 것으로 표시됩니다.
주의: 만약 우리가 엄격한 모드에서 상술한 코드를 실행한다면, 그것은 다음과 같은 오류를 던질 것입니다.이름이랑 이거.나이는 전 세계적으로 정의된 것이 아니다.이것이 바로 개발자가 프로젝트에서 엄격한 모델을 사용하는 이유 중 하나로 의외의 수출을 피할 수 있다고 건의한 것이다.

this.name = "Alex Carey";
this.age = "30";

function displayInfo () {
  console.log(`My name is ${this.name} and I am ${this.age} years old`)
}
const user = {
  name: 'John Green',
  age: 34
}
displayInfo() // My name is Alex Carey and I am 30 years old

여기서 우리는 this.age와 this.name를 정의했기 때문에 전 세계 차원this.age에서 이 값을 나타낼 것이다.

4. JavaScript의 새 키워드displayInfo() 키워드 호출 함수를 사용할 것입니다.javascript의 역할은 새로운 공백 대상 new 을 만들고 이 대상을 인용하는 것입니다.

function Person(name, age) {
  /*
    JavaScript creates a new object
    called `this` which delegates to the Person prototype
    on failed lookups. If a function is called with the
    a new keyword, then it's this new object that interpreter
    created that this keyword is referencing.
  */

  this.name = name
  this.age = age
}

const person1 = new Person('John Green', 34)

이렇게!현재 자바스크립트의 이 키워드가 무엇인지, 그리고 자바스크립트의 다른 귀속 유형에 대해 알고 있습니다.앞에서 말한 바와 같이, 우리는 다음 글에서 어법 귀속을 소개할 것이다.
PS: 이 글을 다 읽은 후에 당신이 가장 좋아하는 편집기this 키워드를 사용해 처리하는 것을 권장합니다.