返回列表 回复 发帖

[JavaScript] 【转载】ES6箭头函数和它的作用域

箭头函数的使用模式:
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}[/code]

箭头函数是怎么实现的
  1. // 当前函数
  2. var func = function (param) {
  3.     return param.split(" ");
  4. }
  5. // 利用箭头函数实现
  6. var func = param => param.split(" ");
复制代码
立即执行函数(IIFE)
  1. ( (x, y) => {
  2.     x = x * 2;
  3.     return x + y;
  4. })( 3, "A" ); // "6A"
复制代码
一些常见的问题:

箭头函数创建的临时函数的arguments它不会被置:
  1. console.log(arguments); // not defined
复制代码
typeof和instanceof函数也能正常检查临时函数:
  1. func instanceof Function; // true
  2. typeof func; // function
  3. func.constructor == Function; // true
复制代码
把箭头函数放在括号内是无效的:
  1. //  有效的常规语法
  2. (function (x, y){
  3.     x= x * 2;
  4.     return x + y;
  5. } (3, "B") );

  6. // 无效的箭头函数语法
  7. ( (x, y) => {
  8.     x= x * 2;
  9.     return x + y;
  10. } ( 3, "A" ) );

  11. // 但是可以这样写就是有效的了:
  12. ( (x,y) => {
  13.     x= x * 2;return x + y;
  14. } )( 3,"A" );//立即执行函数
复制代码
尽管箭头函数会产生一个临时函数,但是这个临时函数不是一个构造函数:
  1. var instance= new func(); // TypeError: func is not a constructor
复制代码
同样也没有原型对象:
  1. func.prototype; // undefined
复制代码
可以保持作用域,this的指向就不会变了
  1. function Student(data){

  2.     this.name = data.name || "Jon Doe";
  3.     this.age = data.age>=0 ? data.age : -1;

  4.     this.getInfo = function () {
  5.         return this.name + ", " + this.age;
  6.     };

  7.     this.sayHi = function () {
  8.         window.setTimeout( ()=>{
  9.             // the only difference is here
  10.             console.log( this );
  11.         }, 100 );
  12.     }

  13. }

  14. let mary = new Student({
  15.     name: "Mary Lou",
  16.     age: 13
  17. });

  18. console.log( mary.getInfo() ); // "Mary Lou, 13"
  19. mary.sayHi();
  20. // Object { name: "Mary Lou", age: 13, ... }
复制代码
返回列表