1.箭头函数
箭头函数ES6中新的函数定义形式,function name(arg1,arg2){…}可以写成 (arg1,arg2)=>{…};
意义在于:1.函数写法更加简洁;2.可以解决ES6之前函数执行中this是全局变量的问题。
例如:
function fn(){
console.log('real',this); //'real',{a:100}
var arr = [1,2,3];
//普通JS
arr.map(function(item){
console.log('js',this); //'js',window
return item+1;
})
/ES6
arr.map(item=>{
console.log('es6',this); // 'es6',{a:100}
return item+1;
})
}
fn.call({a:100})
例子中ES6之前版本,this并没有指向应该指向的“{a:100}”,而是指向了window,这很让人费解;但是ES6箭头函数解决了这个问题,this指向了正确的调用对象。
如果想了解关于this的详细解析,可以访问我的另一篇文章《this详解》https://blog.csdn.net/kf_qyl/article/details/81300787
2.ES6模块化使用
ES6中的模块化实现更加简洁,例如:
如果只是输出一个唯一对象,使用export default即可,代码如下:
//创建util.js文件
export default {
a:100;
}
//创建index.js文件
import obj from './util.js'
console.log(obj);
如果想输出多个对象,就不能用default了,且import的时候需要加上{…},代码如下:
//创建util.js文件
export function fn1(){
alert('fn1')
}
export function fn2(){
alert('fn2')
}
//创建index.js文件
import {fn1,fn2} from 'util.js'
fn1();
fn2();
3.ES6 class 和普通构造函数的区别
普通JS的构造函数
function MathHandle(x,y){
this.x=x;
this.y=y;
}
MathHandle.prototype.add = function(){
return this.x + this.y
}
var m = new MathHandle(2,3);
console.log(m.add()); //5
ES6的构造函数
class MathHandle {
constructor (x,y) {
this.x = x;
this.y = y;
}
add() {
return this.x + this.y;
}
}
const m = new MathHandle(1,2);
console.log(m.add()) //3
需要注意以下几点:
1.class是一种新的语法形式,是class name{…}这种形式和函数的写法完全不同;
2.class创建的构造函数,函数体要放在class中的constructor函数中,constructor即构造器,初始化实例的默认行为;
3.class中函数的写法是add(){…}这种形式,并没有function关键字。
4.ES6继承的实现
普通JS实现继承
function Animal(){
this.eat = function(){
console.log('animal eat')
}
}
function Dog(){
this.bark = function(){
console.log('dog bark')
}
}
Dog.prototype = new Animal();
var hsp = new Dog();
hsp.eat(); //animal eat
hsp.bark(); //dog bark
ES6的继承
class Animal {
constructor(name) {
this.name = name;
}
eat() {
console.log(this.name, 'eat')
}
}
class Dog extends Animal {
constructor(name) {
super(name);
this.name = name;
}
say() {
console.log(this.name} ,'say')
}
}
const dog = new Dog('哈士奇');
dog.say()
注意:
1.使用extend即可实现继承,这样更加符合经典面向对象语言的写法;
2.子类的constructor一定要执行super(),以调用父类的constructor;
其中ES6还增加了一种基本类型:symbol,两个数据结构:set,map;promise也被正式纳入规范。