ES6의 화살표 기능과 그 범위에 대한 심층 분석-JS 튜토리얼-php.cn

ES6의 화살표 기능과 그 범위에 대한 심층 분석

ES6의 많은 새로운 기능 중에서 화살표 기능(또는 큰 화살표 기능)은 주목할만한 기능 중 하나입니다. 훌륭하고 멋질 뿐만 아니라 범위를 잘 활용하고 빠르고 편리합니다. 이전에 사용했던 기술을 사용하면 코드가 많이 줄어듭니다... 하지만 화살표 기능이 어떻게 작동하는지 이해하지 못하면 이해하기 어려울 수 있습니다. 이제 실행 환경을 살펴보겠습니다.

직접 배우고 사용해 볼 수 있습니다. 이제 브라우저 콘솔에 샘플 프로그램 코드를 복사하면 됩니다. 이제 Firefox(22+) 개발자 도구를 사용하는 것이 좋습니다. 이제 개발자 도구는 화살표를 지원합니다. 기능이 있으며 Google Chrome을 사용할 수도 있습니다. Google Chrome을 사용하는 경우 다음 두 가지를 수행해야 합니다.

Google Chrome의 주소 표시줄에 about:flags를 입력하고 "Experiential JavaScript 사용"을 찾습니다. 옵션을 선택하고 활성화하세요.

함수 시작 부분에 use strict를 추가한 다음 Google Chrome에서 화살표 기능을 테스트하세요(팁: Google Chrome v38을 사용하세요. 당시 브라우저 버전에 속았습니다):
```
(function(){
    "use strict";
    // use arrow functions here
}());
```
로그인 후 복사
다행히 앞으로는 점점 더 많은 브라우저가 ES6 기능을 지원할 예정입니다. 이제 모든 준비가 완료되었으므로 계속해서 살펴보겠습니다.

새로운 주제

모두가 최근 ES6에 관한 주제를 논의하고 있습니다. 화살표 함수에 대해서는 다음과 같습니다.

=>

로그인 후 복사

새 구문

토론을 통해 새로운 구문이 탄생했습니다.

param => expression

로그인 후 복사

새 구문은 변수에 적용되며 표현식 변수에서 여러 선언이 가능합니다. 다음은 화살표 함수의 사용 패턴:

//  一个参数对应一个表达式
param => expression;// 例如 x => x+2;

// 多个参数对应一个表达式
(param [, param]) => expression; //例如 (x,y) => (x + y);

// 一个参数对应多个表示式
param => {statements;} //例如 x = > { x++; return x;};

//  多个参数对应多个表达式
([param] [, param]) => {statements} // 例如 (x,y) => { x++;y++;return x*y;};

//表达式里没有参数
() => expression; //例如var flag = (() => 2)(); flag等于2
() => {statements;} //例如 var flag = (() => {return 1;})(); flag就等于1

//传入一个表达式，返回一个对象
([param]) => ({ key: value });
//例如  var fuc = (x) => ({key:x})
        var object = fuc(1);
        alert(object);//{key:1}

로그인 후 복사

화살표 함수 구현 방법

일반 함수를 화살표 함수로 변환하여 구현할 수 있습니다.

// 当前函数
var func = function (param) {
    return param.split(" ");
}
// 利用箭头函数实现
var func = param => param.split(" ");

로그인 후 복사

위의 예에서 화살표 함수의 구문을 볼 수 있습니다. 실제로 함수 본문과 매개변수가 있는 새 함수를 반환합니다.

그래서 방금 생성한 함수를 다음과 같이 호출할 수 있습니다.

func("Felipe Moura"); // returns ["Felipe", "Moura"]

로그인 후 복사

즉시 실행 함수(IIFE)

즉시 실행 함수에서 화살표 함수를 사용할 수 있습니다. 예를 들면 다음과 같습니다.

( x => x * 2 )( 3 ); // 6

로그인 후 복사

이 코드 줄은 임시 함수, 이 함수는 형식 매개변수 x를 가지며 함수의 반환 값은 x*2입니다. 시스템은 이 임시 함수를 즉시 실행하고 형식 매개변수에 3을 할당합니다. 코드 상황:

( (x, y) => {
    x = x * 2;
    return x + y;
})( 3, "A" ); // "6A"

로그인 후 복사

관련 생각

다음 함수를 고려해보세요:

var func = x => {
    return x++;
};

로그인 후 복사

몇 가지 일반적인 문제를 나열했습니다:

화살표 함수로 생성된 임시 함수의 인수가 설정되지 않습니다:

console.log(arguments); // not defined

로그인 후 복사

임시 함수도 정상적으로 확인할 수 있습니다:

func instanceof Function; // true
typeof func; // function
func.constructor == Function; // true

로그인 후 복사

화살표 함수 넣기 괄호 안은 유효하지 않습니다.

