ES6 新特性之 Class

最新推荐文章于 2022-07-21 11:17:26 发布
最新推荐文章于 2022-07-21 11:17:26 发布
阅读量216 收藏
点赞数 1
原文链接：https://my.oschina.net/u/4144971/blog/3099761
版权

在JS里面，它实际上是没有类的概念的，我们如果想要实现一个面向对象的一个编程，那么我们只能够借助构造函数，但是构造函数有着自身的缺点，首先第一点它的写法不清晰，我们需要继承的话就需要手动的去操作prototype；其次它面向对象的思想也不是很强烈，所以在ES6它封装了一层构造函数的语法糖，就叫Class，封装后有了一个更清晰的写法，而且更加像一个面向对象编程语言。

1：基本概念

构造函数语法糖构造函数语法糖
  • 更加清晰的写法
  • 面向对象编程

在ES5中：

  // ES5 的构造函数
  function Position(x, y) {
    this.x = x;
    this.y = y;
  }
  
  const position = new Position(1, 1);

在ES6中：

在ES6中，首先有一个class修饰符，class将告诉编辑器声明了一个名叫Position的class。 class是构造函数的语法糖，我们怎么来看呢？我们可以看一下这个构造函数它的prototype的constructor是否是本身，如果是本身那就说明class的行为跟构造函数是保持一致的。

    class Position {
       constructor(x, y) {
         this.x = x;
         this.y = y;
       }
     }
     Position === Position.prototype.constructor;
     /* true */
     const position = new Position(1, 1);
类的所有方法定义在类的prototype属性

在ES5里面，比如说我们在构造函数里面定义了一些方法，那么我们在实例里面是有这一个方法的，但是ES6不一样。在Class里面，所有的方法全部都定义到了prototype属性上面，也就是除了this.之外的其他都定义在了prototype属性上面去。

    class Position {
       constructor(x, y) {
         this.x = x;
         this.y = y;
       }
    
       scan() {
         console.log(this.x, this.y);
       }
    }
    Position.prototype;
      
    /*
    {
      constructor: class Position
      scan: ƒ scan()
      __proto__: Object
    }
    */
内部方法不可枚举

内部的方法都到prototype上面去，但是这个prototype的方法却是不可枚举的，也就是说它的枚举属性是false。 如果这个时候我们想要得到这个枚举，想要知道它有哪些方法的话，我们就需要使用到getOwnPropertyNames。

   class Position {
     constructor(x, y) {
       this.x = x;
       this.y = y;
     }
     scan() {
       console.log(this.x, this.y);
     }
   }
   
   Object.keys(Position.prototype);
   /* [] */
   
   Object.getOwnPropertyNames(Position.prototype);
   /* ["constructor", "scan"] */
this指向 - 默认指向实例本身
    class Position {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
      scan() {
        console.log(this.x, this.y);
      }
    }
    
    const position = new Position(1, 1);
    
    // 调用自身扫描
    position.scan();
    // 1 1

解构出来再去调用this指向就不一致了，会出问题报错：

      const { scan } = position;
      scan();
      /* Cannot read property 'x' of undefined */

对于上面的this在解构后调用出现的指向问题出错我们可以有两种解决办法： 第一种方法，借助于箭头函数： 箭头函数在定义时this就已经指定了，也就是它什么定义的和在哪里定义的，它的this就是什么。

      class Position {
         constructor(x, y) {
           this.x = x;
           this.y = y;
         }
         // 将scan()函数改为一个箭头函数，this永远指向定义时的位置
         scan = () => {
           console.log(this.x, this.y);
         }
      }
      
      const position = new Position(1, 1);
      const { scan } = position;
      scan();
      /* 1 1 */

第二种方法，手动的bind：

      class Position {
         constructor(x, y) {
           this.x = x;
           this.y = y;
           this.scan = this.scan.bind(this);
         }
         scan() {
           console.log(this.x, this.y);
         }
      }
      const position = new Position(1, 1);
      const { scan } = position;
      scan();
      /* 1 1 */

2：方法属性

constructor 构造器，首先它是一个required，也就是它是一个必须的，如果我们没有传入它，那么就会默认生成一个空的一个constructor。

constructor - required - 默认为空函数
  • new命令使用时调用一次constructor
        class Position {
           constructor(x, y) {
              this.x = x;
              this.y = y;
              console.log('constructor');
           }
        }
        
        const position = new Position(1, 1);
        /* constructor */
  • 默认返回实例对象
         class Position {
            constructor(x, y) {
              return Object.create({ name: 'Eric' });
            }
          }
        
          const position = new Position(1, 1);
          控制台输入：position
          // 得到一个空对象：{}
          
          position instanceof Position;
          /* false */
类的实例
  • new命令创建
  • 实例的属性除this之外全部定义在原型对象上
      hasOwnProperty();
getter与setter - 拦截器，拦截某个属性属性的存取行为

