继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

ECMAScript6.0新特性介绍第四篇

王家大少
关注TA
已关注
手记 18
粉丝 25
获赞 75

本节讲解ES6中如何实现面向对象以及JavaScript中是怎么实现对象的。ES6中的面向对象从语法上很像Java,它使用class关键字来定义一个类,使用constructor关键字来定义构造器,也就是说在ES6中构造器和类从写法上彻底地分开了,此外ES6的继承也很简单 直接一个extends关键字就可以搞定,不像JavaScript中写一大段代码,写起来特别繁琐。。

  • 使用JavaScript的方式实现面向对象
//javascript 中的面向对象
function human(name,age){
    this.name=name;
    this.age=age;
}
//通过原型添加方法
human.prototype.sayHello=function(){
    console.log('hello! i am '+this.name+'a '+this.age+'years old boy');
}
//创建human对象
var human=new human('tom',23);//构造函数与类相同
//调用human sayHello方法
human.sayHello();//输出 hello! i am tom a 23 years old boy
  • 使用ES6的方式实现面向对象
//class 关键字 构造器与类名分开
class person{
    constructor(name,age){
        this.name=name;
        this.age=age;

    }
    //class里面直接加方法 无需通过原型。
    sayHello(){
        console.log('hello! i am '+this.name+'a '+this.age+'years old boy');
    }
}
var person=new person('tom',23);//构造函数与类相同
person.sayHello();//输出 hello i am tom a 23 years old boy。
  • JavaScript中的继承
//javascript 中的继承,演示fireman 继承自human
function fireman(name,age,job){
    human.call(name,age);
    this.job=job;
}
fireman.prototype=new human();
fireman.prototype.constructor=human
fireman.prototype.action=function(name){
   console.log(`hello! i am a ${this.name} my job is ${this.job}`);
}
//创建
var fireman=new fireman('lisi',25,'saving life from the fire');//构造函数与类相同
fireman.sayHello();//输出 hello! i am lisi a 25 years old boy
fireman.action();//输出 hello! i am lisi my job is saving life from the fire
  • ES6中的继承
class fireman extends human{
    constructor(name,age,job){
        super(name,age);
        this.job=job;
    }
    action(){
        console.log(`hello i am ${this.name} my job is ${this.job}`);
    }
}
let a=new fireman('lisi',28,'saving life from the fire');
a.sayHello();/输出:hello! i am lisi ,a 28years old boy
a.action();//hello i am lisi ,my job is saving life from the fire

关于ES6的面向对象就介绍到这里。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP