ES6语法（四）class类数值扩展方法对象扩展方法介绍

雪芽蓝域zzs

于 2023-12-28 20:07:59 发布

阅读量472

点赞数 11

分类专栏： ES语法文章标签： es6 javascript 开发语言

本文链接：https://blog.csdn.net/qq_36158551/article/details/135277063

版权

ES语法专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了ES6中的Class类概念，包括类的声明、构造方法、静态属性与方法、继承机制（super调用）、get和set访问器以及数值扩展特性，如Number.EPSILON和对象方法如Object.is()、assign()和setPrototypeOf()的使用。

摘要由CSDN通过智能技术生成

1. Class类

es6引入了类Class 的概念，作为对象的模板。可以使用Class关键字定义类，通过类实例化对象。
Class类可以看做是一个语法糖，绝大部分功能也可以通过es5做到。
Class写法只是让对象原型的写法更加清晰、更像面向对象变成的语法而已。
ES5 构造函数实例化对象

// An highlighted block
    function Phone(brand, price) {
        this.brand = brand;
        this.price = price;
      }
      Phone.prototype.call = function () {
        console.log('call me');
      };
      let HW = new Phone('huawei', 9999);
      console.log(HW);

1.1. class声明类

构造方法名称不能修改实例化是自动执行
方法定义不能使用ES5对象的形式

 class Phone {
        // 构造方法 名称不能修改 实例化是自动执行
        constructor(brand, price) {
          this.brand = brand;
          this.price = price;
        }
        // 不能使用ES5对象的形式
        // call: function (){} //  错误
        call() {
          console.log('call me');
        }
      }
      let OPPO = new Phone('oppo', 6666);
      console.log(OPPO);

1.2. static定义静态属性、方法

es5 函数对象与实例对象属性/方法不通，通过prototype链接

      function Phone() {}
      Phone.name = 'hw';
      Phone.call = function () {
        console.log('call me');
      };
      Phone.prototype.size = 10;
      var hw = new Phone();
      console.log(hw.name);
      console.log(hw.size);
      console.log(hw.call());

静态属性、方法

      class Phone {
        static name = 'hw';
        static call() {
          console.log('call me');
        }
      }
      const hw = new Phone();
      console.log(hw.name);
      console.log(Phone.name);

1.3. extends继承父类

es5实现继承

function Phone(brand, price) {
        this.brand = brand;
        this.price = price;
      }
      Phone.prototype.call = function () {
        console.log('call');
      };
      function SmartPhone(brand, price, size, color) {
        Phone.call(this, brand, price);
        this.size = size;
        this.color = color;
      }
      SmartPhone.prototype = new Phone();
      SmartPhone.prototype.constructor = SmartPhone;
      SmartPhone.prototype.photo = function () {
        console.log('photo');
      };
      SmartPhone.prototype.play = function () {
        console.log('play');
      };
      const oppo = new SmartPhone('oppo', 5999, 5.5, 'white');
      console.log(oppo);

1.4. es6继承 extends super

1.4.1. super调用父级构造方法

      class Phone {
        constructor(brand, price) {
          this.brand = brand;
          this.price = price;
        }
        call() {
          console.log('call');
        }
      }
      class SmartPhone extends Phone {
        constructor(brand, price, size, color) {
          super(brand, price);
          this.size = size;
          this.color = color;
        }
        photo() {
          console.log('photo');
        }
        play() {
          console.log('play');
        }
      }
      const oppo = new SmartPhone('oppo', 9999, 6.5, 'green');
      console.log(oppo);

1.4.2. 父级方法可以重写、子级方法完全重写

  class Phone {
        call() {
          console.log('call');
        }
      }
      class SmartPhone extends Phone {
        call() {
          console.log('call super');
        }
      }
      const oppo = new SmartPhone('oppo', 9999, 6.5, 'green');
      oppo.call(); // call super

1.4.3. 普通成员不能通过super调用父级的同名方法

      class Phone {
        call() {
          console.log('call');
        }
      }
      class SmartPhone extends Phone {
        call() {
          super();
          console.log('call super');
        }
      }
      const oppo = new SmartPhone('oppo', 9999, 6.5, 'green');
      oppo.call();

2. get 、set

get可以应用于获取平均数等需要函数处理的数据
set可以在设置是对数据进行判断等操作

  class Phone {
        get price() {
          console.log('get');
          return 9999;
        }
        set price(val) {
          console.log('set');
        }
      }
      const hw = new Phone();
      console.log(hw.price);
      hw.price = 8888;

3. 数值扩展

Number.EPSILON js最小精度
Number.EPSILON 是js中的最小精度，如果两数相差小于Number.EPSILON，则认为两数相等。
属性值接近于： 2.220446049250313e-16

     console.log(Number.EPSILON); // 2.220446049250313e-16
     const equal = (a, b) => {
        if (Math.abs(a - b) < Number.EPSILON) {
          return true;
        } else {
          return false;
        }
      };
      console.log(0.1 + 0.2 === 0.3); // false
      console.log(equal(0.1 + 0.2, 0.3)); // true

3.1. 二进制、八进制

      let b = 0b1010;
      let o = 0o777;
      let d = 100;
      let x = 0xff;
      console.log(b, o, d, x); // 10 511 100 255

3.2. Number.isFinite 检测数是否为有限数

      console.log(Number.isFinite(100)); // true
      console.log(Number.isFinite(100 / 3)); // false
      console.log(Number.isFinite(Infinity)); // 无穷 false

3.3. Number.isNaN 检测是否为 NaN

es5中isNaN为单独的一个方法
es6中封装到Number中的一个方法

      console.log(Number.isNaN(123)); // false
      console.log(Number.isNaN('gg')); // false
      console.log(Number.isNaN(NaN)); // true

3.4. Number.parseInt 、Number.parseFloat

之前 Number.parseInt 、Number.parseFloat也是单独的方法
会自动截断字符串

    console.log(Number.parseInt('3141592653gg了7777')); // 3141592653
    console.log(Number.parseFloat('3.141592653gg了7777')); // 3.141592653

3.5. Number.isInteger 检测数是否为整数

      console.log(Number.isInteger(8)); // true
      console.log(Number.isInteger(8.9999)); // false

3.6. Math.trunc 抹除小数部分

      console.log(Math.trunc(3.141592653)); // 3

3.7. Math.sign 检测数为正数、零、负数

返回结果为1则为正数，0为零，-1为负数

      console.log(Math.sign(100)); // 1
      console.log(Math.sign(0)); // 0
      console.log(Math.sign(-100)); // -1

3.8. 对象扩展

3.8.1. Object.is() 判断两个值是否完全相等

作用类似 === 全等符号，又有些不同

      console.log(Object.is(120, 120)); // true
      console.log(Object.is(120, 121)); // false
      console.log(Object.is(NaN, NaN)); // true
      console.log(NaN === NaN); // false

3.8.2. Object.assign() 对象合并

存在相同的属性，后面的覆盖前面的，不存在的不会覆盖，执行合并。适用于配置的合并

      const config1 = {
        host: '115.29.193.2',
        prot: '80',
        name: 'root',
        test1: 'test1'
      };
      const config2 = {
        prot: '555',
        pwd: 'root',
        test2: 'test2'
      };
      console.log(Object.assign(config1, config2));

3.8.3. Object.setPrototypeOf()设置原型对象 Object.getPrototypeOf()


      const Phone = {
        name: 'hw'
      };
      const actions = {
        actions: ['call', 'geme', 'photo']
      };
      Object.setPrototypeOf(Phone, actions);
      console.log(Object.getPrototypeOf(Phone));
      console.log(Phone);