//  有效的常规语法
(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函

var instance= new func(); // TypeError: func is not a constructor

로그인 후 복사

프로토타입도 없습니다. 개체:

func.prototype; // undefined

로그인 후 복사

Scope

이 화살표 함수의 범위 엄격 모드가 아닌 경우 this 키워드는 window를 가리키고, 엄격 모드에서는 정의되지 않으며 생성자의 this는 현재 개체 인스턴스를 가리킵니다. , 이것은 객체를 가리킬 수 있습니다. 예를 들어 이벤트 수신 함수를 추가할 때 이 점은 실제로 매우 직접적이지 않을 수 있습니다. 범위 흐름이라는 하나의 규칙에 따라 판단됩니다. 아래에서는 이것이 이벤트 리스너 함수와 객체 함수 내에서 어떻게 나타나는지 보여드리겠습니다.

이벤트 리스너 함수에서:

document.body.addEventListener(&#39;click&#39;, function(evt){
    console.log(this); // the HTMLBodyElement itself
});

로그인 후 복사

생성자에서:

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()); // "Jon Doe"
//注：this关键字这里就不解释了，大家自己google,baidu吧。

로그인 후 복사

이 예에서 Person.setName 함수가 다음을 반환하도록 하면 Person 객체 자체는 다음과 같이 사용할 수 있습니다.

jon.setName("Jon Doe")
.getName(); // "Jon Doe"

로그인 후 복사

객체에서:

let obj = {
    foo: "bar",
    getIt: function () {
        return this.foo;
    }
};
console.log( obj.getIt() ); // "bar"

로그인 후 복사

그러나 실행 흐름(예: setTimeout 사용)과 범위가 변경되면 이것도 변경됩니다.

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 Lou, 13"
mary.sayHi();
// window

로그인 후 복사

setTimeout 함수가 실행 흐름을 변경하면 this 지점이 전역 개체가 되거나 엄격 모드에서는 정의가 해제되므로 setTimeout 함수에서는 self, That, of와 같은 다른 변수를 사용하여 이 개체를 가리킵니다. 물론 어떤 변수를 사용하든 setTimeout에 액세스하기 전에 먼저 self와 그 값에 값을 할당하거나 바인드 메서드를 사용해야 합니다. 그렇지 않으면 이러한 변수는 정의되지 않습니다.

이것은 화살표 기능이 무대에 올 때 범위를 유지할 수 있으며 이것의 요점은 변하지 않습니다.

화살표 함수를 사용하는 위의 첫 번째 예를 살펴보겠습니다.

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( ()=>{
            // the only difference is here
            console.log( this );
        }, 100 );
    }
}

let mary = new Student({
    name: "Mary Lou",
    age: 13
});
console.log( mary.getInfo() ); // "Mary Lou, 13"
mary.sayHi();
// Object { name: "Mary Lou", age: 13, ... }

로그인 후 복사

분석: sayHi 함수에서는 화살표 함수를 사용합니다. 현재 범위는 화살표 함수입니다. 생성된 임시 함수의 범위는 학생 개체의 sayHi 함수의 범위이기도 합니다. 따라서 setTimeout에서 화살표 함수에 의해 생성된 임시 함수를 호출하더라도 이 임시 함수의 이 함수도 올바르게 가리킵니다.

有趣和有用的使用

创建一个函数很容易，我们可以利用它可以保持作用域的特征：

例如我们可以这么使用：Array.forEach()

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);所有我们看到函数的正确执行效果。

//在Array.map里使用箭头函数，这里我就不分析函数执行过程了。。。。

var arr = ['a', 'e', 'i', 'o', 'u'];
arr.map(vowel => {
    return vowel.toUpperCase();
});
// [ "A", "E", "I", "O", "U" ]

로그인 후 복사

费布拉奇数列

var factorial = (n) => {
    if(n==0) {
        return 1;
    }
    return (n * factorial (n-1) );
}
factorial(6); // 720

로그인 후 복사

我们也可以用在Array.sort方法里：

let arr = ['a', 'e', 'i', 'o', 'u'];
arr.sort( (a, b)=> a < b? 1: -1 );

로그인 후 복사

也可以在事件监听函数里使用：

// EventObject, BodyElement
document.body.addEventListener('click', event=>console.log(event, this));

로그인 후 복사

总结

尽管大家可能会认为使用箭头函数会降低你代码的可读性，但是由于它对作用域的特殊处理，它能让我们能很好的处理this的指向问题。箭头函数加上let关键字的使用，将会让我们JavaScript代码上一个层次！尽量多使用箭头函数，你可以再你的浏览器测试你写的箭头函数代码，大家可以再评论区留下你对箭头函数的想法和使用方案！我希望大家能享受这篇文章，就像你会不就的将来享受箭头函数带给你的快乐.