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;

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

时间： 2024-10-12 13:39:08

js学习笔记04-ES6函数(箭头函数与this),class的相关文章

node.js学习笔记（二）——回调函数

Node.js 异步编程的直接体现就是回调. 那什么是回调呢?回调指的是将一个函数作为参数传递给另一个函数,并且通常在第一个函数完成后被调用.需要指明的是,回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应.回调函数在完成任务后就会被调用,Node 使用了大量的回调函数,Node 所有 API 都支持回调函数.例如,我们可以一边读取文件,一边执行其他命令,在文件读取完成后,我们将文件内容作为回调函数的参数返回.这样在执行代码时就没有阻

js学习笔记（二）关于函数的 全局变量 和 局部变量 示例

全局变量(示例) <script> function square(num) /*传递参数*/ { total = num * num; /*定义全局变量*/ return total; /*返回数值total*/ } var total = 50; /*定义全局变量total*/ var number = square(20); /*引用square(参数)赋值给number*/ alert(total); alert(number); </script> 如果没有使用 var,

【学习】js学习笔记：内置顶层函数eval()的兼容用法

今天学了一个内置顶层函数,eval();其作用是将字符串转换成javascript命令执行,但必须符合语法,否则会报错. 如果写成window.eval(),则其定义的变量会在全局生效. 但是,在IE中,(测试为IE8及以下), window.eval()定义的变量不能在全局作用域生效,而ie有自己的一个函数为window.execScript()可以做到同样的效果.于是,在实际应用中,需要一个判断的函数,分别使用.如下: function evals(str){ if(typeof str!=

es6之箭头函数

es6之箭头函数 es6中的箭头函数实际上是一种语法糖,使用起来会更加方便. 1. 即它允许使用箭头(=>)来定义函数. 如 var f = v =>v; 这个箭头函数就等同于: var f = function (v) { return v; }; 2. 如果不需要给这个函数传递参数,就使用圆括号来代表参数部分,如下所示: var f = () =>8; 这个箭头函数就等同于: var f = function () { return 8; }; 3.如果传入的参数多于一个,同样也需要

初探swift语言的学习笔记四(类对象，函数)

作者:fengsh998 原文地址:http://blog.csdn.net/fengsh998/article/details/29606137 转载请注明出处 假设认为文章对你有所帮助,请通过留言或关注微信公众帐号fengsh998来支持我,谢谢! swift扩展了非常多功能和属性,有些也比較奇P.仅仅有慢慢学习,通过经验慢慢总结了. 以下将初步学习一下类的写法. 码工,最大爱好就是看码,而不是文字,太枯燥. // // computer.swift // swiftDemo // // C

Silverlight动画学习笔记(三)：缓动函数

(一)定义: 缓动函数:可以将自定义算术公式应用于动画 (二)为什么要用缓动函数: 您可能希望某一对象逼真地弹回或其行为像弹簧一样.您可以使用关键帧动画甚至 From/To/By 动画来大致模拟这些效果,但可能需要执行大量的工作,并且与使用算术公式相比动画的精确性将降低. (三)实例讲解: 1 <UserControl x:Class="AnimationStudy.EasingFunctionAnimation" 2 xmlns="http://schemas.mic

C++学习笔记8，const在函数方面的使用（二）

7.1和7.1.1由于越狱不成熟,半完美越狱后电脑上无法访问系统越狱目录,如var usr 等等. 今天有些意外地发现,可以在电脑上使用手机的越狱目录我手机 i4 7.1.1 联通 半完美越狱,没装Afc2Add,也没装Appsync 附上  --->我的半完美越狱过程 好了,下面直接正题 一.前提,必须安装ifile! 打开ifile,并转到 /var/mobile/media 目录下,然后点击右上角的 [ 编辑 ]如图: 二.点左下角的 + 号创建,如图: 三.点 [ 类型],选择[符号链接

ES6中箭头函数的作用

我们知道在ES6中,引入了箭头函数,其本质就是等同有ES5中的函数.类似于下面的写法: let test1=() => "abc"; let test2=() => { return "abc"}; let sum=(a,b) => a+b; 比如上面的3个ES6的箭头函数的写完,如果用ES5就像下面的写完一样. 其实其等同于下面的ES5的写法: function test1() { return "abc" } functio

ES6的箭头函数

ES6的箭头函数 普通函数 let f2 = function(a) { return a; } f1(1); //1 箭头函数 // 参数 => 函数体let f1 = v => v;f1(1); //1 这两种写法都是输出1,相当于把function给省略了,再在括号后面加上=> let show1 = function () { console.log('show1'); } let show2 = () => { console.log('show2'); } show1(

js学习笔记知识点

AJAX用法安全限制JSONPCORS面向对象编程创建对象构造函数原型继承class继承 AJAX 用法 AJAX不是JavaScript的规范,它只是一个哥们"发明"的缩写:Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求 在现代浏览器上写AJAX主要依靠XMLHttpRequest对象: 'use strict'; function success(text) { var textarea = document.getE