ES6新增语法(四)——面向对象

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。传统面向对象实例如下:

functionPerson(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 =newPerson('倩倩',18)

p.showName()

p.showAge()

ES6面向对象:将类和构造函数分开。

类:class

构造函数:constructor指生成完实例之后,自己就执行的函数。

classPerson{

constructor(name,age){

this.name = name;

this.age = age;

 }

//给对象添加方法

showName(){console.log('我叫',this.name)

 } 

showAge(){

console.log('今年',this.age,"岁")

 }

}

var p =newPerson('倩倩',18);

p.showName();

p.showAge()

面向对象的继承

传统面向对象的继承:

使用apply方法,子类继承父类全部属性。

使用prototype方法,子类继承父类的方法。

传统面向对象的继承实例如下:

functionPerson(name,age){

this.name = name;

this.age = age

}

Person.prototype.showName =function(){

console.log('我叫',this.name)

}

Person.prototype.showAge =function(){

console.log('今年',this.age,'岁')

}

functionWorker(name,age,job){

Person.apply(this,arguments)//继承属性

this.job = job

}

Worker.prototype =newPerson();//继承方法

Worker.prototype.showJob =function(){

console.log('工作是',this.job);

}

var w =newWorker('倩倩',18,'打杂');

w.showName();

w.showAge();

w.showJob();

ES6面向对象继承:

使用extends实现子类对父级的继承,super()将父类的属性继承过来。

classPerson{

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 =newWorker('倩倩',18,'打杂');

w.showName();

w.showAge();

w.showJob()

关于super:

子类中有constructor,内部就要有super,因为子类没有自己的this对象,需要继承父类的this对象。

这里的super(name,age)就是调用父类的构造函数。

super 虽然代表了Person的构造函数,但是返回的是子类Worker的实例。

ES6面向对象优点:

ES6面向对象相比传统面向对象,语法简化

ES6语法标准、统一,适合大项目开发,不易产生冲突。

ES6是系统提供的标准语法,可以忽略兼容性问题。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容