JavaScript의 this 지향 변경 내용

JS에서this가 가리키는 변경 사항
JavaScript에서 this의 지향 문제 앞에서 정리한 바와 같이 실제 장면에서 많은 장면들이this의 방향을 바꿔야 한다.지금 우리는this가 가리키는 문제를 바꾸는 문제를 토론한다.
call this 방향 변경
call의 사용 문법:func.call(thisArg, arg1, arg2, ...)
call 방법은 지정한this 값 (this가 가리키는 대상) 과 하나 이상의 매개 변수가 필요합니다.제공된this 값은 호출 함수 내부의this 방향을 변경합니다.

//   call   this  
var animal = ' ';
var times = '15 ';
function greet() {
 let str = this.animal + ' ：' + this.times;
 console.log(str);
}
var dogObj = {
 animal: ' ',
 times: '8 '
};
var pigObj = {
 animal: ' ',
 times: '13 '
}
greet(); //  ：15 
greet.call(dogObj); //  ：8 
greet.call(pigObj); //  ：13 
greet.call(); //  ：15 

함수greet를 직접 호출할 때, 함수greet 내부의this는 전역 대상 윈도우를 가리킨다.
함수greet가call() 방법을 호출하여 대상dogObj를 전달할 때 함수greet 내부의this는 대상dogObj를 가리킨다.
함수greet가call() 방법을 호출하여 대상pigObj를 전달할 때 함수greet 내부의this는 대상pigObj를 가리킨다.
call () 전참하지 않으면 엄격한 모드에서this의 값은undefined입니다.그렇지 않으면 전역 대상 Windows를 가리킵니다.
익명 함수 호출 콜 방법:

var books = [{
 name: 'CSS ',
 price: 23
}, {
 name: 'CSS ',
 price: 35
}, {
 name: 'JavaScript ',
 price: 55
}];
for (var i = 0; i < books.length; i++) {
 (function (i) {
  //  this call 
  this.printf = function () {
   console.log(`${i} ${this.name}: ￥${this.price}`);
  }
  this.printf();
 }).call(books[i], i);
}
//  ：
// 0 CSS : ￥23
// 1 CSS : ￥35
// 2 JavaScript : ￥55

call 상속 실현:

//  
function CalcA(){
 this.add = function(a, b){
  return a + b;
 }
}
//  
function CalcS(){
 this.sub = function(a, b){
  return a - b;
 }
}
//  
function Calc(){
 console.log(this); // Calc {}
 CalcA.call(this);
 CalcS.call(this);
 console.log(this); // Calc {add: ƒ, sub: ƒ}
}
var calc = new Calc();
console.log(calc.add(2, 3)); // 5
console.log(calc.sub(10, 1));// 9

구조 함수인 Calc는 콜 방법을 통해 구조 함수인 CalcA, CalcS 중의this가 Calc 자신을 가리키게 하여 그들의 속성과 방법을 계승하였다.따라서 구조 함수 Calc가 생성한 실례 대상도 구조 함수 CalcA, CalcS의 속성과 방법에 접근할 수 있다.
apply 방법this 방향 변경
apply의 사용 문법:func.apply(thisArg, [argsArray])
apply의 사용법은call방법과 유사하지만,call방법은 매개 변수 목록을 받아들이고,apply방법은 하나의 그룹이나 클래스 그룹의 대상을 받아들인다.위의 예는call을 apply로 완전히 바꿀 수 있습니다. 단지 apply 방법은 두 개의 매개 변수만 받아들일 수 있을 뿐, 두 번째 매개 변수는 하나의 수조나 클래스의 대상입니다.
bind 방법this 방향 변경
bind의 사용 문법:func.bind(thisArg, arg1, arg2, ...)
bind의 매개 변수는call과 같지만,bind는this가 가리키는 함수를 바꾸는 실례를 되돌려줍니다.

