Apakah maksud anak panah tanda sama es6?

Anak panah tanda sama dengan "=>" dalam es6 merujuk kepada fungsi anak panah, yang merupakan singkatan bagi suatu fungsi ialah (parameter)=>{function body}; ungkapan fungsi anak panah Lebih ringkas daripada ungkapan fungsi, tiada pengikatan ini, super, argumen dan new.target, ia tidak boleh dipanggil melalui kata kunci baharu, dan pengikatan ini tidak boleh diubah

Persekitaran operasi ini tutorial: Sistem Windows 7, ECMAScript versi 6, komputer Dell G3

ialah fungsi anak panah, yang merupakan fungsi baharu yang ditambahkan dalam standard ES6, fungsi anak panah ialah sintaks baharu yang menggunakan anak panah (=>) untuk mentakrifkan fungsi Sintaks ungkapan fungsi anak panah adalah lebih ringkas daripada ungkapan fungsi, tetapi ia berbeza sedikit daripada fungsi JavaScript tradisional, terutamanya memfokuskan pada aspek berikut:

Tiada ini, super, argumen dan pengikatan new.target, dan nilainya ditentukan oleh fungsi bukan anak panah terdekat di pinggir=>

• Tidak boleh dipanggil melalui kata kunci baharu

• Tiada prototaip

• Tidak boleh menukar pengikatan ini

• Tidak objek argumen sokongan

• Tidak menyokong parameter dinamakan berulang

• Titik ini dalam badan fungsi sentiasa menghala ke objek di mana ia berada ditakrifkan, bukan kepada objek yang memanggilnya Object, kita tahu siapa yang melaksanakan fungsi dalam es5, kepada siapa ia ditunjuk. Anda boleh belajar dan mencubanya sendiri disyorkan untuk menggunakan Alat Pembangun Firefox(22) kini menyokong fungsi anak panah , anda juga boleh menggunakan Google Chrome, anda perlu melakukan dua perkara berikut:

• Dalam bar alamat Google Chrome, masukkan: about:flags , cari pilihan "Gunakan JavaScript pengalaman", dayakannya

Tambah penggunaan ketat pada permulaan fungsi, dan kemudian uji fungsi anak panah dalam Google Chrome anda (petua: sila Menggunakan Google Chrome v38, saya tertipu dengan versi penyemak imbas pada masa itu):

Mujurlah , semakin banyak penyemak imbas akan menyokong ciri ES6 pada masa hadapan Sekarang Anda telah melakukan semua persediaan, mari kita teruskan dan menyelaminya!

Topik baharu

• Orang ramai sedang membincangkan topik tentang ES6 baru-baru ini : Berkenaan fungsi anak panah, seperti ini:
Sintaks baharu

(function(){
    "use strict";
    // use arrow functions here
}());

Sintaks baharu muncul daripada perbincangan:

Sintaks baharu berfungsi pada pembolehubah boleh diisytiharkan dalam ungkapan Berikut ialah corak penggunaan fungsi anak panah:

Bagaimanakah fungsi anak panah dilaksanakan

=>

Kita boleh menukar fungsi biasa kepada fungsi anak panah:

Daripada perkara di atas Dalam contoh, kita dapat melihat bahawa sintaks fungsi anak panah sebenarnya mengembalikan fungsi baharu, yang mempunyai badan fungsi dan parameter.

param => expression

Oleh itu, kita boleh memanggil fungsi yang baru kita buat seperti ini:

//  一个参数对应一个表达式
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}

Fungsi pelaksanaan segera (IIFE)

Anda boleh menggunakan fungsi anak panah dalam fungsi pelaksanaan segera, contohnya:

Barisan kod ini menjana fungsi sementara Fungsi ini mempunyai parameter formal x, dan nilai pulangan bagi fungsi tersebut ialah x *2. Sistem akan segera melaksanakan fungsi sementara ini dan menetapkan 3 kepada parameter formal x.

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

Contoh berikut menerangkan situasi di mana terdapat berbilang baris kod dalam badan fungsi sementara:

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

Pemikiran BerkaitanFikirkan tentang fungsi berikut:

Kami telah menyenaraikan beberapa soalan biasa:

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

Dicipta oleh fungsi anak panah Argumen fungsi sementara tidak akan ditetapkan:

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

dan

nombor juga boleh disemak secara normal untuk fungsi sementara: Letakkan fungsi anak panah dalam kurungan adalah tidak sah:

Walaupun fungsi anak panah akan menjana fungsi sementara, fungsi sementara ini bukan pembina:

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

Tiada juga objek prototaip:

console.log(arguments); // not defined

Skoptypeofinstanceof函

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

Skop fungsi anak panah ini agak berbeza daripada fungsi lain mod, kata kunci ini menghala ke tetingkap Mod Strict tidak ditentukan Ini dalam pembina menunjuk ke contoh objek semasa. Sebagai contoh, apabila kita menambah pendengar peristiwa Apabila menggunakan fungsi, penunjuk ini mungkin tidak begitu langsung Malah, penunjuk pembolehubah ini (bukan hanya pembolehubah ini) dinilai mengikut peraturan: aliran skop. Di bawah saya akan menunjukkan bagaimana ini muncul dalam fungsi pendengar acara dan dalam fungsi objek:

Dalam fungsi pendengar acara:

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

Dalam pembina:

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

Dalam contoh ini, jika kita membiarkan fungsi Person.setName mengembalikan objek Person itu sendiri, kita boleh menggunakannya seperti ini:

func.prototype; // undefined

Dalam objek:

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代码上一个层次！尽量多使用箭头函数，你可以再你的浏览器测试你写的箭头函数代码，大家可以再评论区留下你对箭头函数的想法和使用方案！我希望大家能享受这篇文章，就像你会不就的将来享受箭头函数带给你的快乐.

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

Atas ialah kandungan terperinci Apakah maksud anak panah tanda sama es6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!