es6新特性之对象扩展与class关键字定义js中的类

 es6中对对象的扩展

对于下面的JavaScript代码：

	var username="zhao"
	var obj={
		username:username,
		info:function(){
			console.log(this.username);
		}
	}
	 obj.info();

依然是我们熟悉的代码：执行结果是:zhao

在es6中对JavaScript的对象又做了哪些扩展呢？我这里说两个简单的地方，先看改写后的代码：

	var username="zhao"
	var obj={
		username,
		info(){
			console.log(this.username);
		}
	}
	 obj.info();

执行结果：zhao

es6中对JavaScript对象做了如下扩展：

一、当属性名和属性值一样时，只需要写一个属性名就可以了

二、函数的写法省略了":function"这一部分。

es6中的类

javascript在es6之前并没有类的概念，但是却又类的功能，在es6之前，具有类的功能的东西叫做“构造函数”，所谓“构造函数”，其实还是普通的函数，只不过按照约定把首字母大写了，当然你不大写也可以，首字母大写的作用就是让别人一看就知道这是一个构造函数。

        javascript在es6之前如果想实现继承关系的话是通过call或者apply函数。下面的js代码定义了两个构造函数并实现了Admin继承User的关系。

  <script>
	  function User(name,age){
		this.name=name;
		this.age=age;
		this.info=function(){
			console.log("我叫"+this.name+",今年"+this.age+"岁了");
		}
	  }
	  function  Admin(name,age,role){
		User.apply(this,[name,age]);
		this.role=role;
	  }
	  var u=new User("游客",20);
	  u.info();
	  var admin=new Admin("管理员",22,"superman");
	  console.log(admin.role);
	  console.log(admin.info());
  </script>

打开浏览器运行结果：

如果你有扎实的js基础的话，我相信理解上边的代码并没有啥问题，那么同样的功能如果使用es6的语法又该怎么写呢？我先把代码贴出来：

  <script>
	  class User{
		constructor(name,age){
			this.name=name;
			this.age=age;
		}
		info(){
			console.log("我叫"+this.name+",今年"+this.age+"岁了");
		}
	  }
	  class  Admin  extends User{
		constructor(name,age,role){
			super(name,age);
			this.role=role;
		}
	  }
	  var u=new User("游客",20);
	  u.info();
	  var admin=new Admin("管理员",22,"superman");
	  console.log(admin.role);
	  console.log(admin.info());
  </script>

运行结果是一样的：

那么，现在我们可以总结下了：

一、es6中有了类的概念，定义一个类使用class关键字，这让JavaScript从不伦不类的没有类的概念却有类的功能的窘境里面摆脱了出来

二、继承使用extends关键字，这里又跟java像了，这JavaScript也是博采众家之长啊。

三、注意是class User，而不是class User(name,age)，虽然调用的时候是一样的。

四、多了一个constructor用来完成es5之前构造函数的功能，constructor翻译过来就是“构造器”的意思

五、在es6中，不需要再通过call或者apply函数来间接的实现父级方法的调用，而是直接通过super关键字就行了。