js 面向对象 ES5 AND ES6
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的更多相关文章
- javaScript - 面向对象 - ES5 和 ES6
javaScript - 面向对象 - ES5 和 ES6 ES5之前用 构造函数 构造函数的特点 就是一个普通函数, 他的函数名要大写.: 带方法的写法: 原型的方式: prototype 为内置的 ...
- JavaScript面向对象轻松入门之多态(demo by ES5、ES6、TypeScript)
多态(Polymorphism)按字面的意思就是"多种状态",同样的行为(方法)在不同对象上有不同的状态. 在OOP中很多地方都要用到多态的特性,比如同样是点击鼠标右键,点击快捷方 ...
- Atitit js版本es5 es6新特性
Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...
- JavaScript面向对象轻松入门之概述(demo by ES5、ES6、TypeScript)
写在前面的话 这是一个JavaScript面向对象系列的文章,本篇文章主要讲概述,介绍面向对象,后面计划还会有5篇文章,讲抽象.封装.继承.多态,最后再来一个综合. 说实话,写JavaScript面向 ...
- JavaScript面向对象轻松入门之封装(demo by ES5、ES6、TypeScript)
本章默认大家已经看过作者的前一篇文章 <JavaScript面向对象轻松入门之抽象> 为什么要封装? 封装(Encapsulation)就是把对象的内部属性和方法隐藏起来,外部代码访问该对 ...
- ES6教程-字符串,函数的参数,了解函数的arguments对象,js面向对象,设计模式-单例模式,解构赋值
前言 主要讲解了ES6对字符串的拓展,包括includes,startsWith和endsWith,另外增加了字符串模板. Start includes()是否包含 startsWith()以什么开头 ...
- ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
- ES5和ES6基本介绍与面向对象的基本思想
ES6和ES5基本介绍 let const 关键词定义变量 let 定义变量 特点: let 定义的变量,不会进行预解析 let 定义的变量,与 forEach() 中的变量类似 每次执行都会 ...
- 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- ...
随机推荐
- Android JNI 学习(五):References Api
1. NewGlobalRef(创建全局引用) jobjectNewGlobalRef(JNIEnv *env, jobject obj); 创建 obj 参数所引用对象的新全局引用.obj 参数既可 ...
- 7.首页、bitmaputils
HomeProtocol public class HomeProtocol extends BaseProtocol<List<AppInfo>>{ // 1 把整个json ...
- django数据库连接快速配置
DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql',#数据库驱动 'NAME': 'login_db',#数据库名字 'US ...
- CSS3新增伪类--好用的:target
问:如果让你实现下图,点击跳转后,让内容1增加一个背景颜色,你会怎么做呢? 可能很多小伙伴第一反应是用JS,给跳转绑定点击事件,然后用DOM获取到内容1,在给其添加css样式. 如果我跟你说用cs ...
- Rpc框架dubbo-client(v2.6.3) 源码阅读(二)
接上一篇 dubbo-server 之后,再来看一下 dubbo-client 是如何工作的. dubbo提供者服务示例, 其结构是这样的!dubbo://192.168.11.6:20880/com ...
- 搭建gitlab本地服务
一本正经的搞事情 改变懒惰,成就心中的自己,并非难事 博客园 首页 新随笔 联系 管理 订阅 随笔- 40 文章- 0 评论- 5 gitlab服务部署及使用 目录 一.什么是gitlib ...
- Python编程Day3—基本运算符、数据类型
一.基本运算符 1.算数运算 print(10/3) print(10//3) print(10%3) print(10**3) 2.比较运算 print(10==10) print(10!=10) ...
- JavaScript中的原型链原理
工作中经常解除到prototype的概念,一开始错误的认为prototype是对象的原型链,其实prototype只能算是JavaScript开放出来的原型链接口,真正的原型链概念应该是__proto ...
- Kubernetes 服务入口管理 Traefik Ingress Controller
前面部署了 kubernetes/ingress-nginx 作为 Ingress Controller,使用 Nginx 反向代理与负载,通过 Ingress Controller 不断的跟 Kub ...
- .Net和C#介绍
一.前言 本文主要针对刚入门以及还需要对基础进行恶补一下的兄弟进行基础介绍,并尽可能的做到客观,如有错误也虚心接受高手门的纠正. 二..Net平台简介 .net即DotNet,首先我先给出微软的定义: ...