理解 class 用法和 get set 的使用

理解 class 用法和 get set 的使用

技术杂谈小彩虹2021-08-22 4:27:44160A+A-

说明

  • 了解 es6+ 的 class 的使用
  • 了解其中 set 和 get 的使用情况
  • 适用:es6+ 初学者

class es7 类的使用

一 class extends super

  • class 声明创建一个基于原型继承的具有给定名称的新类。 你也可以使用类表达式定义类。但是不同于类表达式,类声明不允许再次声明已经存在的类,否则将会抛出一个类型错误。

  • 申明一个类,Polygon, 然后 Square 来继承 Polygon,只能在构造函数中使用 super()。并且必须在使用 this 关键字前调用

使用 extends 创建子类/ super 关键字用于调用对象的父对象上的函数

class Cat { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Lion extends Cat {
  speak() {
    super.speak();
    console.log(this.name + ' roars.');
  }
}

static 静态方法

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    static distance(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;

        return Math.hypot(dx, dy);
    }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);

console.log(Point.distance(p1, p2));

二 get 的使用

  • get语法将对象属性绑定到查询该属性时将被调用的函数。
var obj = {
  log: ['a', 'b', 'c'],
  get latest() {
    if (this.log.length == 0) {
      return undefined;
    }
    return this.log[this.log.length - 1];
  }
}

console.log(obj.latest);
// expected output: "c"
console.log(obj)
// {
// latest: "c"
// log: ["a", "b", "c"]
// }
  • 从可以看到 latest 在初始化的时候已经被运行了,latest 作为 obj 的一个属性来计算后展示,找到了 log 数组的最后一个值

  • 使用情况(在每次登陆的时候自动的去检测是否登陆)

class login {
    //token存储的键值
    static TOKEN_KEY = 'geqwrgfboiadsad';
    
    // 在每次使用这个 class security 的时候 会调用 hasLogin() 来判断是否登录 
    get hasLogin() {
        return this.currentUser !== null;
    }
    
    async signup(params) {
        return await http.post(API.signup(), params, {
            noToken: true
        });
        //!!!step1注册只返回邀请码,添加登录后需再localStorage存储用户信息
    }
}

get 的使用情况,get 可以在类初始化的使用直接运行,然后作为类的一个属性来使用

三 set 的使用

  • 当尝试设置属性时,set语法将对象属性绑定到要调用的函数。
var language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
}

language.current = 'EN';
language.current = 'FA';

console.log(language.log);
// expected output: Array ["EN", "FA"]
  • set可以自动的更改自身属性

delete 操作符

delete obj.lastest
// 这样可以删除 getter

defineProperty 在现有对象定义 getter 和 setter

var o = { a:0 }

Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });

console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)

// get
// ------------
// set

var o = { a:0 };

Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } });

o.b = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
console.log(o.a) // 5

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们