js学习笔记04-ES6函数(箭头函数与this),class

让简短单行函数更容易编写和阅读的
普通函数可以是函数声明或函数表达式，但是箭头函数始终是表达式
普通函数(把名字转换为大写)

const upperNames = [‘Fish‘, ‘RedHands‘, ‘Sugarbeans‘].map(function(name) { ??return name.toUpperCase();});

将函数转换为箭头函数,函数主体只有一个表达式,简写主体语法
1)删掉关键字 function
2)删掉圆括号
3)删掉左右花括号
4)删掉关键字 return
5)删掉分号
6)在参数列表和函数主体之间添加一个箭头（=>）

const upperNames = [‘Fish‘, ‘RedHands‘, ‘Sugarbeans‘].map( name => name.toUpperCase() );

箭头函数的主体内需要多行代码,常规主体语法
1)它将函数主体放在花括号内
2)有返回内容也需要使用 return。

箭头函数存储在变量中

多个或者0个参数就需要将参数列表放在()中
有时候‘‘_"表示一个参数,但是不使用它

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!`; ?//参数为"_"

箭头函数中的this

箭头函数内的，this 的值与函数外面的 this 的值一样

function IceCream() { ?this.scoops = 0;}IceCream.prototype.addScoop = function() { ?const cone = this; // 设置 `this` 给 `cone`变量 ,如果使用箭头函数就不需要 ?setTimeout(function() { ???cone.scoops++; // 引用`cone`变量 ???console.log(‘scoop added!‘); ?}, 500);};const dessert = new IceCream();dessert.addScoop(); //500毫秒之后,dessert.scoops = 1

上面的闭包代码用箭头函数就可以不需要变量cone

function IceCream() { ?this.scoops = 0;}// 为 IceCream 添加 addScoop 方法IceCream.prototype.addScoop = function() { ?setTimeout(() ?=> { ??this.scoops++; //直接使用函数外的对象 ???console.log(‘scoop added!‘); ?}, 500);};

函数参数默认值

function getName(name){ ???name = (typeof name !== ‘undefined‘) ? name : ‘fish‘; ????return name;}function getName(name = "fish") { ???// 添加等号 ( = ) 以及默认值 ???return name;}

默认值和解构数组

// = [] ?防止调用无参函数报错 Cannot read property ‘Symbol(Symbol.iterator)‘ of undefined function createGrid([width = 5, height = 5] = []) { ?//=[], createGrid()可以直接使用 ?return `Generating a grid of ${width} by ${height}`;}

默认值和解构对象

函数可以让对象成为一个默认参数，并使用对象解构
与数组默认值相比,因为数组是基于位置的,对象默认值具备的一个优势是跳过参数进行处理
而数组是基于位置的,需要传入 undefined 以跳过参数

//={} 同数组一样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创建类

ES5 构造函数创建“类”

function Plane(numEngines) { ?//Plane 函数是一个构造函数 ?this.numEngines = numEngines; ?this.enginesActive = false;}// 由所有实例 "继承" 的方法Plane.prototype.startEngines = function () { ?console.log(‘starting engines...‘); ?this.enginesActive = true;};const richardsPlane = new Plane(1); //使用new创建新的 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 ???????新语法定义的类也只是一种函数

静态方法static

静态方法不会被实例继承，而是直接通过类来调用
三种调用方法,调用与实例无关
1)父类直接调用
2)子类继承父类后调用
3)子类通过super对象调用

class Foo { ?static classMethod() { ???return ‘hello‘; ?}}Foo.classMethod(); ?//hello 父类直接调用class Bar extends Foo {}Bar.classMethod(); ?//hello 子类继承父类调用class Cla extends Foo { ???return super.classMethod(); //hello super调用}

super和extends

子类继承父类使用关键字 extends
在构造方法中，super 被用作函数,如果子类的构造方法中有this和super,super必须放在this的前面使用。在子类的方法中，super 被用作对象,调用父类的方法

 class Tree { ?// ES6 创建类,子类 ?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); //构造方法中的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创建类,子类 ?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); //函数原型设置为基类原型Maple.prototype.constructor = Maple;//重新建立constructor和构造函数的连接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;

js学习笔记04-ES6函数(箭头函数与this),class

原文地址：http://blog.51cto.com/5845595/2116907