JavaScript实例|青训营

59 阅读2分钟

一、计算距离当前日期天数 案例要求:

根据已有的person对象的注册时间求出距离当前时间的天数(天数向下取整) 将获得的天数和person数据拼接成字符串,作为h2标签的内容 注意:使用模板字符串进行字符串拼接,字符串最终内容如:尊贵的牛客网2级用户小丽您好,您已经注册牛客网3天啦~

解题步骤:

获取当前时间对应的时间戳 获取person.registTime对应的时间戳 根据两个时间戳的差值计算出两个时间之间的天数 使用模板字符串拼接数据

二、构造函数的继承

在ES6的class类诞生之前,我们是以函数的形式来书写构造函数,继承在构造函数的运用过程中扮演着非常重要的角色,看下面这个案例:

给Human构造函数的原型对象添加getName方法,返回当前实例name属性 将Chinese构造函数继承于Human构造函数 给Chinese构造函数的原型对象添加getAge方法,返回当前实例age属性 function Human(name) { this.name = name this.kingdom = 'animal' this.color = ['yellow', 'white', 'brown', 'black'] }

function Chinese(name,age) { Human.call(this,name) this.age = age this.color = 'yellow' }

// 补全代码 // 给"Human"构造函数的原型对象添加"getName"方法 Human.prototype.getName=function(){ return this.name }

// 将"Chinese"构造函数继承于"Human"构造函数 Chinese.prototype=new Human() Chinese.prototype.constructor=Chinese

// 给"Chinese"构造函数的原型对象添加"getAge"方法 Chinese.prototype.getAge=function(){ return this.age }

可以看到,普通的构造函数的继承我们主要是通过操作prototype原型对象来进行实现的,这显然是比较麻烦又不太安全的,所以在ES6之后就诞生了class类来替换这种写法

三、类的继承

ES6新增了class类,其能够很好的替代上述构造函数的使用,class实际就是构造函数的语法糖,它的继承写法如下:

Chinese类继承于Human类 Human类实现一个函数getName,返回该实例的name属性 Chinese类构造函数有两个参数,分别为name、age Chinese类实现一个函数getAge,返回该实例的age属性 class Human { constructor(name) { this.name = name this.kingdom = 'animal' this.color = ['yellow', 'white', 'brown', 'black'] } // 补全代码 getName () { return this.name; } }

// 补全代码 class Chinese extends Human { constructor(name,age){ super(name); this.age=age; } getAge () { return this.age; } }

class类是通过extends关键字来继承基类的,同时使用super来调用基类(Human)的构造器(constructor)