get是拦截它的取，set是拦截它的存，getter和setter必须是成对出现的，而且我们设置时需要设置getter和setter应该是哪一个，应该是当前的对象不存在的，否则就会报一个堆栈溢出，因为它会有一个循环调用的问题。

      class Position {
        constructor(x, y) {
          this.x = x;
          this.y = y;
        }
      
        get z() {
          return this.x;
        }
      
        set z(value) {
          this.x = 2;
        }
      }
      
      const position = new Position(1, 1);
static - 静态方法 - 不能被实例继承 - this指向类

static字面意思理解就是静态，它不能被实例继承，也就是说在实例里面是不能调用静态方法的，它只能通过类本身来调用，这时这个this指向的是当前class本身。

      class Position {
        constructor(x, y) {
          this.x = x;
          this.y = y;
          this.z = 100;
        }
      
        static scan() {
          console.log(this);
        }
      }
      
      const position = new Position(1, 1);
      
      position.scan();
      /* position.scan is not a function */
      
      
      Position.scan();
      /*
      class Position {
        constructor(x, y) {
          this.x = x;
          this.y = y;
          this.z = 100;
        }
      
        static scan() {
          console.log(this);
        }
      }
      */
属性新写法

在之前的代码里面属性 x 和 y 都是定义在constructor内部的，这样实际上是比较清晰的但是有一个提案：把属性全部放在构造函数的最顶层，我们可以直接在构造函数的内部来定义一些变量，当然这个变量是不需要加修饰符的，这时候就默认加到了this的对象上面去。

      class Count {
        x = 0;
      
        reduce() {
          this.x = this.x - 1;
          console.log(this.x);
        }
      
        increment() {
          this.x = this.x + 1;
          console.log(this.x);
        }
      }
      
      const count = new Count();
      
      count.increment();
      count.increment();
      count.increment();
      count.increment();
      
      // 1
         2
         3
         4

3：类的继承

    class Point {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
    
      scan = () => {
        console.log(this.x, this.y);
      }
    }
    // SubPoint 继承了 Point
    class SubPoint extends Point {
    
    }
    const subPoint = new SubPoint(1, 1);
    
    subPoint;
    /*
    {
      scan: () => { console.log(this.x, this.y); }
      x: 1
      y: 1
      __proto__: Point
    }
    */
子类必须调用super方法
      class Point {
        constructor(x, y) {
          this.x = x;
          this.y = y;
        }
      
        scan = () => {
          console.log(this.x, this.y);
        }
      }
      
      class SubPoint extends Point {
        constructor(...rest) {
          // super(...rest)
        }
      }
      const subPoint = new SubPoint(1, 1);
      
      /* Must call super constructor in derived class before accessing 'this' or returning from derived constructor */
Object.getPrototypeOf - 可以在类中获取父类实例
      class Point {
        constructor(x, y) {
          this.x = x;
          this.y = y;
        }
      
        scan = () => {
          console.log(this.x, this.y);
        }
      }
      
      class SubPoint extends Point {
        constructor(...rest) {
          super(...rest)
        }
      }
      const subPoint = new SubPoint(1, 1);
      
      Object.getPrototypeOf(subPoint);
      /*
      Point {
        constructor: class SubPoint
        __proto__: Object
      }
      */

转载于:https://my.oschina.net/u/4144971/blog/3099761

