JS에서 화살표 함수와this의 작법과 이해

앞말

JavaScript는 ES6 문법에 화살표 함수를 추가했습니다. 전통적인 함수에 비해 화살표 함수는 더욱 간결할 뿐만 아니라this 방면에서도 개선되었습니다.이 글은 자바스크립트에서 비교적 기괴한 존재로서 많은 글들이this에 대한 해석도 같지 않다. 이 글은 JS의 함수와this의 관계를 정리하고자 한다.

1. JS의 함수 쓰기

1. 일반 함수의 쓰기

ES6 문법에 앞서 JS의 함수는function 키워드,params 매개 변수와 괄호로 둘러싸인 함수체로 구성되어 있다.뒤에 말한 화살표 함수와 구별하기 위해서 우리는 먼저 이런 함수를 일반 함수라고 부른다. 일반 함수는 성명식으로도 쓸 수 있고 부수식으로도 쓸 수 있다.예:

function test(name) { // 
 console.log(name)
}
test('Jerry')

let test2 = function(name) { // 
 console.log(name)
}
test2('Tom')

2. 화살표 함수의 쓰기

ES6 화살표 함수의 도입은 함수의 작법을 더욱 간결하게 하지만 쓰기에는 일정한 규칙을 따라야 한다.
규칙1: 화살표 함수는 부치식으로만 쓸 수 있고 성명식으로 쓸 수 없다
예:

const test = (name) => {
 console.log(name)
}
test('Jerry')

규칙 2: 매개 변수가 하나이면 괄호를 넣지 않아도 되고, 매개 변수나 매개 변수가 하나보다 많으면 괄호를 넣어야 한다
예:

const test = name => {
 console.log(name)
}
test('Jerry')

const test2 = (name1, name2) => {
 console.log(name1 + ' and ' + name2)
}
test2('Tom', 'Jerry')

규칙 3: 함수체가 한 마디만 있으면 괄호를 넣지 않아도 된다
예:

const test = name => console.log(name) 

규칙 4: 함수체에 괄호가 없으면 return을 쓰지 않아도 됩니다. 화살표 함수는 return을 도와줍니다.
예:

const add = (p1, p2) => p1 + p2
add(10, 25)

기억: 함수체의 괄호는return 키워드와 같습니다.
이상의 예에서 알 수 있듯이 화살표 함수는 일반 함수의 원괄호와 꽃괄호를 모두 간소화시켰다.이러한 간소화를 제외하고 화살표 함수가 일반 함수에 대한 가장 최적화된 점은this이다.

2. 일반 함수 중this 이해

화살표 함수가this에 대한 최적화를 연구하기 전에 우리는this가 도대체 무엇인지, 그리고 어떻게 사용되는지 알아야 한다.this는call 방법으로 함수를 호출할 때 전달되는 첫 번째 매개 변수입니다. 함수가 호출되지 않았을 때,this의 값은 확정할 수 없습니다.
만약 콜 방법을 사용하여 함수를 호출하지 않았다면,this에 대한 정의는 잘 모르겠습니다.그러면 우리는 먼저 함수 호출의 두 가지 방법을 이해해야 한다.
1. 순수한 함수 호출
가장 일반적인 첫 번째 방법은 다음과 같습니다.

function test(name) {
 console.log(name)
 console.log(this)
}
test('Jerry') // 

이런 방법은 우리가 가장 많이 사용하지만, 이런 함수 호출 방법은 단지 간략한 글꼴일 뿐, 완전한 글꼴은 다음과 같다.

function test(name) {
 console.log(name)
 console.log(this)
}
test.call(undefined, 'Tom')

위에서 함수를 호출하는call 방법을 알아차렸습니까?call 방법이 수신하는 첫 번째 매개 변수는this입니다. 여기에undefined를 전송했습니다.그러면 정의에 따라 함수가 실행된 후에 쳐낸this는undefined입니까?아니야.
만약 당신이 전송한context가null이나undefined라면, 윈도우 대상은 기본context (엄격한 모드에서 기본context는undefined) 입니다.
그래서 여기서 우리가 쳐낸this는 윈도우 대상이다.

2. 대상의 함수 호출

직접 보기:

const obj = {
 name: 'Jerry',
 greet: function() {
 console.log(this.name)
 }
}
obj.greet() // 
obj.greet.call(obj) // 

예에서 첫 번째 호출 방법은 두 번째 호출 방법의 문법 설탕일 뿐이고 두 번째는 완전한 호출 방법이며 두 번째 방법이 강한 것은 수동으로this를 지정할 수 있다는 것이다.
수동으로this를 지정하는 예:

const obj = {
 name: 'Jerry',
 greet: function() {
 console.log(this.name)
 }
}
obj.greet.call({name: 'Spike'}) //  Spike

위의 예에서greet 함수가 실행되었을 때this는 이미 우리가 고쳤다.

3. 구조 함수 중this

구조 함수 중의this는 약간 특수하다. 모든 구조 함수는 new 이후에 하나의 대상을 되돌려준다. 이 대상은 바로this, 즉context 상하문이다.
예:

function Test() {
 this.name = 'Tom'
}
let p = new Test()
console.log(typeof p) //object
console.log(p.name) // Tom

4. window.setTimeout () 및 window.setInterval()에서 함수 호출

window.setTimeout () 및 window.setInterval () 의 함수 중this는 좀 특수합니다. 안에 있는this는 기본적으로 윈도우 대상입니다.
간단하게 요약하자면 함수의 완전한 호출 방법은call방법을 사용하고test를 포함한다.call(context,name)과obj.greet.call(context,name), 여기 있는 context는 함수 호출 시 상하문, 즉this입니다. 단지 이this는call 방법을 통해 수정할 수 있습니다.구조 함수는 약간 특수한데,this는 new 다음에 되돌아오는 대상을 가리킨다.window.setTimeout () 및 window.setInterval () 기본값은this 가 window 객체입니다.

3. 화살표 함수 중의this 이해

위this에 대해 많은 이야기를 했습니다.this는 함수가call 방법으로 호출될 때 전달되는 첫 번째 매개 변수이며, 수동으로 변경할 수 있습니다. 이렇게 해서this의 값을 확정하는 것은 너무 번거롭습니다.그러나 화살표 함수의 출현은this를 확인하는 데 도움이 되었다.

1. 화살표 함수의 특성 1: 기본 귀속 외층this

위에서 언급한:this의 값은call 방법으로 수정할 수 있으며, 호출할 때만 우리가this의 값을 확정할 수 있습니다.우리가 화살표 함수를 사용할 때, 화살표 함수는 기본적으로 외부this의 값을 귀속시켜 주기 때문에 화살표 함수에서this의 값은 외부this와 같다.
화살표 함수 예제를 사용하지 않습니다.

const obj = {
	a: function() { console.log(this) } 
}
obj.a() // obj 

화살표 함수를 사용하는 예:

const obj = {
 a: () => {
 console.log(this)
 }
}
obj.a() // window

화살표 함수를 사용하는 예에서 화살표 함수는 기본적으로 자신의this를 사용하지 않고 외부의this와 일치하기 때문에 가장 외부의this는 윈도우 대상이다.

2. 화살표 함수의 특성 2:call 방법으로 안에 있는this를 수정할 수 없음

이것도 이해하기 쉽다. 함수의this는call방법으로 수동으로 지정할 수 있으나,this의 복잡성을 줄이기 위해 화살표 함수는call방법으로this를 지정할 수 없다.
예:

const obj = {
 a: () => {
 console.log(this)
 }
}
obj.a.call('123') // window 

위의 문장 때문에 우리는 윈도우에 대해 이야기했다.setTimeout () 의 함수에 있는this는 기본적으로 윈도우입니다. 화살표 함수를 통해this와 외부의this를 일치시킬 수 있습니다.
window.setTimeout()의 예:

const obj = {
 a: function() {
 console.log(this)
 window.setTimeout(() => { 
  console.log(this) 
 }, 1000)
 }
}
obj.a.call(obj) // this obj ， this obj 

틀림없이 모두가 알게 될 것이다, 함수 obj.a는 화살표 함수를 사용하지 않았습니다. 그의this는obj이고 setTimeout의 함수는 화살표 함수를 사용했기 때문에 외부의this와 일치하고obj입니다.만약 setTimeout의 함수가 화살표 함수를 사용하지 않았다면, 이것은 윈도우 대상일 것입니다.

4. 다중 대상 삽입 함수의this

이곳은 필자가 공부할 때 만난 약간의 의혹이다.화살표 함수의this는 바깥쪽과 일치하지만, 만약 이 바깥쪽에 여러 층이 있다면, 그것은 어느 층과 일치하는 것입니까?
바로 위의 예:

const obj = {
 a: function() { console.log(this) },
 b: {
 	c: function() {console.log(this)}
	}
}
obj.a() //  obj ,  obj.a.call(obj)
obj.b.c() // obj.b ,  obj.b.c.call(obj.b)

위의 코드는 모두 직감에 부합된다. 다음에obj.b.c에 해당하는 함수를 화살표 함수로 바꿨습니다. 결과는 다음과 같습니다.

const obj = {
 a: function() { console.log(this) },
 b: {
 	c: () => {console.log(this)}
	}
}
obj.a() // obj
obj.b.c() // window ！！

obj.a 호출된 후에 나온 것은obj 대상이고obj입니다.b.c를 호출한 후 윈도우즈 대상은obj가 아니라 윈도우즈 대상입니다. 이것은 다중 대상 플러그인 안의 화살표 함수에서this가 가장 바깥쪽과 일치하는 것을 나타냅니다.
위의 내용은 필자가 화살표 함수에서 정리한 지식을 배우는 것이다. 만약 잘못이 있다면 비판하고 바로잡으세요!이것은 내가 굴금에 쓴 세 번째 문장입니다. 읽어 주셔서 감사합니다!
본문 참고:this의 값은 도대체 무엇입니까?한 번에 분명하게 말하다

총결산

JS에서 화살표 함수와this의 작법과 이해에 관한 이 글을 소개합니다. JS 화살표 함수와this에 관한 더 많은 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!