ES6语法特性(四)class类 数值扩展方法对象扩展方法

本文介绍了ES6中的Class类,包括类的声明、静态属性和方法、继承以及get、set方法。同时,讲解了数值扩展,如Number.EPSILON、二进制和八进制表示、Number对象的检测方法,以及对象扩展中的Object.is()、Object.assign()和原型对象操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ES6

Class类

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

ES5 构造函数实例化对象

      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);

在这里插入图片描述

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);

在这里插入图片描述

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);

在这里插入图片描述

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);

在这里插入图片描述
es6继承 extends super
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);

在这里插入图片描述

父级方法可以重写

子级方法完全重写

      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

普通成员不能通过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();

在这里插入图片描述

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;

在这里插入图片描述

数值扩展

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

在这里插入图片描述

二进制、八进制
      let b = 0b1010;
      let o = 0o777;
      let d = 100;
      let x = 0xff;
      console.log(b, o, d, x); // 10 511 100 255
Number.isFinite 检测数是否为有限数
      console.log(Number.isFinite(100)); // true
      console.log(Number.isFinite(100 / 3)); // false
      console.log(Number.isFinite(Infinity)); // 无穷 false
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
Number.parseInt 、Number.parseFloat

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

      console.log(Number.parseInt('3141592653gg了7777')); // 3141592653
      console.log(Number.parseFloat('3.141592653gg了7777')); // 3.141592653
Number.isInteger 检测数是否为整数
      console.log(Number.isInteger(8)); // true
      console.log(Number.isInteger(8.9999)); // false
Math.trunc 抹除小数部分
      console.log(Math.trunc(3.141592653)); // 3
Math.sign 检测数为正数、零、负数

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

      console.log(Math.sign(100)); // 1
      console.log(Math.sign(0)); // 0
      console.log(Math.sign(-100)); // -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
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));

在这里插入图片描述

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);

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值