分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

js类的继承,es5和es6的方法

发布时间:2023-09-06 02:18责任编辑:蔡小小关键词:jses6

存在的差异:
1. 私有数据继承差异
  es5:执行父级构造函数并且将this指向子级
  es6:在构造函数内部执行super方法,系统会自动执行父级,并将this指向子级
2. 共有数据(原型链方法)继承的差异
  es5:子级原型链上的赋值,继承父级原型链上数据
  es6:extend 父级,会自动将父级原型链上的数据给子级
3. 原型链上的共有数据是否可枚举for ?in
  es5:可以枚举
  es6:不可枚举
4. 构造函数的指向
  es5:需要改变constructor的指向
  es6:不需要改
5. 静态方法的写法差异
  es5:直接在构造函数.静态方法
  es6:static a=1;静态方法——浏览器不支持,要用bable
6. 实例_proto_的指向差异
  es5:? Child5(name)
  es6:class Child6

es5的方法

 ???//父级 ???function ?Parent5(name) {//构造函数 ???????this.name=name;//私有数据 ???} ???Parent5.prototype.say=function () {//公共数据 ???????console.log(this.name); ???} ???//子级 ???function ?Child5(name) {//构造函数 ???????Parent5.call(this,name)//执行父级的构造函数,并将this指向子级 ???} ???Child5.prototype=new Parent5;//将父级原型上的共有数据给自己 ???Child5.prototype.constructor=Child5;//改变constructor的指向问题 ???Child5.prototype.buy=function () { ???????console.log(‘buy‘); ???} ???var c5=new Child5(‘邵‘);//实例 ???c5.say()//邵 ???c5.buy()//buy

es6的方法

 ???//父级 ???class Parent6{//类 ???constructor(name){//构造函数 ???????this.name=name; ???} ???say(){ ???????console.log(this.name); ???} ???} ???class Child6 extends Parent6{//将父级原型上的共有数据给自己 ???????constructor(name){ ???????????super(name);//执行父级的构造函数,并将this指向子级 ???????} ???????buy(){ ???????????console.log(‘buy‘) ???????} ???} ???var c6=new Child6(‘邵‘); ???c6.say()//邵 ???c6.buy()//buy

js类的继承,es5和es6的方法

原文地址:https://www.cnblogs.com/shaokevin/p/9789950.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved