AirJD 焦点
ES6入门分享
  • ES6编译器babel简单的配置与使用
  • ES6语法糖
  •   npm install --save-dev babel-cli
  •   npm install --save-dev babel-preset-es2015
package.json:
{
  "name": "my-project",
  "version": "1.0.0",
  "description": "che",
  "repository": "",
  "scripts": {
    "build": "babel src -d lib"
  },
  "devDependencies": {
    "babel-cli": "^6.14.0",
    "babel-preset-es2015": "^6.14.0"
  },
  "dependencies": {}
}
.babelrc:

{
    "presets": [
      "es2015"
    ],
    "plugins": []
 }

//在项目下执行 npm run build
//就可以把scr目录下的es6的js编译到lib
//目录下
一  ES6编译器babel简单的配置与使用
                   二.   ES6语法糖
  • let命令,用来声明变量。它的用法类似于var,但不会变量提升,要在声明后使用否则报错。
  • 声明的变量,只在let命令所在的代码块内有效。
1.let与const命令
var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6
//////////////////////////////
console.log(a);// ReferenceError
let a = 1 ;
  • const命令,用来声明常量。而且声明的时候必须进行初始化,之后不可更改,其他特性与let类似。
  • 不会变量提升,要在声明后使用否则报错。而且所声明的变量,只在const命令所在的代码块内有效。
2.箭头函数
var sum = (num1, num2) => num1 + num2;
// 等同于:
var sum = function(num1, num2) {
    return num1 + num2;
 };
写法上要注意的:
  • () => { ... } // 参数用 () 扩上但是只有一个参数可以省略();
  • x => { ... } // 一个参数可以省略 ();
  • (x, y) => { return ... } // 多参数不能省略 ();
  • (x, y)=> ... // 直接return的可以省略大括号和return;
  • (x, y) => { return {x:x} } // return对象的;
  • (x, y) => ({x:x})  // return对象的如果想简写必须用小括号把大括号包上;
箭头函数的几个特性:
1.箭头函数this被绑定为函数定义时的 this 且无法改变(内部没有自己的this) 。 $(".nav-sports").on('click',()=>{alert(this)}); // window $(".nav-sports").on('click',function(){alert(this)}); //html element var o = { x : 1, func : function() { console.log(this.x) }, test : function() { setTimeout(() => { this.func() }, 100); } }; o.test(); // 1
2.不支持arguments
可以用es6中的剩余函数来解决参数的问题。 var fun1 =(...arts)=>{alert("你传入了" + arts.length + "个的参数.")};
与剩余参数对应的就是拓展参数。
var people=['Wayou','John','Sherlock']; //sayHello函数本来接收三个单独的参数人一,人二和人三 function sayHello(people1,people2,people3){ console.log('Hello'+ people1 + people2 + people3); } //但是我们将一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数 sayHello(...people);//输出:HelloWayouJohnSherlock //而在以前,如果需要传递数组当参数,我们需要使用函数的apply方法 sayHello.apply(null,people);//输出:HelloWayouJohnSherlock 还有默认参数: var fun2 =(a = 1 ,b = 2)=>{};
3.箭头函数没有prototype,箭头函数不能被new
    new一个普通函数发生了什么?
1.首先创建一个空的对象{}
2.并且this指向这个空对象,并且已经完成了原型链的构建
3.接下来就是执行函数里的代码,最后返回一个这个对象。
因为箭头函数没有prototype而且this指针是不变的,
这么设计是因为在es6中有了class
3.class
//没有类的时候  我们通过构造函数原型链完成类
//例如: function Person(x) { this.name = x; } Person.prototype.say = function () { return 'my name'+this.name; }; var p = new Person('John'); //es6 class 的写法 class Person{ constructor(x){ this.name = x; } say() { return 'my name'+this.name; }; }
//ES5的构造函数person对应的就是ES6class里面的构造方法,
typeof Person // function
浏览器的class实现与原来构造函数一致
ES6中class与ES构造函数不同的地方:
1.类的构造函数,不使用new是没法调用的,会报错。这是它跟普通构造函数的一个主要区别,后者不用new也可以执行。
2.Class不存在变量提升,Class一定要在声明之后使用与普通构造函数的不同。

属性定义在constructor里面方法定义在外,通过new命令生成对象实例属性定义在对象本身,方法在class的原型下,这些都与ES5的行为保持一致。

ES6的Class只是ES5的构造函数的一层包装,所以函数的许多特性都被Class继承,包括name属性。
name属性总是返回紧跟在class关键字后面的类名。
var Person= class P{}//name 指的是P。 而我们要对它实例化的时候是new Person();
P可以在class内部使用指的是当前class;

类的继承(extends)http://keenwon.com/1524.html
class Women extends Person {
  constructor(x,age) {
    this.age = age; // ReferenceError
    super(x); // 调用父类的constructor(x)
    this.age = age;
  }

  say() {
    return  super.toString()+"and"+this.age; // 调用父类的say()
  }
}
通过Women实力化出的对象同时是Person和women两个类的实例;// instanceof
super关键字,有两种用法,含义不同。
(1)作为函数调用时(即super(...args)),super代表父类的构造函数。
(2)作为对象调用时(即super.prop或super.method()),super代表父类。注意,此时super即可以引用父类实例的属性和方法,也可以引用父类的静态方法。
static关键字。
类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。

一般用到static声明的方法都做为工具函数。可以用父类点方法的形式调用不能在实例化的对象下调用。但父类的静态方法,可以被子类继承。也可以在子类中用super.的方式调用。
Class的取值函数(getter)和存值函数(setter)
在Class内部可以使用get和set关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。
class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: '+value);
  }
} ——>

<——
let inst = new MyClass();

inst.prop = 123;
// setter: 123

inst.prop
// 'getter'
end
AirJD

没有录音文件
00:00/00:00
加收藏

ES6入门教程分享

发布者   简介 阿克萨赖
发布于 1472374562477  浏览 2619 关键词 JavaScript 
分享到
支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。