1. ES5实现

父类:

// 职员类
function Employees(id,name,salary) { // 属性
this.id = id;
this.name = name;
this.salary = salary;
}
Employees.prototype.work = function (dish) { // 方法
return dish
};

子类继承父类:

function Waiter(id, name, salary) {
Employees.call(this, id, name, salary) // 使用call, 继承父类
}
Waiter.prototype = Object.create(Employees.prototype);// 继承父类原型
Waiter.prototype.constructor= Waiter; // 设置constructor指向自己
Waiter.prototype.work = function (arg) { // 重写原型上的方法
if (arg instanceof Array){
return arg
} else { //上菜行为
console.log('not a array')
}
};

2. ES6实现

父类:

// 职员类
class Employees {
constructor(id, name, salary){ // 属性
this.id = id;
this.name = name;
this.salary = salary;
}
work(dish){ // 方法
return dish
}
}

子类继承:

// Waiter
class Waiter extends Employees { // 使用关键字extends,继承父类
constructor(...arg){ // 继承父类
super(...arg)
}
work(arg){ // 重写父类中work方法
if (arg instanceof Array){ //数组的话,记录点菜
return arg
} else { //上菜行为
console.log('上菜')
}
}
}

js 面向对象 ES5 AND ES6的更多相关文章

  1. javaScript - 面向对象 - ES5 和 ES6

    javaScript - 面向对象 - ES5 和 ES6 ES5之前用 构造函数 构造函数的特点 就是一个普通函数, 他的函数名要大写.: 带方法的写法: 原型的方式: prototype 为内置的 ...

  2. JavaScript面向对象轻松入门之多态(demo by ES5、ES6、TypeScript)

    多态(Polymorphism)按字面的意思就是"多种状态",同样的行为(方法)在不同对象上有不同的状态. 在OOP中很多地方都要用到多态的特性,比如同样是点击鼠标右键,点击快捷方 ...

  3. Atitit js版本es5 es6新特性

    Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...

  4. JavaScript面向对象轻松入门之概述(demo by ES5、ES6、TypeScript)

    写在前面的话 这是一个JavaScript面向对象系列的文章,本篇文章主要讲概述,介绍面向对象,后面计划还会有5篇文章,讲抽象.封装.继承.多态,最后再来一个综合. 说实话,写JavaScript面向 ...

  5. JavaScript面向对象轻松入门之封装(demo by ES5、ES6、TypeScript)

    本章默认大家已经看过作者的前一篇文章 <JavaScript面向对象轻松入门之抽象> 为什么要封装? 封装(Encapsulation)就是把对象的内部属性和方法隐藏起来,外部代码访问该对 ...

  6. ES6教程-字符串,函数的参数,了解函数的arguments对象,js面向对象,设计模式-单例模式,解构赋值

    前言 主要讲解了ES6对字符串的拓展,包括includes,startsWith和endsWith,另外增加了字符串模板. Start includes()是否包含 startsWith()以什么开头 ...

  7. ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能

    前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...

  8. ES5和ES6基本介绍与面向对象的基本思想

    ES6和ES5基本介绍 let  const  关键词定义变量 let 定义变量 特点: let 定义的变量,不会进行预解析  let 定义的变量,与 forEach() 中的变量类似  每次执行都会 ...

  9. React Native的语法之ES5和ES6

    原文地址:http://www.devio.org/2016/08/11/React-Native%E4%B9%8BReact%E9%80%9F%E5%AD%A6%E6%95%99%E7%A8%8B- ...

随机推荐

  1. Microsoft Azure IoTHub Serials 2 - 如何为android应用添加IoTHub支持

    1. 在build.gradle(app)文件的dependencies中添加对以下项的依赖: 'com.microsoft.azure.sdk.iot:iot-device-client:1.5.3 ...

  2. 给你的WordPress站点添加下雪特效

    今天看到这个教程,感觉挺应景的,就自己尝试了下,效果还行,没截GIF图 方法: 该js文件已支持https,同时已将其及相关雪花图片进行CDN加速处理,可直接调用. 找到WordPress主题的foo ...

  3. LeetCode题解33.Search in Rotated Sorted Array

    33. Search in Rotated Sorted Array Suppose an array sorted in ascending order is rotated at some piv ...

  4. JDK,JRE,JVM,JMM关系与区别

    JVM: Java Virtual Machine, 将java文件编译成class文件并运行class文件的软件 JRE:Java  Runtime  Enviromental,包含了JVM和Jav ...

  5. mysql 开发基础系列10 存储引擎 InnoDB 介绍

    一. 概述: InnoDB存储引擎提供了具有提交,回滚,和崩溃恢复能力的事务安全,对比MYISAM 的存储引擎,InnoDB写的处理效率差一些并且会占用更多的磁盘空间以保留数据和索引.它的特点有如下: ...

  6. C++版 - 剑指Offer 面试题45:圆圈中最后剩下的数字(约瑟夫环问题,ZOJ 1088:System Overload类似)题解

    剑指Offer 面试题45:圆圈中最后剩下的数字(约瑟夫环问题) 原书题目:0, 1, - , n-1 这n个数字排成一个圈圈,从数字0开始每次从圆圏里删除第m个数字.求出这个圈圈里剩下的最后一个数字 ...

  7. Android--UI之TextView

    前言 开门见山,这一篇博客主要讲一下在Android开发中,UI控件TextView的一些使用方式,并且通过四个例子实现一般项目中需要的效果来讲解TextView的使用.并且在之后的一段时间之内,都会 ...

  8. Js中处理日期加减天数

    Js的处理日期还是很方便的. 一. 格式化日期为2017-07-04的格式 function formatTime(date) { var year = date.getFullYear(); var ...

  9. 浅谈《think in java》:一 对象导论总结

    清单1. 抽象机制,面向对象程序设计方式 java所基于Smalltalk的特性表现一种纯粹的面向对象设计方式: 万物都是对象 程序是对象的集合(容器),他们通过发送消息(发送请求)来告知彼此所要做的 ...

  10. IDEA添加Git项目

    1.进入主页面IntelliJ IDEA (如果不知道如何进入主页面,在加载项目是点击“Cancel”按钮 ) 2.点击“Check out from Version Control” ,选择“Git ...