粗看ES6之面向对象写法
标签： es6
在es6以前，js没有类的概念，虽然有构造函数原型的方式用来做面向对向开发，但是对于书法并不是十分友好，而且对于继承实现也不是十分友好。
es6引入class constructor extends super等关键字简化了JS面向对象写法，以后可以跟后端说JS也终于是有类的一门语言了，哈哈。
ES6的面向对象写法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>es6面向对象写法</title>
</head>
<body>
<script>
//js类写法
class Test{
constructor(a,b){
this.attr0 = a;
this.attr1 = b;
}
fn(){
console.log(this.attr0,this.attr1)
}
}
//初始化方法和以前构造函数原型方式一样，都是通过new关键字
var testFn = new Test(1,2);
testFn.fn();
</script>
</body>
</html>
es6通过extends super实现继承
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>es6面向对象继承写法</title>
</head>
<body>
<script>
//js类写法,Test类
class Parent{
constructor(a,b){
this.attr0 = a;
this.attr1 = b;
}
fn(){
console.log(this.attr0,this.attr1);
}
}
//写一个继承自Parent的类
class Child extends Parent{
constructor(a,b,c){
super(a,b);//实现继承parent上的方法&属性
this.attr2 = c;
}
fn0(){
console.log(this.attr2);
}
}
//初始化方法和以前构造函数原型方式一样，都是通过new关键字
var testFn = new Child(1,2,3);
testFn.fn();
testFn.fn0();
</script>
</body>
</html>
个人觉得自此jser真的可以愉快的进行面向对象编程了，666666，同时祝all新年快乐！！
粗看ES6之面向对象写法的更多相关文章
- 粗看ES6之JSON
标签: es6 ES6新增JSON特性不是特别多,只是针对JSON某些情况下的写法上有一些优化: 当key值和value值对应变量名相同时 json对像中的方法书写 示例代码如下: <!DOCT ...
- 粗看ES6之函数
标签: es6 javascript 箭头函数 ES6为了书写方便引入了函数的全新简写方式-箭头函数 <!DOCTYPE html> <html> <head> & ...
- 粗看ES6之字符串
标签: javascript es6 字符串新增特性 新增二个方法 - startsWith/endsWith 字符串模板 - 反单引号的应用 startsWith 判断字符串以是否以某某开头,返回一 ...
- 粗看ES6之数组
标签: javascript es6 数组新增方法 map(可以理解为是映射,以一定规则修改数组每一项并返回全新数组) reduce(可以理解为是汇总,一堆出来一个) filter(可以理解为过滤,筛 ...
- 粗看ES6之解构赋值
标签: javascript es6 什么是解构赋值? 示例如下: <!DOCTYPE html> <html> <head> <meta charset=& ...
- 粗看ES6之变量
标签: javascript var定义变量面临的问题 可以重复定义 无法限制变量不可修改 无块级作用域 ES6变量定义升级 新增let定义变量 新增const定义常量 let特性 有块级作用域 不可 ...
- 新手必看ES6基础
ES6 基础 一.新的变量声明方式 let/const 与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升. 通过2个简单的例子来说明这两 ...
- es6中的面向对象写法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- ES6 的面向对象
JavaScript 语言中,生成实例对象的传统方法是通过构造函数. function Animal(name, age) { this.name = name; this.age = age; } ...
随机推荐
- Spring MVC零配置（全注解）（版本5.0.7）
// 核心配置类 package spittr.config; import org.springframework.web.servlet.support.AbstractAnnotationCon ...
- django2集成DjangoUeditor富文本编辑器
富文本编辑器,在web开发中可以说是不可缺少的.django并没有自带富文本编辑器,因此我们需要自己集成,在这里推荐大家使用DjangoUeditor,因为DjangoUeditor封装了我们需要的一 ...
- k8s标签
一.标签是什么 标签是k8s特色的管理方式,便于分类管理资源对象. 一个标签可以对应多个资源,一个资源也可以有多个标签,它们是多对多的关系. 一个资源拥有多个标签,可以实现不同维度的管理. 可以使用标 ...
- 梯度下降&随机梯度下降&批梯度下降
梯度下降法 下面的h(x)是要拟合的函数,J(θ)损失函数,theta是参数,要迭代求解的值,theta求解出来了那最终要拟合的函数h(θ)就出来了.其中m是训练集的记录条数,j是参数的个数. 梯 ...
- c#随笔-正则
- centos下yum搭建安装linux+apache+mysql+php环境教程
我们利用linux系统中yum安装Apache+MySQL+PHP是非常的简单哦,只需要几步就可以完成,具体如下: 一.脚本YUM源安装: 1.yum install wget ...
- libxml2 安装及使用
https://gitlab.gnome.org/GNOME/libxml2/ ftp://xmlsoft.org/libxml2/libxml2-2.9.1.tar.gz /configuremak ...
- Java 实现栈，队列
package base.structure; /** * @program: Algorithm4J * @description: 实现一个Stack * @author: Mr.Dai * @c ...
- Jenkins自动化CI CD流水线之6--构建邮件状态通知
一. 前提 前提: 服务器开启邮箱服务: 二. 基础配置 需要安装一个插件: 插件: Email Extension Plugin 进行配置: 系统管理->系统设置-> 相关配置如下图: ...
- slf4j + loback配置
目前Java主流的log体系是 Slf4j +logback Spring boot 中配置log十分简单,常见的方式在application.yml文件中使用如下配置 logging: path: ...