es5 和 es6 class
// ES5
function User(name,age) {
this.name = name;
this.age = age;
} // 静态方法
User.getClassName = function(){
return 'User'
} User.prototype.changeName = function(name){
this.name = name
} User.prototype.changeAge = function(Age){
this.Age = Age
} Object.defineProperty(User.prototype,'info',{
get(){
return 'name'+this.name+'age'+this.age
}
})
// 子类
function Manager(name,age,password){
User.call(this,name,age);
this.password = password
} // 继承静态方法
Manager.__proto__ = User // 继承原型方法
Manager.prototype = User.prototype; //添加新方法
Manager.prototype.changePassword = function(pwd){
this.password = password
}
var manager = new Manager('leo',22,'123');
manager.changeName('zengliang');
console.log(User.name) //User
console.log(manager.name) //zengjiang function test(){
console.log("1")
}
console.log(test.name) //test
ES6
// function User(name,age) {
// this.name = name;
// this.age = age;
// }
class User {
constructor(name,age){
this.name = name;
this.age = age;
}
// // 静态方法
// User.getClassName = function(){
// return 'User'
// }
static getClassName(){
return 'User'
}
// 方法的定义
// User.prototype.changeName = function(name){
// this.name = name
// }
// User.prototype.changeAge = function(Age){
// this.Age = Age
// }
changeName(name){
this.name = name
}
changeAge(age){
this.age = age
}
// 自定义属性
// Object.defineProperty(User.prototype,'info',{
// get(){
// return 'name'+this.name+'age'+this.age
// }
// })
get info(){
return 'name'+this.name+'age'+this.age
}
}
// 子类
// function Manager(name,age,password){
// User.call(this,name,age);
// this.password = password
// }
class Manager extends User{
// 和call的区别,call先创建自身对象
constructor(name,age,password){
// super先创建父对象 必须
super(name,age);
this.password = password
}
// //添加新方法
// Manager.prototype.changePassword = function(pwd){
// this.password = password
// }
changePassword(password){
this.password = password
}
get info(){
var info = super.info;
console.log(info)
}
}
// 下面的静态方法跟原型方法已经继承了,无须写其他的
// // 继承静态方法
// Manager.__proto__ = User
// // 继承原型方法
// Manager.prototype = User.prototype;
console.log(typeof User,typeof Manager)//function function
// var manager = new Manager('leo',22,'123');
// manager.changeName('zengliang');
// console.log(User.name) //User
// console.log(manager.name) //zengjiang
// function test(){
// console.log("1")
// }
// console.log(test.name) //test
不会提升
// // 立即执行
// let user = new class User{
// constructor(name){
// this.name = name
// }
// }('zengliang');
// console.log(user) // 会报错,因为不会提升
// var user = new User()
// class User{
// constructor(name){
// this.name = name
// }
// }
es5 和 es6 class的更多相关文章
- React入门 (1)—使用指南(包括ES5和ES6对比)
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- ES5和ES6中对于继承的实现方法
在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...
- JavaScript面向对象轻松入门之概述(demo by ES5、ES6、TypeScript)
写在前面的话 这是一个JavaScript面向对象系列的文章,本篇文章主要讲概述,介绍面向对象,后面计划还会有5篇文章,讲抽象.封装.继承.多态,最后再来一个综合. 说实话,写JavaScript面向 ...
- JavaScript面向对象轻松入门之封装(demo by ES5、ES6、TypeScript)
本章默认大家已经看过作者的前一篇文章 <JavaScript面向对象轻松入门之抽象> 为什么要封装? 封装(Encapsulation)就是把对象的内部属性和方法隐藏起来,外部代码访问该对 ...
- JavaScript面向对象轻松入门之多态(demo by ES5、ES6、TypeScript)
多态(Polymorphism)按字面的意思就是"多种状态",同样的行为(方法)在不同对象上有不同的状态. 在OOP中很多地方都要用到多态的特性,比如同样是点击鼠标右键,点击快捷方 ...
- JavaScript、ES5和ES6的介绍和区别
JavaScript由三部分组成: ECMAScript(核心) DOM(文档对象模型) BOM (浏览器对象模型) ES5(ECMAScript第五个版本) strict模式 严格模式,限制一些用法 ...
- ES5和ES6那些你必须知道的事儿(三)
ES5和ES6那些你必须知道的事儿 ES6新增的东西 一.块级作用域:关键字let,常量const let与var的区别: a.不会进行变量声明提升 b.变量不允许被重复定义 c.变量不允许被删除 d ...
- ES5与ES6的小差异
ES5与ES6的小差异 变量的定义 ES6与ES5的区别 ES5: <script> console.log(username); var username; var username = ...
- 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- ...
- ES5与ES6的研究
今天开始ES5与ES6的研究. 1.什么是ES5与ES6? 就是ECMAScript的第五个版本与第六个版本,那么问题来了,什么是ECMAScript?首先它是一种由Ecma国际通过ECMA-262标 ...
随机推荐
- 【博客迁移】hityixiaoyang.com
用了快两年简洁的cnblog现在迁移到新域名空间:http://blog.apluslogicinc.com 欢迎来踩啊~~~
- XCode帮助文档离线下载解决办法
1.菜单栏Xcode->Preferences选择Documentation,在线下载 2.离线下载(用迅雷即可下载) 在上述在线下载列表中,点击某一列,下拉框可看见 info,可得到其网络所在 ...
- UNIX标准化及实现之限制
前言 UNIX系统实现定义了很多幻数和常量,其中有很多已被硬编码(关于硬编码和软编码:http://www.cnblogs.com/chenkai/archive/2009/04/10/1432903 ...
- php技术概要汇总
php搜索-> sphinx coreseek : 中文分词.中文搜索 samba :把linux服务器端目录映射的本地. 视频截图插件.音频视频转换(ffmpeg): 1)w ...
- AngularJS - Apply方法监听model变化
<body> <div ng-app="myApp"> <div ng-controller="firstController" ...
- iOS: 属性声明strong和retain竟然不一样
今天和同事在处理一处用strong声明的Block属性引发的问题时偶然发现的.在诸多教程中都会讲到:声明属性时用strong或者retain效果是一样的(貌似更多开发者更倾向于用strong).不过在 ...
- BootStrap2学习日记1--网格系统
在BoootStrap2的版本中采用的布局方式是12栏网格布局(把浏览器的Width分12栏,布局中使用每个元素所占格数的不同来达到各种布局),包括(固定)网格布局(Grid System)和流式网格 ...
- Asp.Net 之 调用分享接口
一.后台分享方式 腾讯QQ.腾讯空间.腾讯微博.新浪微博分享接口,如下: 注意:在网站对接前,请先申请注册好您的QQ登录appid.新浪登录Appkey.腾讯微博appkey. //腾讯QQ分享 ht ...
- Android(java)学习笔记71:生产者和消费者之等待唤醒机制
1. 首先我们根据梳理我们之前Android(java)学习笔记70中关于生产者和消费者程序思路: 2. 下面我们就要重点介绍这个等待唤醒机制: (1)第一步:还是先通过代码体现出等待唤醒机制 pac ...
- 4D数据介绍
转自青椒炒蛋:http://www.smallleafs.com/article/35.aspx 4D数据包括DLG(数字线画地图).DEM(数字高程模型).DOM(数字正射影像地图).DRG(数字栅 ...