建站
咨詢
售后
建站咨詢
新聞中心
箭頭函數(shù)
讓簡短單行函數(shù)更容易編寫和閱讀的
普通函數(shù)可以是函數(shù)聲明或函數(shù)表達(dá)式，但是箭頭函數(shù)始終是表達(dá)式
普通函數(shù)(把名字轉(zhuǎn)換為大寫)
const upperNames = ['Fish', 'RedHands', 'Sugarbeans'].map(function(name) {
return name.toUpperCase();
});將函數(shù)轉(zhuǎn)換為箭頭函數(shù),函數(shù)主體只有一個(gè)表達(dá)式,簡寫主體語法
1)刪掉關(guān)鍵字 function
2)刪掉圓括號
3)刪掉左右花括號
4)刪掉關(guān)鍵字 return
5)刪掉分號
6)在參數(shù)列表和函數(shù)主體之間添加一個(gè)箭頭（=>）
const upperNames = ['Fish', 'RedHands', 'Sugarbeans'].map( name => name.toUpperCase() );箭頭函數(shù)的主體內(nèi)需要多行代碼,常規(guī)主體語法
1)它將函數(shù)主體放在花括號內(nèi)
2)有返回內(nèi)容也需要使用 return。
箭頭函數(shù)存儲(chǔ)在變量中
多個(gè)或者0個(gè)參數(shù)就需要將參數(shù)列表放在()中
有時(shí)候''_"表示一個(gè)參數(shù),但是不使用它
const greet = name=>`Hello ${name}`;
greet("fish");
const students = (name,age) =>`Hello My name is ${name}, I'm ${age}`;
students("fish",19);
const firstDemo = _=>`Hello world!`; //參數(shù)為"_"箭頭函數(shù)中的this
箭頭函數(shù)內(nèi)的，this 的值與函數(shù)外面的 this 的值一樣
function IceCream() {
this.scoops = 0;
}
IceCream.prototype.addScoop = function() {
const cone = this; // 設(shè)置 `this` 給 `cone`變量 ,如果使用箭頭函數(shù)就不需要
setTimeout(function() {
cone.scoops++; // 引用`cone`變量
console.log('scoop added!');
}, 500);
};
const dessert = new IceCream();
dessert.addScoop(); //500毫秒之后,dessert.scoops = 1上面的閉包代碼用箭頭函數(shù)就可以不需要變量cone
function IceCream() {
this.scoops = 0;
}
// 為 IceCream 添加 addScoop 方法
IceCream.prototype.addScoop = function() {
setTimeout(() => {
this.scoops++; //直接使用函數(shù)外的對象
console.log('scoop added!');
}, 500);
};函數(shù)參數(shù)默認(rèn)值
function getName(name){
name = (typeof name !== 'undefined') ? name : 'fish';
return name;
}
function getName(name = "fish") { // 添加等號 ( = ) 以及默認(rèn)值
return name;
}默認(rèn)值和解構(gòu)數(shù)組
// = [] 防止調(diào)用無參函數(shù)報(bào)錯(cuò) Cannot read property 'Symbol(Symbol.iterator)' of undefined
function createGrid([width = 5, height = 5] = []) { //=[], createGrid()可以直接使用
return `Generating a grid of ${width} by ${height}`;
}默認(rèn)值和解構(gòu)對象
函數(shù)可以讓對象成為一個(gè)默認(rèn)參數(shù)，并使用對象解構(gòu)
與數(shù)組默認(rèn)值相比,因?yàn)閿?shù)組是基于位置的,對象默認(rèn)值具備的一個(gè)優(yōu)勢是跳過參數(shù)進(jìn)行處理
而數(shù)組是基于位置的,需要傳入 undefined 以跳過參數(shù)
//={} 同數(shù)組一樣
function createSundae({scoops = 1, toppings = ['Hot Fudge']} = {}) {
const scoopText = scoops === 1 ? 'scoop' : 'scoops';
return `Your sundae has ${scoops} ${scoopText} with ${toppings.join(' and ')} toppings.`;
}ES6 class創(chuàng)建類
ES5 構(gòu)造函數(shù)創(chuàng)建“類”
function Plane(numEngines) { //Plane 函數(shù)是一個(gè)構(gòu)造函數(shù)
this.numEngines = numEngines;
this.enginesActive = false;
}
// 由所有實(shí)例 "繼承" 的方法
Plane.prototype.startEngines = function () {
console.log('starting engines...');
this.enginesActive = true;
};
const richardsPlane = new Plane(1); //使用new創(chuàng)建新的 Plane 對象
richardsPlane.startEngines();
const jamesPlane = new Plane(4);
jamesPlane.startEngines();新的 class 語法編寫后的代碼
class Plane { //
constructor(numEngines) {
this.numEngines = numEngines;
this.enginesActive = false;
}
startEngines() {
console.log('starting engines…');
this.enginesActive = true;
}
}
typeof Plane; // function 新語法定義的類也只是一種函數(shù)靜態(tài)方法static
靜態(tài)方法不會(huì)被實(shí)例繼承，而是直接通過類來調(diào)用
三種調(diào)用方法,調(diào)用與實(shí)例無關(guān)
1)父類直接調(diào)用
2)子類繼承父類后調(diào)用
3)子類通過super對象調(diào)用
class Foo {
static classMethod() {
return 'hello';
}
}
Foo.classMethod(); //hello 父類直接調(diào)用
class Bar extends Foo {
}
Bar.classMethod(); //hello 子類繼承父類調(diào)用
class Cla extends Foo {
return super.classMethod(); //hello super調(diào)用
}super和extends
子類繼承父類使用關(guān)鍵字 extends
在構(gòu)造方法中，super 被用作函數(shù),如果子類的構(gòu)造方法中有this和super,super必須放在this的前面使用。在子類的方法中，super 被用作對象,調(diào)用父類的方法
class Tree { // ES6 創(chuàng)建類,子類
constructor(size = '10', leaves = {spring: 'green', summer: 'green', fall: 'orange', winter: null}) {
this.size = size;
this.leaves = leaves;
this.leafColor = null;
}
changeSeason(season) {
this.leafColor = this.leaves[season];
if (season === 'spring') {
this.size += 1;
}
}
}
class Maple extends Tree { //繼承父類
constructor(syrupQty = 15, size, leaves) {
super(size, leaves); //構(gòu)造方法中的super
this.syrupQty = syrupQty;
}
changeSeason(season) {
super.changeSeason(season); //子類方法中的super
if (season === 'spring') {
this.syrupQty += 1;
}
}
gatherSyrup() {
this.syrupQty -= 3;
}
}function Tree(size, leaves) { //ES5創(chuàng)建類,子類
this.size = size || 10;
this.leaves = leaves || {spring: 'green', summer: 'green', fall: 'orange', winter: null};
this.leafColor;
}
Tree.prototype.changeSeason = function(season) {
this.leafColor = this.leaves[season];
if (season === 'spring') {
this.size += 1;
}
}
function Maple (syrupQty, size, leaves) { //子類
Tree.call(this, size, leaves); //使用父類的屬性
this.syrupQty = syrupQty || 15;
}
Maple.prototype = Object.create(Tree.prototype); //函數(shù)原型設(shè)置為基類原型
Maple.prototype.constructor = Maple;//重新建立constructor和構(gòu)造函數(shù)的連接
Maple.prototype.changeSeason = function(season) {
Tree.prototype.changeSeason.call(this, season); //重寫父類的方法
if (season === 'spring') {
this.syrupQty += 1;
}
}
Maple.prototype.gatherSyrup = function() {
this.syrupQty -= 3;
}Tree.call(this, size, leaves);
Maple.prototype = Object.create(Tree.prototype);
Maple.prototype.constructor = Maple;
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
當(dāng)前文章：js學(xué)習(xí)筆記04-ES6函數(shù)(箭頭函數(shù)與this),class-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://ef60e0e.cn/article/cdsioj.html
