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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
JSON 编辑器实现代码
Dec 06 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
swiper动态改变滑动内容的实现方法
Jan 17 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 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
php 前一天或后一天的日期
2008/06/28 PHP
由php的call_user_func传reference引发的思考
2010/07/23 PHP
php whois查询API制作方法
2011/06/23 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
详解json在php中的应用
2018/09/30 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
JQuery实现自定义对话框的代码
2008/06/15 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
django 信号调度机制详解
2019/07/19 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
django自带调试服务器的使用详解
2019/08/29 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
私有程序集与共享程序集有什么区别
2013/04/05 面试题
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
工程测量与监理专业应届生求职信
2013/11/27 职场文书
内容编辑个人求职信
2013/12/10 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript