es5 构造函数 实例:

 1 function Point(x, y) {
 2   this.x = x;
 3   this.y = y;
 4 }
 5
 6 Point.prototype.toString = function () {
 7   return '(' + this.x + ', ' + this.y + ')';
 8 };
 9
10 var p = new Point(1, 2);

作为对象的模板,通过class关键字,可以定义类,相当于创建一个 实例

 1 //定义类
 2 class Point {
 3   constructor(x, y) {
 4     this.x = x;
 5     this.y = y;
 6   }
 7
 8   toString() {
 9     return '(' + this.x + ', ' + this.y + ')';
10   }
11 }
12 typeof Point // "function"
13 Point === Point.prototype.constructor // true
14 //ES6 的类,完全可以看作构造函数的另一种写法。

可以看到里面有一个constructor方法,这就是构造方法,this则代表实例对象

ES5 的构造函数Point,对应 ES6 的Point类的构造方法。

定义“类”的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错。

类的数据类型就是函数,类本身就指向构造函数。 直接对类使用new命令,跟构造函数的用法完全一致。

构造函数的prototype属性,在 ES6的“类”上面继续存在。 事实上,类的所有方法都定义在类的prototype属性上面。

class Point {constructor() {// ...
  }toString() {// ...
  }toValue() {// ...
  }
}// 等同于

Point.prototype = {constructor() {},toString() {},toValue() {},
};

Object.assign方法可以很方便地一次向类添加多个方法:

 1 Object.assign(Point.prototype, {
 2   toString(){},
 3   toValue(){}
 4 }); 5// 类的内部所有定义的方法,都是不可枚举的
 6
 7 Object.keys(Point.prototype)
 8 // []   es5 : ["toString"]
 9 Object.getOwnPropertyNames(Point.prototype)
10 // ["constructor","toString"]

类的属性名,可以采用表达式。

let methodName = 'getArea';class Square {constructor(length) {// ...
  }[methodName]() {// ...
  }
}

类和模块的内部,默认就是严格模式 只要你的代码写在类或模块之中,就只有严格模式可用。 ES6 实际上把整个语言升级到了严格模式。

constructor方法

constructor方法是类的默认方法, 通过new命令生成对象实例时,自动调用该方法。

一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。 相当于es5 new Vue

 1 class Point {
 2 }
 3
 4 // 等同于
 5 class Point {
 6   constructor() {} //JavaScript 引擎会自动为它添加一个空的constructor方法。
 7 }
 8 // 等同于
 9 new Point (){
10
11 }
12 constructor方法默认返回实例对象(即this),完全可以指定返回另外一个对象。
13
14 class Foo {
15   constructor() {
16     return Object.create(null);
17   }
18 }
19
20 new Foo() instanceof Foo
21 // false

类必须使用new调用,否则会报错。这是它跟普通构造函数的一个主要区别,后者不用new也可以执行, 与 ES5 一样,类的所有实例共享一个原型对象。

 私有属性

表达式定义一个类

 1 const MyClass = class Me {
 2   getClassName() {
 3     return Me.name;
 4     //这个类的名字是MyClass而不是Me,Me只在 Class 的内部代码可用,指代当前类。
 5   }
 6 };
 7 //内部没用到Me的话可以省略Me
 8 const YouClass = class {
 9 //...
10 };
11 采用 Class 表达式,可以写出立即执行的 Class。
12
13 let person = new class {
14   constructor(name) {
15     this.name = name;
16   }
17
18   sayName() {
19     console.log(this.name);
20   }
21 }('张三');
22
23 person.sayName(); // "张三"

不存在变量提升(hoist),必须保证子类在父类之后定义),这一点与 ES5 完全不同。

new Foo(); // ReferenceError
class Foo {} 

继承类

{let Foo = class {};class Bar extends Foo { //Bar继承Foo } } 

私有方法

私有方法是常见需求,但 ES6 不提供,只能通过变通方法模拟实现。

有三种方法可模拟

//第一种
class Widget {// 公有方法
  foo (baz) {this._bar(baz);}// 私有方法
  _bar(baz) {return this.snaf = baz;}// _bar方法前面的下划线,表示这是一个只限于内部使用的私有方法 但是,在类的外部,还是可以调用到这个方法。
}//第二种
class Widget {foo (baz) {bar.call(this, baz);}// 内部调用了bar.call(this, baz),成为了当前模块的私有方法
}
//私有方法移出模块
function bar(baz) {return this.snaf = baz;
}//第三种
const bar = Symbol('bar');
const snaf = Symbol('snaf');export default class myClass{// 公有方法
  foo(baz) {this[bar](baz);}// 私有方法
  [bar](baz) {return this[snaf] = baz;}// 利用Symbol值的唯一性,将私有方法的名字命名为一个Symbol值。
};

私有属性的提案

方法是在属性名之前,使用#表示。

class Point {#x=0;// 私有属性可以指定初始值,在构造函数执行时进行初始化。
constructor(x = 0) {#x = +x; // 写成 this.#x 亦可
  }get #x() { return #x }set #x(value) { #x = +value }#sum() { return #a + #b; }  //私有方法//  #x是一个私有属性,它的读写都通过get #x()和set #x()来完成。 #x和x是两个不同的属性
}
//JavaScript 是一门动态语言,没有类型声明,使用独立的符号似乎是唯一的比较方便可靠的方法,能够准确地区分一种属性是否为私有属性。"@" 已经留给了 Decorator。

私有属性不限于从this引用,类的实例也可以引用私有属性

class Foo {#privateValue = 42;static getPrivateValue(foo) {return foo.#privateValue;}
}Foo.getPrivateValue(new Foo()); // 42
console.log(Foo.#privateValue) // 报错

//class 的取值函数(getter)和存值函数(setter)

class MyClass {constructor() {// ...
  }get prop() {return 'getter';}set prop(value) {console.log('setter: '+value);}
}let inst = new MyClass();inst.prop = 123;
// setter: 123

inst.prop
// 'getter'

 

转载于:https://www.cnblogs.com/gaoguowen/p/10073034.html

Class 学习 (Es6阮一峰)相关推荐

  1. ES6阮一峰-----变量的解构赋值学习

    1.数组的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = ...

  2. es6阮一峰学习--let 和 const 命令

    1.let 命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. {let a = 10;var b = 1; }a // ...

  3. 学习笔记“阮一峰 Redux 入门教程(一):基本用法”

    目录 1.基本概念 Redux的诞生: Redux定义.作用: Store : State: Action: Action Creator: store.dispatch(): Reducer: st ...

  4. ES6 标准入门(第二版)阮一峰学习

    现在前端环境中,每一位程序员都要求熟练ES6语法,但是大部分ES6的文档都不太完整,接下来的时间,我将为童鞋们分享阮一峰老师第二版的ES6标准.让我们一起来学习一下!!! 本期先说一下学习的目录 1: ...

  5. js -- ES6(一)-- 简介(根据阮一峰ES6标准入门整理)

    目前正在学习ES6,根据阮一峰的ES6入门2,学到哪更新到哪里,都是基本的知识,复杂的目前还不会,涉及的代码都是亲自运行过的,若发现错误请指正. ES6 提供了许多新特性,但是并不是所有的浏览器都能够 ...

  6. 阮一峰es6电子书_ES6理解进阶【大前端高薪训练营】

    一:面向对象:类class 面向对象三大特性之封装 封装是面向对象的重要原则,它在代码中的体现主要是以下两点: 封装整体:把对象的属性和行为封装为一个整体,其中内部成员可以分为静态成员(也叫类成员)和 ...

  7. 阮一峰 / ES6 数组的解构赋值

    目录 一.定义 二.详情讲解 1.数组解构:数组解构时数组的元素是按次序排列的,变量的取值由它的位置决定 2.对象解构:对象解构时对象的属性没有次序,变量必须与属性同名,才能取到正确的值. 三.用途 ...

  8. 【ES6】阮一峰promise

    阅读链接:[ES6]阮一峰promise 要点: then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例).因此可以采用链式写法,即then方法后面再调用另一个then方 ...

  9. 前端知乎:关于阮一峰博客《学习Javascript闭包》章节中最后两个思考题

    阮一峰博客:<学习Javascript闭包>章节中最后有个思考题: 如果你能理解下面两段代码的运行结果,应该就算理解闭包的运行机制了. 代码片段一 var name = "The ...

  10. 学习阮一峰的Flex布局记录(个人笔记)

    仅仅个人用来做笔记,如有不对请指出!!感谢? 原文地址:www.ruanyifeng.com/blog/2015/0-) 作者:阮一峰大神? 和我自己天马行空的想法? 发表日期: 2015年7月10日 ...

最新文章

  1. Java——我的概念
  2. async spring 默认线程池_springboot-@Async默认线程池导致OOM问题
  3. (转载)大数据实战:站在JMP分析平台上的FIT足迹识别技术
  4. 详细讲解 移植Uboot到ARMer9开发系统上
  5. android mvp 作用,Android MVP与MVC的区别和理解
  6. 轻云服务器的性能,腾讯云轻量应用服务器性能评测(以香港地域为例)
  7. Spring Boot学习总结(1)——Spring Boot入门
  8. 科技圈自媒体达人吴恩达又双叒叕刷屏了 这次是因为Deeplearning.ai
  9. java date 在mybatis_mybatis如何使用Java8的日期LocalDate和LocalDateTime详解
  10. android 8原生系统下载地址,android8.0下载地址 android8.0系统下载网址
  11. 苹果计算机格式化磁盘,如何格式化Mac电脑硬盘_给Mac电脑格式化硬盘的方法
  12. 2019大裁员!年关将至,最高裁员比例竟达90%?
  13. word分栏对齐方法
  14. Linux第二章:6.Xftp安装教程、使用Xftp进行远程文件传输
  15. 5200 fqy的难题----2的疯狂幂
  16. JAVA中dot的用法_doT学习(一)之语法
  17. windows防火墙开端口失败
  18. VS+Opencv出现:xxx处有未经处理的异常: Microsoft C++ 异常: cv::Exception,位于内存位置xxx处。
  19. 【树状数组】清点人数
  20. Micro:bit - 功能引脚介绍

热门文章

  1. 量化投资学习——股票数据接口的汇总和整理
  2. 开心电视助手v3.8最新绿色版,安卓设备远程管理工具神器
  3. driver接管当前浏览器
  4. 站斧超级浏览器风控系统助力Lazada商家安全管理
  5. [War3]Fdf文件详解,简单的UI教程演示 - 魔兽争霸3
  6. ECTouch_v2.7.2-一款强大的商城系统源码带视频教程
  7. 谈谈面向对象分析和设计
  8. 使用PrtSc键截屏
  9. 华为官方解锁工具_新年重磅更新来袭 华为Mate20 Pro微信人脸支付功能已上线
  10. VM12 虚拟机使用桥接模式却连不上网的解决办法