Class 学习 (Es6阮一峰)
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阮一峰)相关推荐
- ES6阮一峰-----变量的解构赋值学习
1.数组的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = ...
- es6阮一峰学习--let 和 const 命令
1.let 命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. {let a = 10;var b = 1; }a // ...
- 学习笔记“阮一峰 Redux 入门教程(一):基本用法”
目录 1.基本概念 Redux的诞生: Redux定义.作用: Store : State: Action: Action Creator: store.dispatch(): Reducer: st ...
- ES6 标准入门(第二版)阮一峰学习
现在前端环境中,每一位程序员都要求熟练ES6语法,但是大部分ES6的文档都不太完整,接下来的时间,我将为童鞋们分享阮一峰老师第二版的ES6标准.让我们一起来学习一下!!! 本期先说一下学习的目录 1: ...
- js -- ES6(一)-- 简介(根据阮一峰ES6标准入门整理)
目前正在学习ES6,根据阮一峰的ES6入门2,学到哪更新到哪里,都是基本的知识,复杂的目前还不会,涉及的代码都是亲自运行过的,若发现错误请指正. ES6 提供了许多新特性,但是并不是所有的浏览器都能够 ...
- 阮一峰es6电子书_ES6理解进阶【大前端高薪训练营】
一:面向对象:类class 面向对象三大特性之封装 封装是面向对象的重要原则,它在代码中的体现主要是以下两点: 封装整体:把对象的属性和行为封装为一个整体,其中内部成员可以分为静态成员(也叫类成员)和 ...
- 阮一峰 / ES6 数组的解构赋值
目录 一.定义 二.详情讲解 1.数组解构:数组解构时数组的元素是按次序排列的,变量的取值由它的位置决定 2.对象解构:对象解构时对象的属性没有次序,变量必须与属性同名,才能取到正确的值. 三.用途 ...
- 【ES6】阮一峰promise
阅读链接:[ES6]阮一峰promise 要点: then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例).因此可以采用链式写法,即then方法后面再调用另一个then方 ...
- 前端知乎:关于阮一峰博客《学习Javascript闭包》章节中最后两个思考题
阮一峰博客:<学习Javascript闭包>章节中最后有个思考题: 如果你能理解下面两段代码的运行结果,应该就算理解闭包的运行机制了. 代码片段一 var name = "The ...
- 学习阮一峰的Flex布局记录(个人笔记)
仅仅个人用来做笔记,如有不对请指出!!感谢? 原文地址:www.ruanyifeng.com/blog/2015/0-) 作者:阮一峰大神? 和我自己天马行空的想法? 发表日期: 2015年7月10日 ...
最新文章
- Java——我的概念
- async spring 默认线程池_springboot-@Async默认线程池导致OOM问题
- (转载)大数据实战:站在JMP分析平台上的FIT足迹识别技术
- 详细讲解 移植Uboot到ARMer9开发系统上
- android mvp 作用,Android MVP与MVC的区别和理解
- 轻云服务器的性能,腾讯云轻量应用服务器性能评测(以香港地域为例)
- Spring Boot学习总结(1)——Spring Boot入门
- 科技圈自媒体达人吴恩达又双叒叕刷屏了 这次是因为Deeplearning.ai
- java date 在mybatis_mybatis如何使用Java8的日期LocalDate和LocalDateTime详解
- android 8原生系统下载地址,android8.0下载地址 android8.0系统下载网址
- 苹果计算机格式化磁盘,如何格式化Mac电脑硬盘_给Mac电脑格式化硬盘的方法
- 2019大裁员!年关将至,最高裁员比例竟达90%?
- word分栏对齐方法
- Linux第二章:6.Xftp安装教程、使用Xftp进行远程文件传输
- 5200 fqy的难题----2的疯狂幂
- JAVA中dot的用法_doT学习(一)之语法
- windows防火墙开端口失败
- VS+Opencv出现:xxx处有未经处理的异常: Microsoft C++ 异常: cv::Exception,位于内存位置xxx处。
- 【树状数组】清点人数
- Micro:bit - 功能引脚介绍