var petalNum = 100;
function Flower() {
 this.petalNum = Math.ceil(Math.random() * 10) + 1;
}
Flower.prototype.declare = function() {
 console.log(this);
 console.log('this is a beautiful flower with ' + this.petalNum + ' petals');
}
Flower.prototype.bloom = function() {
 console.log(this); // Flower {petalNum: 7}
 //   this   Window  
 window.setTimeout(this.declare, 1000);
 // bind   this，  Flower  
 window.setTimeout(this.declare.bind(this), 2000);
}
var flower = new Flower();
flower.bloom();

실례 대상flower가bloom 방법을 호출한 후bloom 내의this는 구조 함수의 원형 대상을 가리킨다.
1초 후 지연 함수는 구조 함수의 declare 방법을 호출합니다. 이때 실행 함수 declare의this는 Windows를 가리킵니다.인쇄 결과는 다음과 같습니다.

// Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
// this is a beautiful flower with 100 petals

2초 후 지연 함수는 구조 함수의declare 방법을 호출합니다. 이때 실행 함수declare는bind를 통해this(구조 함수의 원형 대상)를 연결합니다.인쇄 결과는 다음과 같습니다.

//  ， petalNum 。
// Flower {petalNum: 7}
// this is a beautiful flower with 7 petals

여기에서bind를call로 바꾸면 apply가 즉시 실행되고 지연 효과가 효력을 잃게 됩니다.
ES6 화살표 함수 this 방향 변경
화살표 함수 중의this는 함수를 정의할 때 귀속되는 것이지 함수를 실행할 때 귀속되는 것이 아니다.정의할 때 귀속한다는 것은this가 아버지가 실행하는 상하문을 계승하는this를 가리킨다.

var a = 1;
var obj = {
 a: 2,
 f1: function(){
  console.log(this.a)
 },
 f2: () => {
  console.log(this.a)
 }
}
obj.f1(); // 2
obj.f2(); // 1

obj.f1()이 실행된 후에 인쇄된 것은 2입니다. 이것은 이해하기 쉽습니다.obj가 f1 함수를 호출하면 함수 중의this는 호출 대상인obj를 가리킵니다.여기this는 함수를 실행할 때 귀속되어 있음을 알 수 있습니다.
obj.f2()가 실행된 후 인쇄된 것은 1입니다.f2는 화살표 함수입니다. 그러면 함수 중의this는 아버지가 실행하는 상하문을 계승하는this입니다.여기 화살표 함수의 부급은 대상 obj이고obj의 실행 상하문은 전역 대상 윈도우입니다. 그러면 화살표 함수 중의this는 전역 대상을 가리킵니다.
다시 한 번 예를 들자.

var a = 11;
function test() {
 this.a = 22;
 let b = () => { console.log(this.a) }
 b();
}
test(); // 22 

정의된 이해에 따라 11을 출력해야 한다. 화살표 함수 부급의 실행 상하문은 윈도우 전역 대상이기 때문에 이때 출력된 것은 전역 대상의 a이다.
우선 조급해하지 말고 천천히 분석하세요. 위의 분석이 맞습니다. 화살표 함수의this는 바로 윈도우 대상을 가리키는 것입니다.테스트 함수가 전역 환경에서 호출될 때 그 내부의this는 전역 윈도우 대상을 가리키고 코드의 this.a = 22;는 전역의 a를 다시 부여합니다. 그래서 화살표 함수가 전역 대상에서 찾은 a값은 22입니다.우리는 컨트롤러에 윈도우를 입력할 수 있다.a 전역 대상의 a값을 보면 결과가 22를 출력하기 때문에 화살표 함수에서 출력된 결과가 왜 22인지 이해하기 어렵지 않습니다.코드의 this.a = 22; 를 var a = 22; 로 수정하면 화살표 함수에서 출력된 결과는 11입니다.
화살표 함수는 외부 함수에서 호출된this 귀속을 계승합니다. 이것은 var self = this;의 귀속 메커니즘과 같습니다.화살표 함수에서this는 고정화를 가리키는데 화살표 함수는 자신의this가 없기 때문에 구조 함수로 사용할 수 없다.
JavaScript에서this의 지향 변경에 대한 간단한 설명을 드리겠습니다. 더 많은 JavaScript에서this의 지향 변경 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!