那些你听说的ES6

最新推荐文章于 2024-10-30 09:45:05 发布

ZiO_TiCN

最新推荐文章于 2024-10-30 09:45:05 发布

阅读量154

点赞数

分类专栏： web前端文章标签： es6

本文链接：https://blog.csdn.net/ZiO_TiCN/article/details/91470184

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ECMAScript6

简介：

众所周知，ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

回顾版本与历史：

ES6 是 ECMAScript 标准十余年来变动最大的一个版本，为其添加了许多新的语法特性。

1997 年 ECMAScript 1.0 诞生。
1998 年 6 月 ECMAScript 2.0 诞生，包含一些小的更改，用于同步独立的 ISO 国际标准。
1999 年 12 月 ECMAScript 3.0诞生，它是一个巨大的成功，在业界得到了广泛的支持，它奠定了 JS 的基本语法，被其后版本完全继承。直到今天，我们一开始学习 JS ，其实就是在学 3.0 版的语法。
2000 年的 ECMAScript 4.0 是当下 ES6 的前身，但由于这个版本太过激烈，对 ES 3 做了彻底升级，所以暂时被"和谐"了。
2009 年 12 月，ECMAScript 5.0 版正式发布。ECMA 专家组预计 ECMAScript 的第五个版本会在 2013 年中期到 2018 年作为主流的开发标准。2011年6月，ES 5.1 版发布，并且成为 ISO 国际标准。
2013 年，ES6 草案冻结，不再添加新的功能，新的功能将被放到 ES7 中；2015年6月， ES6 正式通过，成为国际标准。

方法

转载请注明预见才能遇见的博客：http://my.csdn.net/
原文地址：http://blog.csdn.net/pcaxb/article/details/53759637

ES6 类(Class)基本用法和静态属性+方法详解
JavaScript语言的传统方法是通过构造函数,定义并生成新对象,prototype 属性使您有能力向对象添加属性和方法。下面是通过传统的方式创建和使用对象的案例:

//Person.js
function Person(x,y){
this.x = x;
this.y = y;
}

Person.prototype.toString = function (){
return (this.x + “的年龄是” +this.y+“岁”);
}
export {Person};
//index.js
import {Person} from ‘./Person’;
let person = new Person(‘张三’,12);
console.log(person.toString());

1.Class的基本用法

ES6引入了Class（类）这个概念,作为对象的模板,通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用ES6的“类”改写,就是下面这样。
//Person.js
class Person{
// 构造
constructor(x,y){
this.x = x;
this.y = y;
}

toString(){
    return (this.x + "的年龄是" +this.y+"岁");
}

}
export {Person};
//index.js
import {Person} from ‘./Person’;
let person = new Person(‘张三’,12);
console.log(person.toString());
上面代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。也就是说,ES5的构造函数Person,对应ES6的Person类的构造方法。Person类除了构造方法,还定义了一个toString方法。注意,定义“类”的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错。
ES6的类,完全可以看作构造函数的另一种写法。
//Person.js
console.log(typeof Person);//function
console.log(Person === Person.prototype.constructor);//true
上面代码表明,类的数据类型就是函数,类本身就指向构造函数。
//Person.js
console.log(Person.prototype);//输出的是一个对象
构造函数的prototype属性,在ES6的“类”上面继续存在。事实上,类的所有方法都定义在类的prototype属性上面,通过以下方式可是覆盖类中的方法,当然定义类的时候也可以通过这个方式添加方法。
//index.js
Person.prototype = {
getName(){
return ‘张三’;
},
getAge(){
return ‘12’;
}
};
在类的实例上面调用方法，其实就是调用原型上的方法
//index.js
console.log(person.constructor === Person.prototype.constructor);//true
Object.assign方法可以给对象Person动态的增加方法,而Person.prototype = {}是覆盖对象的方法,或者在初始化的时候添加方法。
//index.js
Object.assign(Person.prototype,{
getWidth(){
console.log(‘12’);
},
getHeight(){
console.log(‘24’);
}
});
console.log(Person.prototype);
toString方法是Person类内部定义的方法，ES6中它是不可枚举的,这一点与ES5的行为不一致,ES5是可以枚举的。

//index.js
//ES5
console.log(Object.keys(Person.prototype));//[“toString”, “getWidth”, “getHeight”]
console.log(Object.getOwnPropertyNames(Person.prototype));//[“constructor”, “toString”, “getWidth”, “getHeight”]

//ES6
console.log(Object.keys(Person.prototype));//[“getWidth”, “getHeight”]
console.log(Object.getOwnPropertyNames(Person.prototype));//[“constructor”, “toString”, “getWidth”, “getHeight”]
Object.keys（obj），返回一个数组，数组里是该obj可被枚举的所有属性。Object.getOwnPropertyNames(obj)，返回一个数组，数组里是该obj上所有的实例属性。
在ES6中,类的属性名可以使用表达式,具体实现方式如下

//Article.js
let methodName = “getTitle”;
export default class Article{
methodName{
console.log(‘输出文章的标题1’);
}
}
//index.js
import Article from ‘./Article’;
//console.log(Article.prototype);
let article = new Article();
article.getTitle()
constructor方法是类的构造函数是默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个默认的constructor方法会被添加。所以即使你没有添加构造函数,也是有默认的构造函数的。一般constructor方法默认返回实例对象this，但是也可以指定constructor方法返回一个全新的对象,让返回的实例对象不是该类的实例。

//ConstructorStu.js
import Article from './Article';
export default class ConstructorStu{
    // 构造
    constructor() {
        console.log('constructor');
        return new Article();
    }
}
//index.js
import ConstructorStu from './ConstructorStu';
console.log('==111==');
console.log(new ConstructorStu() instanceof ConstructorStu);//false
console.log('==222==');
let cons =  new ConstructorStu();
console.log('==333==');
cons.constructor();
console.log('==444==');
运行结果
==111==
constructor
false
==222==
constructor
==333==
==444==

说明:类的构造函数，不使用new是没法调用的,即使你使用实例对象去调用也是不行的,这是它跟普通构造函数的一个主要区别。
实例的属性除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即定义在class上)。hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。如果有，返回true，否则返回false。
//Person.js
class Person{
// 构造
constructor(x,y){
this.x = x;
this.y = y;
}

toString(){
    return (this.x + "的年龄是" +this.y+"岁");
}

}

let person = new Person(‘lis’,8);
console.log(person.toString());
console.log(person.hasOwnProperty(‘x’));//true
console.log(person.hasOwnProperty(‘y’));//true
console.log(person.hasOwnProperty(‘toString’));//false
console.log(person.proto.hasOwnProperty(‘toString’));//true
说明:上面结果说明对象上有x,y属性,但是没有toString属性。也就是说x,y是定义在this对象上,toString定义在类上。
let person1 = new Person(‘张三’,12);
let person2 = new Person(‘李四’,13);
console.log(person1.proto === person2.proto);//true
类的所有实例共享一个原型对象,person1和person2都是Person的实例,它们的原型都是Person.prototype，所以__proto__属性是相等的。这也意味着，可以通过实例的__proto__属性为Class添加方法。
let person1 = new Person(‘张三’,12);
let person2 = new Person(‘李四’,13);
person1.proto.getH = function (){
return “Height”;
};
console.log(person1.getH());
console.log(person2.getH());
上面代码在person1的原型上添加了一个getH方法，由于person1的原型就是person2的原型，因此person2也可以调用这个方法。而且，此后新建的实例person3也可以调用这个方法。这意味着，使用实例的__proto__属性改写原型，必须相当谨慎，不推荐使用，因为这会改变Class的原始定义，影响到所有实例。
__proto__参考资料:点击打开链接

class不存在变量提升,需要先定义再使用,因为ES6不会把类的声明提升到代码头部,但是ES5就不一样,ES5存在变量提升,可以先使用,然后再定义。
//正确
new A();
function A(){

}//ES5可以先使用再定义,存在变量提升
//错误
new B();
class B{

}//B is not a constructor
//ES6不能先使用再定义,不存在变量提升
这个类的名字是Expression而不是Expre，Expre只在Class的内部代码可用，指代当前类。
//Expression.js
const Expression = class Expre{

static getAge(){
    return '12';
}

getClassName(){
    return " ClassName1= " +Expre.name + " ClassName2= " +Expression.name;
}

};

let exp = new Expression();
//let exp = new Expre();错误
//bundle.js:7935 Uncaught ReferenceError: Expre is not defined
console.log(exp.getClassName());//ClassName1= Expre ClassName2= Expre
//console.log(Expre.getAge());错误
//bundle.js:7935 Uncaught ReferenceError: Expre is not defined
console.log(Expression.getAge());
说明:Expre.name和Expression.name返回的都是Expre,返回的都是当前。
如果类的内部没用到的话，可以省略Expre，也就是可以写成下面的形式
//Expression.js
const MyExpre = class{

getClassName(){
return MyExpre.name;
}

};

let myExpre = new MyExpre();
console.log(myExpre.getClassName());//MyExpre
说明:如果省略了class后面的那个名字Expre,MyExpre.name返回的就是MyExpre,如果没有省略MyExpre.name返回就是class后面的那个名字Expre。
采用Class表达式，可以写出立即执行的Class
//Expression.js
let person = new class{

// 构造
constructor(props) {
    this.props = props;
}

getProps(){
    return this.props;
}

}(‘构造函数的参数’);

console.log(person.getProps());//构造函数的参数

私有方法是常见需求，但ES6不提供，只能通过变通方法模拟实现。一种做法是在命名上加以区别,在方法前面加上_(下划线)，表示这是一个只限于内部使用的私有方法。但是，这种命名是不保险的，在类的外部，还是可以调用到这个方法。另一种方法就是索性将私有方法移出模块，因为模块内部的所有方法都是对外可见的。

//PrivateMethod.js
export default class PrivateMethod{
 
    // 构造
    constructor() {
    }
 
    getName(){
        priName();
    }
}
 
function priName(){
    console.log('私有方法测试');
}
//index.js
import PriMe from './PrivateMethod';
let prime = new PriMe();
prime.getName();

说明:通过这种方式还可以定义私有属性,同理。还有一种方法是利用Symbol值的唯一性，将私有方法的名字命名为一个Symbol值,不过这种方式稍微麻烦点。
类的方法内部如果含有this，它默认指向类的实例。getName方法中的this，默认指向ThisStu类的实例。但是，如果将这个方法提取出来单独使用，this会指向该方法运行时所在的环境，因为找不到name方法而导致报错。

//ThisStu.js
class ThisStu{
 
    getName(){
        return this.name();
    }
 
    name(){
        return '王五';
    }
 
}
export {ThisStu};
 
//index.js
import {ThisStu} from './ThisStu';
let thisStu = new ThisStu();
console.log(thisStu.getName());
const {getName} = thisStu;
getName();
//Cannot read property 'name' of undefined

一个比较简单的解决方法是，在构造方法中绑定this，这样就不会找不到name方法了。修改

ThisStu.js文件如下:

//ThisStu.js
class ThisStu{
    // 构造
    constructor() {
        this.getName = this.getName.bind(this);
    }
 
    getName(){
        return this.name();
    }
 
    name(){
        return '王五';
    }
 
}
export {ThisStu};

使用构造函数,直接给当前实例的getName赋值,修改修改ThisStu.js文件的构造函数如下:
// 构造
constructor() {
//this.getName = this.getName.bind(this);
this.getName = ()=>{
return this.name();
}
}

2.Class的静态方法

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。
//StaticMethod.js
//定义静态方法
static getAge(){
return ‘获取Age的静态方法’;
}
//通过类名直接调用
console.log(StaticMethod.getAge());
如果StaticMethod继承StaticMethodParent,StaticMethodParent的静态方法，可以被StaticMethod继承。
//StaticMethodParent.js
export default class StaticMethodParent{
static getCommon(){
return ‘父类的静态方法’;
}
}
//通过子类直接调用
console.log(StaticMethod.getCommon());
如果StaticMethod继承StaticMethodParent,StaticMethodParent的静态方法，可以在StaticMethod中用super调用。
//定义静态方法
static getAge(){
//子类可以调用父类的静态方法
console.log(super.getCommon());
return ‘获取Age的静态方法’;
}
说明:静态方法只能在静态方法中调用,不能再实例方法中调用。

3.Class静态属性和实例属性

静态属性指的是Class本身的属性，即Class.propname，而不是定义在实例对象（this）上的属性。ES6使用静态属性和实例属性:
//StaticMethod.js
//定义静态属性
StaticMethod.firstName = ‘pca’;
console.log(StaticMethod.firstName);
//定义实例属性
//ES6实例属性只能在constructor构造函数中定义
constructor() {
super();
this.width = ‘40cm’;
}
getWidth(){
return this.width;//使用的时候需要加上this
}
//为了可读性的目的，对于那些在constructor里面已经定义的实例属性，新写法允许直接列出。
width;
说明:目前ES6，只有这种写法可行，因为ES6明确规定，Class内部只有静态方法，没有静态属性。

ES7有一个静态属性的提案，目前Babel转码器支持。安装babel-preset-stage-0 包含了0-3的stage，可根据需要添加，不同的stage封装了不同的插件，官方推荐是使用stage-1
安装命令(根据自己的需求调整):
npm install --save babel-preset-stage-0
ES7使用静态属性和实例属性:
//StaticMethod.js
//ES7提案定义静态属性
static lastName = ‘pcaca’;
//ES7定义实例属性
height = ‘150cm’;
说明:ES7和ES6的静态属性和实例属性只是定义不一样,调用的方式是一样的

Class的静态方法/Class静态属性和实例属性的整个案例:
//StaticMethodParent.js
export default class StaticMethodParent{
static getCommon(){
return ‘父类的静态方法’;
}
}

 - 参考资料:点击打开链接
   
   ES6 类(Class)基本用法和静态属性+方法详解
   
   博客地址：http://blog.csdn.net/pcaxb/article/details/53759637
   
   下载地址：http://download.csdn.net/detail/pcaxb/9716137