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. 背水一战 Windows 10 (115) - 后台任务: 通过 toast 激活后台任务, 定时激活后台任务

    [源码下载] 背水一战 Windows 10 (115) - 后台任务: 通过 toast 激活后台任务, 定时激活后台任务 作者:webabcd 介绍背水一战 Windows 10 之 后台任务 通 ...

  2. Handshake failed due to invalid Upgrade header: null 解决方案

    Handshake failed due to invalid Upgrade header: null 解决方案 解决方案,在 Nginx ,location 中添加以下代码: proxy_set_ ...

  3. 第53节:Java当中的IO流(上)

    Java当中的IO流 在Java中,字符串string可以用来操作文本数据内容,字符串缓冲区是什么呢?其实就是个容器,也是用来存储很多的数据类型的字符串,基本数据类型包装类的出现可以用来解决字符串和基 ...

  4. Kali学习笔记38:文件上传漏洞

    早些年,提到Web渗透,或者搜索一些黑客教程 基本都会看到文件上传漏洞. 它是一个很经典的漏洞 但它本质其实不是一个漏洞,而是网站本身的上传文件功能 不过如果我们上传了Webshell,那么就成为了文 ...

  5. ELK搭建elasticsearch常见报错

    问题一: [2018-01-31T16:27:21,712][WARN ][o.e.b.JNANatives ] unable to install syscall filter: Java.lang ...

  6. 页面css样式找不到问题

    出现了一个页面没有样式的问题: 问题: 1.路径不对, 可以打开页面f12看样式是否找到 检查路径是否正确. 2.样式没引全或者没引对. 查看引入的样式是否正确或缺少样式. 3.路径明明写对了却404 ...

  7. centos上ftp服务器的简易安装部署

    申明:本示例为centos7 开启ftp服务命令为:systemctl start vsftpd 关闭防火墙命令为systemctl stop firewalld 7版本以下开启ftp服务器为 ser ...

  8. gcc编译参数详解一(-ffunction-sections -fdata-sections)

    背景 有时我们的程序会定义一些暂时使用不上的功能和函数,虽然我们不使用这些功能和函数,但它们往往会浪费我们的ROM和RAM的空间.这在使用静态库时,体现的更为严重.有时,我们只使用了静态库仅有的几个功 ...

  9. 【WebAPI No.1】创建简单的 .NETCore WebApi

    介绍: 官方定义如下,强调两个关键点,即可以对接各种客户端(浏览器,移动设备),构建http服务的框架.Web API最重要的是可以构建面向各种客户端的服务. core的WebAPI与ASP.NET ...

  10. oracle 时间日期常用语句及函数

    记录常用时间函数以及处理时间的sql语句 (1)获得系统时间select sysdate from dual; (2)设置时间的格式select to_char(sysdate,'yyyy/MM/dd ...