粗看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; } ...
随机推荐
- html二
超链接 超链接有三种形式: 1.外部链接:链接到外部文件.举例: <a href="new.html">点击进入到新网页</a> a是英语anchor“锚” ...
- [翻译]CURAND Libaray--Host API--(1)
原文来自:cuda curand toolkit document Translated by xingoo 如果有错误请联系:xinghl90@gmail.com 2Host API简述 使用hos ...
- P3978 [TJOI2015]概率论
\(\color{#0066ff}{ 题目描述 }\) 为了提高智商,ZJY开始学习概率论.有一天,她想到了这样一个问题:对于一棵随机生成的n个结点的有根二叉树(所有互相不同构的形态等概率出现),它的 ...
- VUE使用微信JDK（附踩坑记录）
VUE使用微信分享SDK(附踩坑记录) 微信分享官方文档 安装JS-SDK npm i -S weixin-jsapi 引入包 ES5 写法 const wx = require('weixin-js ...
- 数据结构20：KMP算法(快速模式匹配算法)详解
通过上一节的介绍,学习了串的普通模式匹配算法,大体思路是:模式串从主串的第一个字符开始匹配,每匹配失败,主串中记录匹配进度的指针 i 都要进行 i-j+1 的回退操作(这个过程称为“指针回溯”),同时 ...
- C++基础学习8：类的定义(class)
先来说说C和C++中结构体的不同 a) C语言中的结构体不能为空,否则会报错(??) b) C语言中内存为空结构体分配大小为0,C++中为结构体和类分配大小为1byte c) C语言中的结构体只涉及到 ...
- JS基础学习四：绑定事件
添加事件 IE: attachEvent Other: addEventListener var button = document.getElementById("buttonId&quo ...
- Eclipse使用Ctrl+C和Ctrl+V复制粘贴时总是卡顿
Eclipse使用Ctrl+C和Ctrl+V复制粘贴时总是卡顿,解决办法: 更改打开代码超链接按键Ctrl为Alt: Window -> Preferences -> General -& ...
- cf Permute Digits(dfs)
C. Permute Digits You are given two positive integer numbers a and b. Permute (change order) of the ...
- Java的Protected
没想到接触Java这么多年,今天竟然才发现一直有一个误解 Proteced只能被同一个包内的或者子类的class访问 那么在另一个包的如下代码有问题吗? Sub sub = new Sub(); su ...