ES6中json的2個變化

• 簡寫：名字和值相同時，json可以可以簡寫

let a=12,b=5;
let json = {
 a,
 b
}
console.log(json) // { a:12 , b:5 }

• 省略function：json中的函式可以簡寫

let persen ={
 name:'倩倩',
 age:18,
 showName(){
  alert(this.name)
 }
}
persen.showName()

ES6與傳統面向物件

傳統面向物件：類和建構函式在一起，為物件新增方法時使用prototype。傳統面向物件例項如下：

function Person(name,age){
 
 
this.name = name;
 this.age = age
}
Person.prototype.showName = function(){
 console.log('我叫',this.name)
}
Person.prototype.showAge = function(){
 console.log('今年',this.age,'歲')
}
var p = new Person('倩倩',18)
p.showName()
p.showAge()

ES6面向物件：將類和建構函式分開。

類：class

建構函式：constructor指生成完例項之後，自己就執行的函式。

class Person{
 constructor(name,age){
  
 
this.name = name;
  this.age = age;
 }
  //給物件新增方法
 showName(){
  console.log('我叫',this.name)
 }
 showAge(){
  console.log('今年',this.age,"歲")
 }
}
var p =new Person('倩倩',18);
p.showName();
p.showAge()

面向物件的繼承

傳統面向物件的繼承：

• 使用apply方法，子類繼承父類全部屬性。
• 使用prototype方法，子類繼承父類的方法。

傳統面向物件的繼承例項如下：

function Person(name,age){
 
 
this.name = name;
 this.age = age
}
Person.prototype.showName = function(){
 console.log('我叫',this.name)
}
Person.prototype.showAge = function(){
 console.log('今年',this.age,'歲')
}
function Worker(name,age,job){
 Person.apply(this,arguments)//繼承屬性
 this.job = job
}
Worker.prototype = new Person();//繼承方法
Worker.prototype.showJob = function(){
 console.log('工作是',this.job);
}
var w = new Worker('倩倩',18,'打雜');
w.showName();
w.showAge();
w.showJob();

ES6面向物件繼承：

使用extends實現子類對父級的繼承，super()將父類的屬性繼承過來。

class Person{
 constructor(name,age){
  this.name = name;
  this.age = age;
}
 showName(){
  console.log('我叫',this.name)
 }
 showAge(){
  console.log('今年',this.age,"歲")
 }
}
class Worker extends Person {
 constructor(name,age,job){
   super(name,age)
   this.job = job
 }
 showJob(){
  console.log('工作是',this.job)
 }
}
var w = new Worker('倩倩',18,'打雜');
w.showName();
w.showAge();
w.showJob()

關於super：

子類中有constructor，內部就要有super，因為子類沒有自己的this物件，需要繼承父類的this物件。

這裡的super(name,age)就是呼叫父類的建構函式。

super 雖然代表了Person的建構函式，但是返回的是子類Worker的例項。

ES6面向物件優點

• ES6面向物件相比傳統面向物件，語法簡化
• ES6語法標準、統一，適合大專案開發，不易產生衝突。
• ES6是系統提供的標準語法，可以忽略相容性問題。