ES6 的面向对象
JavaScript 语言中,生成实例对象的传统方法是通过构造函数。
function Animal(name, age) {
this.name = name;
this.age = age;
}
Animal.prototype.showName = function () {
console.log(this.name);
console.log(this.age);
}
var a = new Animal('小黄', 5);
a.showName();
上面这种写法跟传统的面向对象语言(比如 C++ 和 Java)差异很大,很容易让新学习这门语言的程序员感到困惑。
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。
基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写,就是下面这样
class Animal {
// 构造器 当你创建实例之后 constructor()方法会立刻调用 通常这个方法初始化对象的属性
constructor(name, age) {
this.name = name;
this.age = age;
}
// 这里没有符号(方法之间不需要逗号分隔,加了会报错。)
showName() {
console.log(this.name);
}
}
var a2 = new Animal('点点', 3);
上面代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。也就是说,ES5 的构造函数Animal,对应 ES6 的Animal类的构造方法。
Animal类除了构造方法,还定义了一个showName方法。注意,定义“类”的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错。
ES6 的类,完全可以看作构造函数的另一种写法。
console.log(Animal2===Animal2.prototype.constructor);//true
上面代码表示,类本身就指向了类的构造函数。
使用的时候,也是直接对类使用new命令,跟构造函数的用法完全一致。
constructor方法
constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。
class Animal {
}
// 等同于
class Animal {
constructor() {}
}
上面代码中,定义了一个空的类Point,JavaScript 引擎会自动为它添加一个空的constructor方法。
ES6 的面向对象的更多相关文章
- 粗看ES6之面向对象写法
标签: es6 在es6以前,js没有类的概念,虽然有构造函数原型的方式用来做面向对向开发,但是对于书法并不是十分友好,而且对于继承实现也不是十分友好. es6引入class constructor ...
- ES6基本语法和一些面向对象的知识
声明变量 var 使用var声明变量会将变量的声明提到全局,在局部作用域声明的在全局也能打印 { var a = 12; } // 变量提升 var会将变量的声明提到全局 console.log(a) ...
- [js高手之路] es6系列教程 - 新的类语法实战选项卡
其实es6的面向对象很多原理和机制还是ES5的,只不过把语法改成类似php和java老牌后端语言中的面向对象语法. 一.用es6封装一个基本的类 class Person{ constructor( ...
- ES6常用知识点小结
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准. 因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015(简称ES2015).虽然浏览器在不 ...
- ES6常用
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准. 因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015(简称ES2015).虽然浏览器在不 ...
- 10.1 ES6 的新增特性以及简单语法
ES6 的新增特性以及简单语法 let 和 const 模板字符串 箭头函数 对象单体模式 es6面向对象 模块化 let 和 const 之前一直用 var 来声明变量,ES6 新增 let 和 ...
- Vue基础(ES6)
起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐上来就 ...
- js之面向对象
本文的面向对象分为ES6和ES6之前的,重点学习ES6的===============================一.面向对象 1.什么是面向对象 a)什么是对象:万物都可以抽象成对象 时间对象 ...
- vue前戏ES6
es6语法 es6语法:let和const: { var a=123; let b=234; } console.log(a); console.log(b); 浏览器里会只看到123; 而且还会抱一 ...
随机推荐
- 面試題之web
1. django和flask框架的区别? django:大而全的全的框架,重武器:内置很多组件:ORM.admin.Form.ModelForm.中间件.信号.缓存.csrf等 flask: 微型框 ...
- vue-demo(初级)
在使用WebStorm前把字符编码等等设置好! 使用WebStorm打开vue项目等待ide索引加载完成 注意要让WebStorm可以创建vue文件需要以下步骤: <template> & ...
- Linux内核分析第九次作业
理解进程调度时机跟踪分析进程调度与进程切换的过程 一.基础知识 Linux系统的一般执行过程 一般情况:正在运行的用户态进程X切换到运行用户态进程Y的过程 1. 正在运行的用户态进程X 2. 发生中断 ...
- 2.1 Visio画图后,粘贴到word白边太宽
如下图所示:Visio2007画图后,图白边距很宽. 右击打开>将鼠标移动到画布边缘,按下Ctrl后鼠标变为双箭头,然后拖拽方格画布,拖拽合适的宽度保存即可.
- 汉语言处理工具pyhanlp的拼音转换与字符正则化
汉字转拼音 HanLP中的汉字转拼音功能也十分的强大. 说明: l HanLP不仅支持基础的汉字转拼音,还支持声母.韵母.音调.音标和输入法首字母首声母功能. l HanLP能够识别多音字,也能给繁体 ...
- select2 清除选中项解决办法
在项目中使用select2:选中项 设置可清除. 代码中加上了allowClear : true $.get("/Work/Ajax/Select.ashx", function ...
- Python日志模块logging&JSON
日志模块的用法 json部分 先开一段测试代码:注意 str可以直接处理字典 eval可以直接将字符串转成字典的形式 dic={'key1':'value1','key2':'value2'} ...
- 4th Dec 2018
两个人都觉得自己没错,或者对方都把错误归结于另外一方,总会盯着对方的不足,无限放大:谁都不肯先放下兵器,亦或害怕自己放下了兵器,对方又拿起了盾.这就好像双方在同一时间拉扯一根皮筋,拉扯的越长,张力越大 ...
- 自己动手制作的淘宝闲鱼APP宝贝数据采集工具软件
之前做过淘宝PC端宝贝和店铺数据的采集,后来需要做APP端的数据采集,因为没有学过Android,以前也都是做PC端的软件,有没有其他方法呢? 突然想到了用手机模拟器,可以在电脑端控制运行手机APP端 ...
- Java 多态的实现机制
http://my.oschina.net/onlytwo/blog/52222 是父类或接口定义的引用变量可以指向子类或实现类的实例对象,而程序调用的方法在运行期才动态绑定,就是引用变量所指向的具体 ...