es6 등호 화살표는 무엇을 의미합니까?

es6의 등호 화살표 "=>"는 함수의 약칭인 화살표 함수를 나타냅니다. 구문은 (매개변수)=>{함수 본문};"입니다. 화살표 함수 표현식의 구문은 다음과 같습니다. 함수 표현식보다 더 간결합니다. this, super, 인수 및 new.target에 대한 바인딩이 없으며 new 키워드를 통해 호출할 수 없으며 this의 바인딩을 변경할 수 없습니다. 이 튜토리얼의 환경: Windows 7 시스템, ECMAScript 버전 6, Dell. G3 컴퓨터

=>는 이름에서 알 수 있듯이 ES6 표준에 추가된 새로운 기능입니다. 화살표 함수는 화살표(=>)를 사용하는 새로운 함수입니다. 구문, 화살표 함수 표현식의 구문은 함수 표현식보다 간결하지만 기존 JavaScript 함수와는 약간 다르며 주로 다음 측면에 중점을 둡니다.

• this, super, 인수 및 new.target에 대한 바인딩이 없으며 해당 값은 주변에서 가장 가까운 비화살표 함수에 의해 결정됩니다 li>

• 새 키워드를 통해 호출할 수 없습니다

• 프로토타입이 없습니다=>是箭头函数，是ES6标准中新增的一种新的函数。顾名思义，箭头函数是一种使用箭头（=>）定义函数的新语法，箭头函数表达式的语法比函数表达式更简洁，但是它与传统的JavaScript函数有些许不同，主要集中在以下方面：

  • 没有this、super、arguments和new.target绑定，其值由外围最近一层非箭头函数决定

  • 不能通过new关键字调用

  • 没有原型

  • 不可以改变this的绑定

  • 不支持arguments对象

  • 不支持重复的命名参数

  • 函数体内的this的指向始终是指向定义它所在的对象，而不会指向调用它的对象，我们知道es5中的函数是谁执行它，它就指向谁。

  执行环境

  你可以自己去学习和尝试下, 你可以简单的把示例程序代码复制到你的浏览器控制台下. 现在, 推荐使用Firefox(22+)开发者工具, Firefox(22+)开发者工具现在支持箭头函数,你也可以使用谷歌浏览器. 如果你使用谷歌浏览器, 你必须要做下列两件事:

  • 在谷歌浏览器中地址栏中输入：about:flags, 找到 "使用体验性JavaScript"选项，开启使用。

  • 在函数的开头加上use strict,然后再在你的谷歌浏览中测试箭头函数吧(提示：请用谷歌浏览器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.

  下面的例子描述了临时函数体里有多行代码的情况：

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

  相关思考

  思考下面的函数：

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

  我们列出了一些常见的问题：

  箭头函数创建的临时函数的arguments它不会被置:

  console.log(arguments); // not defined

  typeof和instanceof函

• 이 바인딩을 변경할 수 없습니다

• 객체 인수를 지원하지 않습니다

• 반복적으로 명명된 매개 변수를 지원하지 않습니다

• 함수 본문의 이는 항상 호출하는 객체가 아니라 정의된 객체를 가리킵니다. es5에서 함수를 실행하는 사람은 누구나 이를 가리킬 것입니다.

실행 환경

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

• Google Chrome의 주소 표시줄에 about:flags를 입력하고 "경험적 JavaScript 사용" 옵션을 찾아 활성화하세요

  li>

• 함수 시작 부분에 추가 strict를 사용하려면 Go로 가서 Chrome에서 화살표 기능을 테스트해 보세요. (팁: Google Chrome v38을 사용하세요. 당시 브라우저 버전에 속았습니다):

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

Lucky 앞으로 점점 더 많은 브라우저가 ES6 기능을 지원할 예정입니다. 이제 모든 준비 작업을 완료했으니 계속해서 살펴보겠습니다.

🎜🎜새로운 주제🎜🎜🎜 🎜ES6에 관한 주제가 최근에 논의되었습니다. 화살표 함수에 관해서는 다음과 같습니다: 🎜

//  有效的常规语法
(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" );//立即执行函数

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

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

🎜새로운 구문이 변수에 적용됩니다. 표현식 변수에서 여러 개의 선언을 선언할 수 있습니다. 다음은 화살표 함수의 사용 패턴입니다. 🎜

func.prototype; // undefined

🎜🎜🎜화살표 함수 구현 방법🎜🎜
🎜🎜일반 함수를 화살표 함수로 변환할 수 있습니다. 구현 방법:
🎜

document.body.addEventListener('click', 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吧。

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

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

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

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

🎜🎜 🎜 관련 생각 🎜🎜🎜🎜 다음 함수를 고려하십시오. 🎜

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

🎜 몇 가지 일반적인 문제를 나열했습니다. 🎜🎜 화살표 함수로 생성된 임시 함수의 인수는 설정되지 않습니다: 🎜

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, ... }

🎜typeof 및 instanceof function도 일반적으로 임시 함수를 확인할 수 있습니다: 🎜

var arr = ['a', 'e', 'i', 'o', 'u'];
arr.forEach(vowel => {
    console.log(vowel);
});

🎜 화살표 함수를 괄호 안에 넣는 것은 유효하지 않습니다: 🎜

//在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

🎜 프로토타입 객체도 없습니다: 🎜

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

🎜🎜🎜Scope🎜🎜🎜🎜 이 화살표 함수의 범위는 다른 함수와 다소 다릅니다. 엄격하게 Mode가 아니라면 이 키워드는 창을 가리키고, strict 모드는 정의되지 않습니다. this는 생성자에 있습니다. 현재 객체 인스턴스를 가리킵니다. 이것이 객체의 함수 내에 있으면 this는 객체를 가리키고 DOM 요소를 가리킬 수 있습니다. 예를 들어 이벤트 수신 함수를 추가하면 this를 가리키는 것이 그다지 좋지 않을 수 있습니다. 실제로 이 변수뿐만 아니라 이 변수의 지정은 범위 흐름이라는 규칙에 따라 판단됩니다. 아래에서는 이것이 이벤트 리스너 함수와 객체 함수 내에서 어떻게 나타나는지 보여드리겠습니다. 🎜🎜 이벤트 리스너 함수에서: 🎜

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

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

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

但是当执行流(比如使用了setTimeout)和作用域变了的时候，this也会变。

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的指向会变成全局对象,或者是在严格模式下就是undefine,这样在setTimeout函数里面我们使用其他的变量去指向this对象，比如self，that,当然不管你用什么变量，你首先应该在setTimeout访问之前，给self，that赋值，或者使用bind方法不然这些变量就是undefined。

这是后就是箭头函数登场的时候了，它可以保持作用域，this的指向就不会变了。

让我们看下上文起先的例子，在这里我们使用箭头函数：

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函数中，我们使用了箭头函数，当前作用域是在student对象的一个方法中，箭头函数生成的临时函数的作用域也就是student对象的sayHi函数的作用域。所以即使我们在setTimeout调用了箭头函数生成的临时函数，这个临时函数中的this也是正确的指向。

有趣和有用的使用

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

例如我们可以这么使用：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)=&gt; a < b? 1: -1 );

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

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

总结

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

更多编程相关知识，请访问：编程入门！！

위 내용은 es6 등호 화살표는 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!