ciguanpeng7618
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Class 的基本语法
Geordies的博客
02-09 692
# Class 的基本语法 # 简介 # 类的由来 JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this....
class类（手把手教你）C#入门基础
cfqq1989的博客
05-10 2408
class 类是namespace下最小的成员单位；class是对象，是一种思想。解决生活中的问题。先有汽车图纸，然后再造出汽车。byte num；是内存开辟8个bit。学生对象张三=new 学生对象();开辟的内存大小由 学生类型 决定。这句就是造出了一辆车；我们称它为实体对象。我们经常把一个对象的值给另一个对象（把对象当参数一样传递），或者调用对象的方法。(就好比这辆车，我可以按喇叭苏D_LV977.喇叭();）我们也可以把其他车的激光大灯拆下来给这辆车。（赋值操作）
ES6 Class介绍
过客如期的博客
03-27 263
关于ES6的class类的学习和总结
ES6中的class 与prototype
很多时候犯错都是在不知情的情况下发生的
06-12 823
一、定义构造函数 在以前的js中，生成一个对象实例，需要先定义构造函数，然后通过prototype 的方式来添加方法，在生成实例： function Person(){ this.name = "测试"； this.age = 26; } Person.prototype.getName = function(){ console.log("name:" + this.name) } var p = new Per...
在vue中关于 :class 的几种使用方式
_淘淘子的博客
08-01 8592
最近一直在做vue项目 从网上搜索到的资料不太多。关于:class的使用 结合自己的实现 整理如下。接下来一篇写:style 。其实从:class 这里可以想到:style的使用 也是类似的。 一 class 1、 自定义class 通过vue computed 计算属性，实现 我的class 是名称+时间戳，是独一份的，可以作为id角色使用。 html: <div :class="_mod...
es6新特性之 class 基本用法解析
08-27
"ES6 新特性之 Class 基本用法解析" ES6 中引入的 Class 语法是 JavaScript 中的一种新的编程方式，提供了更接近传统语言的写法，引入了类（Class）这个概念，作为对象的模板。下面是 ES6 中 Class 的基本用法解析...
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
08-30
主要介绍了ES6新特性之类(Class)和继承(Extends)相关概念与用法,结合实例形式较为详细的分析了ES6中类(Class)和继承(Extends)的基本概念、语法、使用方法与注意事项,需要的朋友可以参考下
ES6 新特性示例代码.zip
06-03
这个压缩包"ES6 新特性示例代码.zip"包含了与ES6新特性相关的代码示例，帮助我们更直观地理解这些特性。以下是对这些特性的详细解释： 1. **let 和 const 声明**： - `let` 用于块级作用域变量声明，解决了之前`...
JavaScript ES6的新特性使用新方法定义Class
10-22
主要介绍了JavaScript ES6的新特性使用新方法定义Class 的相关资料,需要的朋友可以参考下
vue中 class 和 :class 的使用
weixin_45547638的博客
07-21 3012
vue中 class :class 的 多个样式的写法注意不能写多个class。
ES6 y修饰符（sticky）
_being_的专栏
04-10 1583
y修饰符（sticky） y修饰符在ES6中被引入，它和g修饰符一样可以被执行多次，lastIndex移动到匹配位置的下一个位置。 不同的地方在于y修饰符必须在开始的位置匹配，g修饰符只要在剩余的部分有匹配就可以。function matcher(regex, input) { return () => { const match = regex.exec(input) c
vue :class的常用方法
热门推荐
18岁的蛋蛋博客
07-11 1万+
1.：class用来展示某个div的active状态 <template> <div class="name">绑定新手机</div> <van-field v-model="phone" placeholder="请输入手机号" :class="{'error': errPhone}"/> <div class="errorPhone...
ES6中class的使用+继承
汉堡请不要欺负面条
04-27 6403
一.Class 介绍+基本语法(1).介绍通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。(2).Class 的基本语法//definedClasses.js //定义类 class Person{ // 构造 constru...
ES6新特性 class(类定义和使用)
wuyujin1997的博客
04-12 1411
intro 在ES6中，引入了class关键字用于快速地定义“类”。 在JS中，“类”的本质是function 可以将其看做一个语法糖，让对象原型的写法更简洁清晰，更像面向对象编程的语法。 涉及关键字： class 声明类模板 constructor 构造方法 get getter方法 set setter方法 static 静态成员 extends 继承 super 在...
ES6新特性 类（class）详解
明天也要努力的博客
02-10 1042
传统的javascript中只有对象，没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。这样的写法相对于其它传统面向对象语言来讲，很有一种独树一帜的感脚！非常容易让人困惑！ 1. class类与构造函数对比 1.1 构造函数实现 如果要生成一个对象实例，需要先定义一个构造函数，然后通过new操作符来完成。 // 函数名和实例化构造名相同且大写（非强制，但这么写有助...
J2EE-028 Spring容器源码解析（三）this().Scanner构建过程和scan构建
qq_35059264的博客
05-13 169
Scanner构建过程前言源码解析this()总结this()图解Scan()构建findCandidateComponents>scanCandidateComponents图解总结： 前言 前面2章我们梳理了AnnotatedBeanDefinitionReader的构造过程 今天我们来梳理ClassPathBeanDefinitionScanner的构造过程 源码解析 我们首先顺着ClassPathBeanDefinitionScanner这个类的构造函数看 首先看有没有父类，有父类的话看父
ES 6大纲总结——Class和Module
weixin_34072857的博客
01-09 111
这是我在极客学院学习ES6时，自己总结的大纲，这样学习比较成体系吧，分享给大家。 点击查看大图 转载于:https://juejin.im/post/5c35b0806fb9a049f154635c
关键字 ::class 的说明
qq_35972181的博客
02-20 880
::class 关键字 官方定义： 自 PHP 5.5 起，关键词 class 也可用于类名的解析。使用 ClassName::class 你可以获取一个字符串，包含了类 ClassName 的完全限定名称。这对使用了 命名空间 的类尤其有用。 例如： 原代码： <?php namespace NS { class ClassName { } echo Clas...
ES6中的class详解及拓展
李卓书
06-24 470
文章目录需求基本概念讲解高级概念讲解 需求 最近项目中,需要针对项目封装一些常用的class类,由于ES6提供了class,肯定再用模拟类写法就不太好了,所以尝鲜,对class类进行学习和研究 基本概念讲解 1 class理解 1 在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类 2 class 的本质是 function 3 它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法 需要弄清楚的几个常见概念,这里我就不一一列举了,都很简单 1 类定义
es6 新特性有哪些
最新发布
07-29
ES6（ECMAScript 2015）是JavaScript的一个重要更新，其中包含了许多新特性。以下是一些ES6的新特性： 1. 块级作用域变量声明：使用let和const关键字可以在块级作用域范围内声明变量，并且不会受到外部作用域的影响...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值