示例 1

ES6Demo1.html 内容如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>ES Demo1 </title><!-- JQuery CDN--><script src="http://code.jquery.com/jquery-2.1.1.min.js"></script><!-- H5 开始 script标签可以不用写 type 属性--><script src="ES6_Demo1.js"></script>
</head>
<body></body>
</html>

ES6Demo1.js 内容如下：

/*** Created by Administrator on 2018/11/13 0013.*/
$(function () {//use strict：表示启用严格模式，严格模式下，代码书写必须符合规范，否则不通过//从 ES5 开始，函数内部可以设定为严格模式;ES6开始 js 默认开启严格模式'use strict';/*** Animal 相当与一个对象* showName、showAge 是对象的方法* @constructor*/var Animal = function () {this.showName = function () {console.log("My name is DogChen.\r\n");}this.showAge = function () {console.log("我今年 8 岁.\r\n");}}/**调用 Animal 对象的方法*/new Animal().showName();new Animal().showAge();/**调用 Animal 对象的方法*/var animal = new Animal();animal.showName();animal.showAge();
});

示例 2

ES6Demo1.html 内容不变，ES6Demo1.js 内容修改如下：

/*** Animal 相当与一个对象* showName、showAge 是对象的方法* @constructor*/
var Animal = function () {/*** 如果将来想要链式调用，则方法中将对象返回出去* @returns {Animal}*/this.showName = function () {console.log("My name is DogChen.\r\n");return this;}this.showAge = function () {console.log("我今年 8 岁.\r\n");return this;}
}//除了直接在对象里面定义方法，也可以后期使用 prototype 关键字进行定义
Animal.prototype.showAddress = function () {console.log("我家住在大明湖畔.\r\n");return this;
}$(function () {//use strict：表示启用严格模式，严格模式下，代码书写必须符合规范，否则不通过//从 ES5 开始，函数内部可以设定为严格模式;ES6开始 js 默认开启严格模式'use strict';/**调用 Animal 对象的方法*/new Animal().showName().showAge().showAddress();/**调用 Animal 对象的方法*/var animal = new Animal();animal.showName().showAge().showAddress();
});

示例 3

ES6Demo1.html 内容不变，ES6Demo1.js 内容修改如下：

//使用 class 关键字来定义类
class Animal {//constructor 相当于类的构造器constructor() {console.log("Animal 无参构构造器执行...");}//constructor 相当于类的构造器,注意与 Java 可以重载构造器不同，ES 6 中类的构造器只能有一个/*constructor(name, age) {console.log("Animal 有参构造器执行,name=" + name + ",age=" + age);}*/
}$(function () {new Animal();//new Animal("华安", 35);
});

示例 4

ES6Demo1.html 内容不变，ES6Demo1.js 内容修改如下：

//使用 class 关键字来定义类
class Animal {//constructor 相当于类的构造器constructor() {console.log("Animal 无参构构造器执行...");}//类中普通方法showName() {console.log("我叫金三顺.");return this;}//类中的静态方法，类似 Java ，调用时直接使用 类.方法名，如 Animal.showAge()// 这样调用 new Animal().showAge() 则是错误的static showAge() {console.log("静态方法，我今年 30 岁.");return this;}
}$(function () {new Animal().showName();console.log("---------");Animal.showAge();
});

单例模式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>单例模式/title><script src="http://code.jquery.com/jquery-2.1.1.min.js"></script><!-- ES6 时，script 的 type 需要标识成 module，否则箭头函数编译不通过，即无法识别--><script type="module">/**动物类*/class Animal {constructor() {console.log("Animal 构造器执行...");}/*** 如同 java 的静态工程模式创建单例一样，一个游戏应该只有一个导演的，所以这里也是如此* @returns {*}*/static getInstance() {/*** 直接创建成员变量 instance* 第一次时 instance 为 undefined,而 !undefined 就会等于 true* 只要 instance 有值，if 都会作为 true 处理*/if (!Animal.instance) {Animal.instance = new Animal();}return Animal.instance;}}$(function () {/**Animal 的构造器之后执行一次*/Animal.getInstance();Animal.getInstance();Animal.getInstance();});</script>
</head>
<body>
</body>
</html>

ES6 面向对象编程相关推荐

ES6学习笔记（一）：轻松搞懂面向对象编程、类和对象
文章目录面向过程编程P OP(Process oriented programming) 面向对象编程OOP(Object Oriented Programming) ES6中的类和对象面向对象 ...
《javascript面向对象编程指南》读书笔记
<javascript面向对象编程指南>读书笔记 <javascript面向对象编程指南>读书笔记第一章面向对象的JavaScript 第二章基本数据类型与流程控制变量 ...
JavaScript(四)——面向对象编程、BOM、DOM、表单验证、jQuery
文章目录 1. 面向对象编程 2. 操作BOM对象(重点) 3. 操作DOM对象(重点) 4. 操作表单(验证) 5. jQuery 1. 面向对象编程 (1) 原型对象 javascript.Jav ...
JavaScript 面向对象编程（四） —— 正则表达式
本篇为 JavaScript 进阶 ES6 系列笔记第四篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 : 系列笔记: JavaScript 面向对象编程(一) -- 面向对 ...
JavaScript 面向对象编程（三） —— 函数进阶 / 严格模式 / 高阶函数 / 闭包 / 浅拷贝和深拷贝
本篇为 JavaScript 进阶 ES6 系列笔记第三篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 :ECMAScript 6 入门系列笔记: JavaScript 面 ...
JavaScript 面向对象编程（二） —— 构造函数 / 原型 / 继承 / ES5 新增方法
本篇为 JavaScript 进阶 ES6 系列笔记第二篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 :ECMAScript 6 入门 : Javascript 继承机制的 ...
JavaScript 面向对象编程（一） —— 面向对象基础
本篇为 JavaScript 进阶 ES6 系列笔记第一篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 文章目录「一」面向对象编程介绍「二」ES6 中的类与对象「三」类 ...
JavaScript 的函数式编程与面向对象编程区别在哪？
本文通过代码来看一看JavaScript中函数式编程和面向对象编程的差异. 作者 | Jesse Warden 译者 | 弯月,责编 | 郭芮出品 | CSDN(ID:CSDNnews) 以下为译文 ...
php控制器面向对象编程,PHP 面向对象编程（2）
一些内建方法: class Person { public $isAlive = true; function __construct($name) { //这里我们创建了一个name的属性 $thi ...
【JavaScript】ES5和ES6面向对象
前言(Preface) Object Oriented 的一个标志就是 Class (类),通过类可以创建任意多个具有相同属性和方法的对象.然而,JavaScript中只有对象,没有类. ECMA-2 ...

ES6 面向对象编程

示例 1

示例 2

示例 3

示例 4

单例模式

ES6 面向对象编程相关推荐

最新文章

热门文章