ES5与ES6之间区别

4 篇文章 0 订阅
1 篇文章 0 订阅
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也被正式纳入规范。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值