집 >웹 프론트엔드 >프런트엔드 Q&A >ES6의 화살표 기능에 대한 자세한 검토

ES6의 화살표 기능에 대한 자세한 검토

WBOY앞으로: 2022-08-08 10:17:551457검색

이 기사에서는 es6의 화살표 함수와 관련된 문제를 주로 소개하는 javascript에 대한 관련 지식을 제공합니다. ES6에서는 =>를 사용하여 함수를 정의할 수 있습니다. 화살표 함수는 익명 함수와 동일하며 함수 정의를 단순화합니다. 모두에게 도움이 되기를 바랍니다.

[관련 권장사항: javascript 비디오 튜토리얼, 웹 프론트엔드]

1. 화살표 함수 소개

1.1 화살표 함수란 무엇입니까

ES6에서는 =를 사용할 수 있습니다. > 함수를 정의합니다. 화살표 함수는 익명 함수와 동일하며 함수 정의를 단순화합니다.

1.2 기본 구문

// 箭头函数let fn = (name) => {
    // 函数体
    return `Hello ${name} !`;};// 等同于let fn = function (name) {
    // 函数体
    return `Hello ${name} !`;};

화살표 함수는 일반 함수보다 구문이 훨씬 간단합니다. 화살표 함수는 화살표 =>를 사용하여 함수를 정의하고 키워드 function을 생략합니다.

함수의 매개변수는 => 앞의 괄호 안에, 함수 본문은 => 뒤의 중괄호 안에 있습니다.

//没有参数，写空括号
    let fn = () => {
        console.log('hello');
    };

화살표 함수에 매개변수가 하나라면 매개변수를 둘러싼 괄호도 생략할 수 있습니다

//只有一个参数，可以省去参数括号
    let fn = name => {
        console.log(`hello ${name}!`)
    };

화살표 함수에 여러 매개변수가 있는 경우 매개변수를 쉼표(,)로 구분하고 괄호로 묶습니다.
let fn = (val1, val2, val3, val4) => { return [val1, val2, val3, val4]; }

1.4 화살표 함수의 함수 본문

화살 함수의 함수 본문에 실행 코드가 하나만 있는 경우 단순히 변수나 간단한 js 표현식을 반환하면 함수 본문 중괄호 {를 생략할 수 있습니다. }

//返回某个简单变量vallet f = val => val;// 等同于let f = function (val) { return val };//返回一个简单的js表达式num1+num2let sum = (num1, num2) => num1 + num2;// 等同于let sum = function(num1, num2) {
  return num1 + num2;};

화살표 함수의 함수 본문에 한 줄의 코드만 있는 경우 반환되는 것은 변수나 간단한 js 표현식이 아니라 객체입니다.

//错误写法—花括号会被解释为函数体
    let getItem = id => {
        id: id,
        name: 'gaby'
    };//正确写法
    let getItem = id => ({
        id: id,
        name: 'gaby'
    });

화살표 함수의 함수 본문에 명령문이 하나만 있고 값을 반환할 필요가 없는 경우(콜백 함수에 가장 일반적으로 사용됨) void 키워드를 추가하세요let fn = () => void doesNotReturn();
화살표 함수는 콜백 함수에 사용됩니다. 공통적이고 간결함

//栗子1//普通函数
    [1, 2, 3].map(function (x) {
        return x + x;
    });//ES6箭头函数[1, 2, 3].map(x => x + x);

//栗子2//普通函数
    var result = [2, 4, 5, 1, 6].sort(function (a, b) {
        return a - b;
    });//ES6箭头函数
	var result = [2, 4, 5, 1, 6].sort((a, b) => a - b);

2. 화살표 함수는 이 포인팅 규칙

2.1 화살표 함수에는 프로토타입 프로토타입이 없으므로 화살표 함수에는 이 포인팅 규칙이 없습니다

    let fn = () => {
        console.log('Hello World !')
    };
    console.log(fn.prototype); // undefined

2.2 화살표 함수는 자체 this를 생성하지 않습니다. 외부 레이어에 첫 번째 일반 함수가 있는 경우 정의되면 해당 this

를 상속합니다. 화살표 함수에는 자체 this 포인터가 없습니다. 정의된 외부 실행 환경 ES6의 화살표 기능에 대한 자세한 검토 을

고 이 값을 상속받습니다. 화살표 함수의 이 지점은 정의될 때 결정되며 나중에 변경되지 않습니다. (! Forever)

(1) Chestnut 1

    var id = 'Global';
    //普通函数
    function fn1() {
        setTimeout(function () {
            console.log(this.id)

        }, 1000);
    }
    //箭头函数
    function fn2() {
        setTimeout(() => {
            console.log(this.id)
        }, 1000);
    }

    fn1.call({
        id: 'obj'
    });//Global

    fn2.call({
        id: 'obj'
    });//obj

분석: 일반 함수의 setTimeout은 1초 후에 전역 범위에서 실행됩니다. 이 모든 것은 window 객체를 가리키며, this.id는 가리킵니다. 전역 변수 id에. 화살표 함수의 this는 정의될 때 결정됩니다. fn2의 실행 환경에서 this 지점은 호출 메서드에 의해 변경되고 obj

(2) Chestnut 2

에 바인딩됩니다. var id = 'Global'; var obj = { id: 'OBJ', a: function () { console.log(this.id) },//方法a普通函数定义 b: () => { console.log(this.id) }//方法b用箭头函数定义 }; obj.a();//OBJ obj.b();//Global

ES6의 화살표 기능에 대한 자세한 검토 분석: 일반 함수는 개체의 메서드로 호출되며, 이는 해당 개체가 속한 개체를 가리킵니다(호출하는 사람이 누구를 가리킴). this.id는 obj.id입니다. 실행 환경을 정의하고 창 개체를 가리키며 전역 변수인 출력 Global을 가리킵니다. 중괄호 {}는 별도의 실행 환경을 구성할 수 없으므로 여전히 전역 컨텍스트에 있습니다.

2.3 화살표 함수의 this는 상속되어 절대 변경되지 않으며 call/apply/bind도 변경할 수 없습니다.

.call()/.apply()/.bind() 메서드를 사용할 수 있습니다. 함수가 실행될 때 this의 지점을 동적으로 수정합니다. 그러나 화살표 함수의 this는 정의될 때 결정되고 절대 변경되지 않기 때문입니다 ES6의 화살표 기능에 대한 자세한 검토

    var name = 'gaby'
    var person = {
        name: 'gabrielle',
        say: function () {
            console.log('say hello', this.name)
        }, //普通函数
        say2: () => {
            console.log('say2 hello', this.name)
        } //箭头函数
    }
    person.say.call({
        name: 'Mike'
    })
    person.say2.call({
        name: 'Amy'
    })

분석: say의 일반 함수는 호출을 통해 this의 지점을 변경했습니다. say2 화살표 함수는 호출 바인딩을 호출하여 this 포인터를 변경하려고 시도하지만 여전히 외부 일반 함수의 this 포인터와 창 개체의 전역 변수 이름을 인쇄합니다. 2.4 화살표 함수의 this 지점은 간접적으로만 수정할 수 있습니다.

간접 수정: 상속받은 일반 함수의 this 지점을 수정하면 화살표 함수의 this 지점도 그에 따라 변경됩니다. ES6의 화살표 기능에 대한 자세한 검토

箭头函数的this指向定义时所在的外层第一个普通函数，跟使用的位置没有关系。

    let al    let aObj = {
        msg: 'a的this指向'
    };
    bObj = {
        msg: 'b的this指向'
    };
    a.call(aObj); //将a的this指向aObj
    b.call(bObj); //将b普通函数的this指向bObj 箭头函数内部的this指向也会指向bObj

    function b() {
        al();
    }

    function a() {
        al = () => {
            console.log(this, 'this指向定义时外层第一个普通函数 ')
        };
    }

ES6의 화살표 기능에 대한 자세한 검토

2.5 箭头函数外层没有函数，严格模式和非严格模式下它的this都会指向window全局对象

箭头函数的this指向继承自外层第一个普通函数的this，那么如果没有外层函数，它的this指向哪里？

this的绑定规则：非严格模式下，默认绑定的this指向全局对象，严格模式下this指向undefined。

如果箭头函数外层没有普通函数继承，箭头函数在全局作用域下，严格模式和非严格模式下它的this都会指向window(全局对象)

2.6 多层嵌套函数this指向

箭头函数中的this引用的是最近作用域中的this，是向外层作用域中，一层层查找this，直到有this的定义。

2.7 箭头函数不能作为构造函数使用new

构造函数做了什么？

JS内部首先会先生成一个对象

再把函数中的this指向该对象

然后执行构造函数中的语句

最终返回该对象实例

箭头函数没有自己的this，this继承外层执行环境中的this，且this永远不会改变。new会报错

    let fn = (name, age) => {
        this.name = name;
        this.age = age;
    };

    let person = new fn('gaby', 20)

ES6의 화살표 기능에 대한 자세한 검토

2.8 箭头函数不支持new.target

ES6新引入的属性，普通函数可以通过new调用，new.target返回该函数的引用。用于确定构造函数是否为new调用。箭头函数并不能作为构造函数使用new，自然也不支持new.targer。

（1）箭头函数的this指向全局对象，在箭头函数中使用箭头函数会报错

    let fn = () => {
        console.log(new.target)
    };
    fn()

ES6의 화살표 기능에 대한 자세한 검토

（2）箭头函数的this指向普通函数，它的new.target就是指向该普通函数的引用

    new fn2();

    function fn2() {
        let fn = () => {
            console.log(new.target)
        };
        fn();
    }

ES6의 화살표 기능에 대한 자세한 검토

三、箭头函数的arguments规则

3.1 箭头函数没有自己的arguments

（1）箭头函数处于全局作用域中

箭头函数的this指向全局对象，会报arguments未声明的错。

    let fn = name => {
        console.log(arguments)
    }
    let fn2 = function (name) {
        console.log(arguments)
    }
    //fn()
    fn2()

ES6의 화살표 기능에 대한 자세한 검토

    let fn = name => {
        console.log(arguments)
    }
    let fn2 = function (name) {
        console.log(arguments)
    }
    fn()
    fn2()

ES6의 화살표 기능에 대한 자세한 검토

解析：普通函数可以打印arguments，箭头函数报错。因为箭头函数处于全局作用域中，在全局作用域没有arguments的定义，箭头函数本身没有arguments，所以报错。

（2）箭头函数的this如果指向普通函数,它的argumens继承于该普通函数

    let fn2 = function (name) {
        console.log('fn2:', arguments)
        let fn = name => {
            console.log('fn:', arguments)
        }
        fn()
    }
    fn2('gaby')

ES6의 화살표 기능에 대한 자세한 검토

解析：两个函数打印的argument相同，都是fn2函数的arguments。

总结

箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是外层局部（函数）执行环境中的值。

3.2 可以用rest替代，rest参数获取函数的多余参数

rest是ES6的API，用于获取函数不定数量的参数数组。这个API可以用来替代arguments。

（1）基本用法

    //形式是...变量名 
	let fn = (first, ...arr) => {
        console.log(first, arr);
    }
    fn(1, 2, 3, 4);

ES6의 화살표 기능에 대한 자세한 검토

解析：rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。获取函数的第一个确定的参数，以及用一个变量接收其他剩余函数的实例。

（2）使用注意事项

rest必须是函数的最后一位参数

    let a = (first, ...rest, three) => {
        console.log(first, rest, three);
    };
    a(1, 2, 3, 4);

ES6의 화살표 기능에 대한 자세한 검토

函数的length属性不包括rest

（3）rest和arguments函数比较

箭头函数和普通函数都可以使用rest参数，而arguments只能普通函数用。

接收参数rest比arguments更加灵活，完全可以自定义。

rest是一个真正的数组可以使用数组API，arguments只是一个类数组。

3.3 箭头函数不支持重复函数参数的名称

    function fn(name, name) {
        console.log('fn2:', name)
    }
    let fn2 = (name, name) => {
        console.log('fn:', name)
    }
    fn('wang', 'gaby')
    fn2('wang', 'gaby')

ES6의 화살표 기능에 대한 자세한 검토

3.4 箭头函数不能用作Generator，不能使用yeild关键字

四、箭头函数的注意事项

函数箭头一条语句返回对象字面量，需要加括号。

箭头函数在参数和箭头之间不能换行

箭头函数的解析顺序相对||靠前

五、箭头函数不适用场景

（1）对象方法，且方法使用了this

对象无法构造单独的作用域

    var name = 'gaby'
    var person = {
        name: 'gabrielle',
        say: function () {
            console.log('say hello', this.name)
        }, //普通函数
        say2: () => {
            console.log('say2 hello', this.name)
        } //箭头函数
    }
    person.say()
    person.say2()

ES6의 화살표 기능에 대한 자세한 검토

解析：person.say2()方法是一个箭头函数，调用person.say2()的时候this指向全局对象，达不到预期。对象无法构成单独的作用域，定义say2()箭头函数的时候作用域在全局作用域。

（2）回调函数的动态this

    var button = document.querySelector('.btn');
    button.addEventListener('click', () => {
        this.classList.toggle('on');
    });

ES6의 화살표 기능에 대한 자세한 검토

解析：报错。按钮点击是一个回调函数，而箭头函数内部的this指向外一层普通函数的this，在这里就是window，所以报错。改成普通函数就不会报错

六、箭头函数与普通函数简单区别总结

（1）箭头函数语法更简洁清晰，快捷。

（2）箭头函数没有原型prototype，并不会自己创建this，并且this不能被修改，call等都不能修改到。只能间接修改被继承的this

（3）箭头函数的this在定义时就定了，继承外一层的普通函数

（4）如果箭头函数外一层再外一层都不能找到普通函数，在严格和非严格情况下都会指向window对象

（5）箭头函数的this指向全局，使用arguments会报未声明的错误

（6）箭头函数的this指向外一层的普通函数，使用argument继承该普通函数

（7）箭头函数不能构造函数，不能new.target，不能new，没有constructor

（8）箭头函数不支持重复命名参数，普通函数可以重复命名参数

【相关推荐：javascript视频教程、web前端】

위 내용은 ES6의 화살표 기능에 대한 자세한 검토의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：H5, WEB 프론트엔드, 빅 프론트엔드, WEB 풀스택을 어떻게 구별하나요?다음 기사：H5, WEB 프론트엔드, 빅 프론트엔드, WEB 풀스택을 어떻게 구별하나요?

ES6의 화살표 기능에 대한 자세한 검토

1. 화살표 함수 소개

1.1 화살표 함수란 무엇입니까

1.2 기본 구문

//只有一个参数，可以省去参数括号 let fn = name => { console.log(`hello ${name}!`) };
화살표 함수에 여러 매개변수가 있는 경우 매개변수를 쉼표(,)로 구분하고 괄호로 묶습니다.
let fn = (val1, val2, val3, val4) => { return [val1, val2, val3, val4]; }

2.2 화살표 함수는 자체 this를 생성하지 않습니다. 외부 레이어에 첫 번째 일반 함수가 있는 경우 정의되면 해당 this

(1) Chestnut 1
var id = 'Global'; //普通函数 function fn1() { setTimeout(function () { console.log(this.id) }, 1000); } //箭头函数 function fn2() { setTimeout(() => { console.log(this.id) }, 1000); } fn1.call({ id: 'obj' });//Global fn2.call({ id: 'obj' });//obj

에 바인딩됩니다. var id = 'Global'; var obj = { id: 'OBJ', a: function () { console.log(this.id) },//方法a普通函数定义 b: () => { console.log(this.id) }//方法b用箭头函数定义 }; obj.a();//OBJ obj.b();//Global

2.3 화살표 함수의 this는 상속되어 절대 변경되지 않으며 call/apply/bind도 변경할 수 없습니다.

2.5 箭头函数外层没有函数，严格模式和非严格模式下它的this都会指向window全局对象

2.6 多层嵌套函数this指向

2.7 箭头函数不能作为构造函数使用new

2.8 箭头函数不支持new.target

（1）箭头函数的this指向全局对象，在箭头函数中使用箭头函数会报错

（2）箭头函数的this指向普通函数，它的new.target就是指向该普通函数的引用

三、箭头函数的arguments规则

3.1 箭头函数没有自己的arguments

（1）箭头函数处于全局作用域中

（2）箭头函数的this如果指向普通函数,它的argumens继承于该普通函数

3.2 可以用rest替代，rest参数获取函数的多余参数

（1）基本用法

（2）使用注意事项

（3）rest和arguments函数比较

3.3 箭头函数不支持重复函数参数的名称

3.4 箭头函数不能用作Generator，不能使用yeild关键字

四、箭头函数的注意事项

五、箭头函数不适用场景

（1）对象方法，且方法使用了this

（2）回调函数的动态this

六、箭头函数与普通函数简单区别总结

관련 기사

ES6의 화살표 기능에 대한 자세한 검토

1. 화살표 함수 소개

1.1 화살표 함수란 무엇입니까

1.2 기본 구문

//只有一个参数，可以省去参数括号 let fn = name => { console.log(`hello ${name}!`) }; 화살표 함수에 여러 매개변수가 있는 경우 매개변수를 쉼표(,)로 구분하고 괄호로 묶습니다. let fn = (val1, val2, val3, val4) => { return [val1, val2, val3, val4]; }

2.2 화살표 함수는 자체 this를 생성하지 않습니다. 외부 레이어에 첫 번째 일반 함수가 있는 경우 정의되면 해당 this

(1) Chestnut 1 var id = 'Global'; //普通函数 function fn1() { setTimeout(function () { console.log(this.id) }, 1000); } //箭头函数 function fn2() { setTimeout(() => { console.log(this.id) }, 1000); } fn1.call({ id: 'obj' });//Global fn2.call({ id: 'obj' });//obj

에 바인딩됩니다. var id = 'Global'; var obj = { id: 'OBJ', a: function () { console.log(this.id) },//方法a普通函数定义 b: () => { console.log(this.id) }//方法b用箭头函数定义 }; obj.a();//OBJ obj.b();//Global

2.3 화살표 함수의 this는 상속되어 절대 변경되지 않으며 call/apply/bind도 변경할 수 없습니다.

2.5 箭头函数外层没有函数，严格模式和非严格模式下它的this都会指向window全局对象

2.6 多层嵌套函数this指向

2.7 箭头函数不能作为构造函数使用new

2.8 箭头函数不支持new.target

（1）箭头函数的this指向全局对象，在箭头函数中使用箭头函数会报错

（2）箭头函数的this指向普通函数，它的new.target就是指向该普通函数的引用

三、箭头函数的arguments规则

3.1 箭头函数没有自己的arguments

（1）箭头函数处于全局作用域中

（2）箭头函数的this如果指向普通函数,它的argumens继承于该普通函数

3.2 可以用rest替代，rest参数获取函数的多余参数

（1）基本用法

（2）使用注意事项

（3）rest和arguments函数比较

3.3 箭头函数不支持重复函数参数的名称

3.4 箭头函数不能用作Generator，不能使用yeild关键字

四、箭头函数的注意事项

五、箭头函数不适用场景

（1）对象方法，且方法使用了this

（2）回调函数的动态this

六、箭头函数与普通函数简单区别总结

관련 기사

//只有一个参数，可以省去参数括号 let fn = name => { console.log(`hello ${name}!`) };
화살표 함수에 여러 매개변수가 있는 경우 매개변수를 쉼표(,)로 구분하고 괄호로 묶습니다.
let fn = (val1, val2, val3, val4) => { return [val1, val2, val3, val4]; }

(1) Chestnut 1
var id = 'Global'; //普通函数 function fn1() { setTimeout(function () { console.log(this.id) }, 1000); } //箭头函数 function fn2() { setTimeout(() => { console.log(this.id) }, 1000); } fn1.call({ id: 'obj' });//Global fn2.call({ id: 'obj' });//obj