ES6中定义类和对象的方法示例


Posted in Javascript onJuly 31, 2019

本文实例讲述了ES6中定义类和对象的方法。分享给大家供大家参考,具体如下:

类的基本定义和生成实例:

// 类的基本定义和生成实例
class Parent{ //定义一个类
    constructor(name='xiaxaioxian'){
     this.name= name;
    }
}
// 生成一个实例
let g_parent = new Parent();
console.log(g_parent); //{name: "xiaxaioxian"}
let v_parent = new Parent('v') // 'v'就是构造函数name属性 , 覆盖构造函数的name属性值
console.log(v_parent); // {name: "v"}

继承

// 继承
class Parent{ //定义一个类
    constructor(name='xiaxaioxian'){
     this.name= name;
    }
}
class Child extends Parent{
}
console.log('继承',new Child()) // 继承 {name: "xiaxaioxian"}

继承传递参数

// 继承传递参数
class Parent{ //定义一个类
    constructor(name='xiaxaioxian'){
     this.name= name;
    }
}
class Child extends Parent{
   constructor(name = 'child'){ // 子类重写name属性值
    super(name); // 子类向父类修改 super一定放第一行
    this.type= 'preson';
   }
}
console.log('继承',new Child('hello')) // 带参数覆盖默认值 继承{name: "hello", type: "preson"}

ES6重新定义的ES5中的访问器属性

class Parent{ //定义一个类
    constructor(name='xiaxaioxian'){
     this.name= name
    }
    get longName(){ // 属性
     return 'mk' + this.name
    }
    set longName(value){
     this.name = value
    }
}
let v = new Parent();
console.log('getter',v.longName)  // getter mkxiaxaioxian
v.longName = 'hello';
console.log('setter',v.longName)  // setter mkhello

类的静态方法:

class Parent{ //定义一个类
   constructor(name='xiaxaioxian'){
    this.name= name
   }
   static tell(){ // 静态方法:通过类去调用,而不是实例
    console.log('tell')
   }
}
Parent.tell(); // tell

类的静态属性:

// 静态属性
class Parent{ //定义一个类
   constructor(name='xiaxaioxian'){
    this.name= name
   }
   static tell(){ // 静态方法:通过类去调用,而不是实例
    console.log('tell') // tell
   }
}
Parent.type = 'test'; // 定义静态属性
console.log('静态属性',Parent.type) // 静态属性 test
let v_parent = new Parent();
console.log(v_parent); // {name: "xiaxaioxian"} 没有tell方法和type属性

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
图片之间的切换
Jun 26 Javascript
javascript优先加载笔记代码
Sep 30 Javascript
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 Javascript
利用js实现简单开关灯代码
Nov 23 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 #Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 #Javascript
vue实现中部导航栏布局功能
Jul 30 #Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 #Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 #Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 #Javascript
8个有意思的JavaScript面试题
Jul 30 #Javascript
You might like
Yii2语言国际化自动配置详解
2018/08/22 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
2016/07/12 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
Python多进程multiprocessing用法实例分析
2017/08/18 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
Django继承自带user表并重写的例子
2019/11/18 Python
Python遍历字典方式就实例详解
2019/12/28 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
Python 如何实现访问者模式
2020/07/28 Python
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
安全生产责任书范本
2014/04/15 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
逃课检讨书范文
2015/05/06 职场文书
小学德育工作总结2015
2015/05/12 职场文书
院系推荐意见
2015/06/05 职场文书
天河观后感
2015/06/11 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang