ES6의 많은 새로운 기능 중에서 화살표 기능(또는 큰 화살표 기능)은 주목할만한 기능 중 하나입니다. 훌륭하고 멋질 뿐만 아니라 범위를 잘 활용하고 빠르고 편리합니다. 이전에 사용했던 기술을 사용하면 코드가 많이 줄어듭니다... 하지만 화살표 기능이 어떻게 작동하는지 이해하지 못하면 이해하기 어려울 수 있습니다. 이제 실행 환경을 살펴보겠습니다.
직접 배우고 사용해 볼 수 있습니다. 이제 브라우저 콘솔에 샘플 프로그램 코드를 복사하면 됩니다. 이제 Firefox(22+) 개발자 도구를 사용하는 것이 좋습니다. 이제 개발자 도구는 화살표를 지원합니다. 기능이 있으며 Google Chrome을 사용할 수도 있습니다. Google Chrome을 사용하는 경우 다음 두 가지를 수행해야 합니다.
Google Chrome의 주소 표시줄에 about:flags를 입력하고 "Experiential JavaScript 사용"을 찾습니다. 옵션을 선택하고 활성화하세요.
-
함수 시작 부분에 use strict를 추가한 다음 Google Chrome에서 화살표 기능을 테스트하세요(팁: Google Chrome v38을 사용하세요. 당시 브라우저 버전에 속았습니다):
-
1 2 3 4 | (function(){
"use strict";
}());
|
로그인 후 복사
새로운 주제
모두가 최근 ES6에 관한 주제를 논의하고 있습니다. 화살표 함수에 대해서는 다음과 같습니다.
새 구문
토론을 통해 새로운 구문이 탄생했습니다.
새 구문은 변수에 적용되며 표현식 변수에서 여러 선언이 가능합니다. 다음은 화살표 함수의 사용 패턴:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | param => expression;
(param [, param]) => expression;
param => {statements;}
([param] [, param]) => {statements}
() => expression;
() => {statements;}
([param]) => ({ key: value });
var object = fuc(1);
alert(object);
|
로그인 후 복사
화살표 함수 구현 방법
일반 함수를 화살표 함수로 변환하여 구현할 수 있습니다.
1 2 3 4 5 6 | var func = function (param) {
return param.split(" ");
}
var func = param => param.split(" ");
|
로그인 후 복사
위의 예에서 화살표 함수의 구문을 볼 수 있습니다. 실제로 함수 본문과 매개변수가 있는 새 함수를 반환합니다.
그래서 방금 생성한 함수를 다음과 같이 호출할 수 있습니다.
즉시 실행 함수(IIFE)
즉시 실행 함수에서 화살표 함수를 사용할 수 있습니다. 예를 들면 다음과 같습니다.
이 코드 줄은 임시 함수, 이 함수는 형식 매개변수 x를 가지며 함수의 반환 값은 x*2입니다. 시스템은 이 임시 함수를 즉시 실행하고 형식 매개변수에 3을 할당합니다. 코드 상황:
1 2 3 4 | ( (x, y) => {
x = x * 2;
return x + y;
})( 3, "A" );
|
로그인 후 복사
관련 생각
다음 함수를 고려해보세요:
1 2 3 | var func = x => {
return x++;
};
|
로그인 후 복사
화살표 함수로 생성된 임시 함수의 인수가 설정되지 않습니다:
임시 함수도 정상적으로 확인할 수 있습니다:
1 2 3 | func instanceof Function;
typeof func;
func.constructor == Function;
|
로그인 후 복사
화살표 함수 넣기 괄호 안은 유효하지 않습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | (function (x, y){
x= x * 2;
return x + y;
} (3, "B") );
( (x, y) => {
x= x * 2;
return x + y;
} ( 3, "A" ) );
( (x,y) => {
x= x * 2;return x + y;
} )( 3,"A" );
|
로그인 후 복사
화살표 함수는 임시 함수를 생성하지만 이 임시 함수는 생성자가 아닙니다. typeof和instanceof函
1 | var instance= new func();
|
로그인 후 복사
프로토타입도 없습니다. 개체:
Scope
이 화살표 함수의 범위 엄격 모드가 아닌 경우 this 키워드는 window를 가리키고, 엄격 모드에서는 정의되지 않으며 생성자의 this는 현재 개체 인스턴스를 가리킵니다. , 이것은 객체를 가리킬 수 있습니다. 예를 들어 이벤트 수신 함수를 추가할 때 이 점은 실제로 매우 직접적이지 않을 수 있습니다. 범위 흐름이라는 하나의 규칙에 따라 판단됩니다. 아래에서는 이것이 이벤트 리스너 함수와 객체 함수 내에서 어떻게 나타나는지 보여드리겠습니다.
이벤트 리스너 함수에서: 1 2 3 | document.body.addEventListener('click', function(evt){
console.log(this);
});
|
로그인 후 복사
생성자에서:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function Person () {
let fullName = null;
this.getName = function () {
return fullName;
};
this.setName = function (name) {
fullName = name;
return this;
};
}
let jon = new Person();
jon.setName("Jon Doe");
console.log(jon.getName());
|
로그인 후 복사
이 예에서 Person.setName 함수가 다음을 반환하도록 하면 Person 객체 자체는 다음과 같이 사용할 수 있습니다.
1 2 | jon.setName("Jon Doe")
.getName();
|
로그인 후 복사
객체에서:
1 2 3 4 5 6 7 | let obj = {
foo: "bar",
getIt: function () {
return this.foo;
}
};
console.log( obj.getIt() );
|
로그인 후 복사
그러나 실행 흐름(예: setTimeout 사용)과 범위가 변경되면 이것도 변경됩니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | function Student(data){
this.name = data.name || "Jon Doe";
this.age = data.age>=0 ? data.age : -1;
this.getInfo = function () {
return this.name + ", " + this.age;
};
this.sayHi = function () {
window.setTimeout( function () {
console.log( this );
}, 100 );
}
}
let mary = new Student({
name: "Mary Lou",
age: 13
});
console.log( mary.getInfo() );
mary.sayHi();
|
로그인 후 복사
setTimeout 함수가 실행 흐름을 변경하면 this 지점이 전역 개체가 되거나 엄격 모드에서는 정의가 해제되므로 setTimeout 함수에서는 self, That, of와 같은 다른 변수를 사용하여 이 개체를 가리킵니다. 물론 어떤 변수를 사용하든 setTimeout에 액세스하기 전에 먼저 self와 그 값에 값을 할당하거나 바인드 메서드를 사용해야 합니다. 그렇지 않으면 이러한 변수는 정의되지 않습니다.
이것은 화살표 기능이 무대에 올 때 범위를 유지할 수 있으며 이것의 요점은 변하지 않습니다.
화살표 함수를 사용하는 위의 첫 번째 예를 살펴보겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | function Student(data){
this.name = data.name || "Jon Doe";
this.age = data.age>=0 ? data.age : -1;
this.getInfo = function () {
return this.name + ", " + this.age;
};
this.sayHi = function () {
window.setTimeout( ()=>{
console.log( this );
}, 100 );
}
}
let mary = new Student({
name: "Mary Lou",
age: 13
});
console.log( mary.getInfo() );
mary.sayHi();
|
로그인 후 복사
분석: sayHi 함수에서는 화살표 함수를 사용합니다. 현재 범위는 화살표 함수입니다. 생성된 임시 함수의 범위는 학생 개체의 sayHi 함수의 범위이기도 합니다. 따라서 setTimeout에서 화살표 함수에 의해 생성된 임시 함수를 호출하더라도 이 임시 함수의 이 함수도 올바르게 가리킵니다.
有趣和有用的使用
创建一个函数很容易，我们可以利用它可以保持作用域的特征：
例如我们可以这么使用：Array.forEach()
1 2 3 4 | var arr = ['a', 'e', 'i', 'o', 'u'];
arr.forEach(vowel => {
console.log(vowel);
});
|
로그인 후 복사
分析：在forEach里箭头函数会创建并返回一个临时函数 tempFun,这个tempFun你可以想象成这样的：function(vowel){ console.log(vowel);}但是Array.forEach函数会怎么去处理传入的tempFunc呢？在forEach函数里会这样调用它：tempFunc.call(this,value);所有我们看到函数的正确执行效果。
1 2 3 4 5 6 7 | var arr = ['a', 'e', 'i', 'o', 'u'];
arr.map(vowel => {
return vowel.toUpperCase();
});
|
로그인 후 복사
费布拉奇数列
1 2 3 4 5 6 7 | var factorial = (n) => {
if(n==0) {
return 1;
}
return (n * factorial (n-1) );
}
factorial(6);
|
로그인 후 복사
我们也可以用在Array.sort方法里：
1 2 | let arr = ['a', 'e', 'i', 'o', 'u'];
arr.sort( (a, b)=> a < b? 1: -1 );
|
로그인 후 복사
也可以在事件监听函数里使用：
1 2 | document.body.addEventListener('click', event=>console.log(event, this));
|
로그인 후 복사
推荐的链接
下面列出了一系列有用的链接，大家可以去看一看
总结
尽管大家可能会认为使用箭头函数会降低你代码的可读性，但是由于它对作用域的特殊处理，它能让我们能很好的处理this的指向问题。箭头函数加上let关键字的使用，将会让我们JavaScript代码上一个层次！尽量多使用箭头函数，你可以再你的浏览器测试你写的箭头函数代码，大家可以再评论区留下你对箭头函数的想法和使用方案！我希望大家能享受这篇文章，就像你会不就的将来享受箭头函数带给你的快乐.
相关免费学习推荐：js视频教程
更多编程相关知识，请访问：编程入门！！
위 내용은 ES6의 화살표 기능과 범위 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
