// 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) //zengjiangfunction 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
//     }
// }

转载于:https://www.cnblogs.com/mr-pz/p/6056420.html

es5 和 es6 class相关推荐

  1. ES5和ES6数组遍历方法详解

    ES5和ES6数组遍历方法详解 在ES5中常用的10种数组遍历方法: 1.原始的for循环语句 2.Array.prototype.forEach数组对象内置方法 3.Array.prototype. ...

  2. ES5、ES6、ES7、ES8

    ES5.ES6.ES7.ES8 ES5 Strict Mode 在JS文件或是函数的顶部添加"use strict"即可启用严格模式. "use strict" ...

  3. ES5和ES6中对于继承的实现方法

    在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...

  4. JavaScript 中的 require / exports、import / export、浅谈JavaScript、ES5、ES6

    Node.js 的基础教学 之 exports 和 module.exports:https://zhuanlan.zhihu.com/p/82057593 浅谈 JavaScript.ES5.ES6 ...

  5. ES5和ES6中的变量声明提升

    ES5和ES6中的变量声明提升 Example1: a=2; var a; console.log( a ); //结果为2 Example2: console.log( a ); //结果是unde ...

  6. react-native ES5与ES6写法对照表

    转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-es5-and-es6-writing-tabl ...

  7. ES5和ES6的继承有哪些优劣?

    突然看到继承,感觉对这个概念有点模糊,掌握的知识点不太全面牢固,所以才有了这篇博客. 在我的印象里,ES5的继承我只知道三种:通过构造函数继承.通过原型链继承.通过构造函数和原型链组合继承 对ES6的 ...

  8. 关于ES5和ES6的简介

    ES5和ES6 我们所说的 ES5 和 ES6 其实就是在 js 语法的发展过程中的一个版本而已 比如我们使用的微信 最早的版本是没有支付功能的 随着时间的流逝,后来出现了一个版本,这个版本里面有支付 ...

  9. typescript学习之路(三) —— ts定义类的方法(包含es5以及es6的定义类)

    提起类,不得不说一下,强类型编程语言,如php,java,c++等都有类的概念.而js作为一门弱类型语言,是没有类这个概念的,虽然也能模拟类的实现,但总归不是类.so,ts也只是模拟类而已,使得更贴切 ...

  10. 【JavaScript】ES5和ES6面向对象

    前言(Preface) Object Oriented 的一个标志就是 Class (类),通过类可以创建任意多个具有相同属性和方法的对象.然而,JavaScript中只有对象,没有类. ECMA-2 ...

最新文章

  1. 自动化运维工具——ansible安装及模块介绍
  2. dynamodb 基本操作
  3. android系统开发实验,基于Android智能手机的实验管理系统的设计与实现
  4. Oracle11g客户端如何完全卸载
  5. linux安全技术课程报告,综合实例一+linux平台WEB安全技术研究报告.doc
  6. windows phone 8.1 让项目开启蓝牙genericAttributeProfile
  7. content=IE=edge,chrome=1的meta标签内容
  8. linux中定义用户账户的文件为,Linux中用户和组中认证库和解析库的文件格式以及默认参数定义文件...
  9. Dfinity(ICP)介绍-1
  10. WebService-WSDL报文解析
  11. 《华为研发》阅读 - 13
  12. PDF格式怎么修改内容,怎么给PDF加页码
  13. 任泽平最新演讲:从这6个周期,读懂中国经济未来走势
  14. ECCV 2022 | 适用于分类,检测,分割的生成式知识蒸馏开源
  15. table 添加表行的底部边框、定制表格边框
  16. 计算机机房配置发电设备,电器设施设备配置安全要求
  17. 利用FileReader和FileWriter完成一个文件拷贝功能
  18. spa项目落地页如何处理
  19. 二叉树进阶--二叉搜索树
  20. mysql中时间的储存方式_数据库 中“日期/时间”存储方式

热门文章

  1. 小米网技术架构变迁实践
  2. 美团云、苏宁云相继停止运营,公有云市场大洗牌
  3. 世界读书日,给你们送大福利!
  4. dbeaver导出建表语句_「mysql基础」MySQL常用语句命令总结(文字版)
  5. 不会写漂亮代码不是优秀的程序员,没有钢铁侠之躯不是合格的程序员
  6. 基于Docker部署Gitlab教程
  7. 手淘移动适配方案flexible.js兼容bug处理
  8. JavaScript引用类型之Array数组的concat()和push()方法的区别
  9. IBM Rational Appscan使用之扫描结果分析
  10. 项目--Asp.net全局变量的设置和读(web.config 和 Gloab)