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 的面向对象的更多相关文章

  1. 粗看ES6之面向对象写法

    标签: es6 在es6以前,js没有类的概念,虽然有构造函数原型的方式用来做面向对向开发,但是对于书法并不是十分友好,而且对于继承实现也不是十分友好. es6引入class constructor ...

  2. ES6基本语法和一些面向对象的知识

    声明变量 var 使用var声明变量会将变量的声明提到全局,在局部作用域声明的在全局也能打印 { var a = 12; } // 变量提升 var会将变量的声明提到全局 console.log(a) ...

  3. [js高手之路] es6系列教程 - 新的类语法实战选项卡

    其实es6的面向对象很多原理和机制还是ES5的,只不过把语法改成类似php和java老牌后端语言中的面向对象语法. 一.用es6封装一个基本的类 class Person{ constructor( ...

  4. ES6常用知识点小结

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准. 因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015(简称ES2015).虽然浏览器在不 ...

  5. ES6常用

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准. 因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015(简称ES2015).虽然浏览器在不 ...

  6. 10.1 ES6 的新增特性以及简单语法

    ES6 的新增特性以及简单语法  let 和 const 模板字符串 箭头函数 对象单体模式 es6面向对象 模块化  let 和 const 之前一直用 var 来声明变量,ES6 新增 let 和 ...

  7. Vue基础(ES6)

      起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐上来就 ...

  8. js之面向对象

    本文的面向对象分为ES6和ES6之前的,重点学习ES6的===============================一.面向对象 1.什么是面向对象 a)什么是对象:万物都可以抽象成对象 时间对象 ...

  9. vue前戏ES6

    es6语法 es6语法:let和const: { var a=123; let b=234; } console.log(a); console.log(b); 浏览器里会只看到123; 而且还会抱一 ...

随机推荐

  1. nginx添加一个站点

    server { listen ; server_name demo.abc.com ; root /Users/pa200318/demo.cp.com/trunk; index index.php ...

  2. Centos7.4安装配置haproxy和Keepalived补充内容

    补充比较杂 1.当master服务恢复正常之后,backup机器收到消息,然后让出vip 下面是master机器服务恢复正常后,backup机器的Keepalived日志 收到master的消息通知, ...

  3. centos7使用snmp

     一.安装snmp net-snmp :服务端 net-snmp-utils:客户端工具集   二.启动 systemctl start snmpd   三.修改配置文件(完整的配置文件如下) com ...

  4. mac 中host设置方法

    在开发中,有的接口为了安全考虑,只能通过指定的域名去反问,这时本地启动的 localhost 就无法获取到数据,需要去更改电脑的host文件配置,下面介绍mac 电脑的设置方法 1. 打开终端,输入一 ...

  5. pre-commit 钩子,代码质量检查:在 vue-cli 3.x 版本中,已经使用尤大改写的yorkie,yorkie实际是fork husky,然后做了一些定制化的改动,使得钩子能从package.json的 "gitHooks"属性中读取

    pre-commit 钩子,代码质量检查:在 vue-cli 3.x 版本中,已经使用尤大改写的yorkie,yorkie实际是fork husky,然后做了一些定制化的改动,使得钩子能从packag ...

  6. sql server紧急状态下登录脚本

    --打开xp_cmdshell功能  EXEC [sys].[sp_configure] @configname = 'xp_cmdshell', -- varchar(35)    @configv ...

  7. solr6.4.1 搜索引擎(1)启动eclipse启动

    solr是一个java写的搜索引擎,所以支持java方式的eclipse调试. 本篇文章使用solr版本为6.4.1 一. 环境 solr 下载地址 http://archive.apache.org ...

  8. redis高可用(主从复制)

    熟练掌握redis需要从 reids如何操作5种基本数据类型,redis如何集群,reids主从复制,redis哨兵机制redis持久化 reids主从复制 的作用可以:实现数据备份,读写分离,集群, ...

  9. [转][C#]压缩解压

    { internal static class Compressor { public static Stream Decompress(Stream source, bool bidiStream) ...

  10. 使用pm2来保证Spring Boot应用稳定运行

    Spring Boot开发web应用就像开发普通的java程序一般简洁,因为其内嵌了web容易,启动的时候只需要一条命令java -jar server.jar即可,非常方便.但是由此而来的问题是万一 ...