js中getter和setter用法实例分析

当我们需要在 JavaScript 中对一个对象的某个属性进行访问控制时,可以使用 getter 和 setter 方法。getter 方法用于获取属性的值,setter 方法用于设置属性的值。本文将详细介绍如何使用 getter 和 setter 方法。

语法

var obj = {
  get 属性名() {
    // 代码块
  },
  set 属性名(value) {
    // 代码块
  }
};

实例分析

以下是两个使用 getter 和 setter 的实例:

实例1: 计算圆的面积

下面的示例演示了如何使用 getter 和 setter 方法计算圆的面积:

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  get area() {
    return Math.PI * this.radius * this.radius;
  }

  set area(value) {
    this.radius = Math.sqrt(value / Math.PI);
  }
}

const circle = new Circle(5);
console.log(circle.area); // 输出 78.53981633974483

circle.area = 50;
console.log(circle.radius); // 输出 4.003565971242787

在上述代码中,我们定义了一个 Circle 类,该类的构造函数接收一个半径参数,使用 radius 属性存储半径值,定义了一个 getter 方法 area,该方法用于计算圆的面积。例如,circle.area 将返回圆的面积。定义了一个 setter 方法 area,该方法使用面积计算半径,并将结果存储在 radius 属性中。

实例2: 验证输入数据

下面的示例演示了如何使用 getter 和 setter 方法验证输入数据是否合法:

class User {
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  set age(value) {
    if (value < 0 || value > 120) {
      console.log("Invalid input");
      return;
    }
    this._age = value;
  }

  get age() {
    return this._age;
  }
}

const user = new User("John", "Doe", 200);
console.log(user.fullName); // 输出 "John Doe"
console.log(user.age); // 输出 "Invalid input"

在上述代码中,我们定义了一个 User 类,该类的构造函数接收 firstName、lastName 和 age 参数,使用这些参数创建并初始化实例属性。定义了一个 getter 方法 fullName,该方法用于返回用户的全名。定义了一个 setter 方法 age,该方法在设置用户年龄时验证输入数据是否合法。如果输入数据无效,将在控制台输出一条错误消息。

结论

使用 getter 和 setter 方法可以帮助我们轻松实现属性的访问控制,例如对属性值进行逻辑校验、计算等操作。此外,getter 和 setter 方法还可以用于模拟实例属性,让我们可以直接访问实例属性的同时进行其他操作。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js中getter和setter用法实例分析 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • Vue2 的 diff 算法规则原理详解

    Vue2 的 diff 算法规则原理详解 什么是 diff 算法? 在前端框架中,常常需要比较新旧虚拟 DOM 树来确定需要更新的节点,以此进行更新操作。而这个过程就被称之为 diff(差异)算法。 diff 算法通过比较两棵 DOM 树的差异,把更新的内容应用到真实 DOM 上,最终展示出最新的页面。这个过程其实也是整个前端框架的核心思想,而 Vue2 中…

    Vue 2023年5月27日
    00
  • Vue完整项目构建(进阶篇)

    Vue完整项目构建(进阶篇)攻略 Vue完整项目构建是Vue.js框架的一个重要应用场景,本篇攻略将介绍如何构建一个完整的Vue项目。 步骤一:项目初始化 使用npm命令来初始化一个Vue项目,具体命令如下: npm init vue-project 该命令将会生成一个Vue项目的初始化结构。接下来需要安装Vue的核心依赖包和其他的工具包。可以通过以下命令来…

    Vue 2023年5月28日
    00
  • Vue中的 watch监听属性详情

    Vue中的watch是用来监听数据变化,并根据变化执行某些操作的一个高级选项。它包含一个监听对象和一个处理函数,当监听对象发生变化时,处理函数就会被执行。在Vue中watch有多种不同的使用方式,下面将介绍Vue中的watch监听属性的详细攻略。 1.什么是watch 在Vue中,我们通常使用computed属性来根据数据的变化,生成新的派生数据,并更新视图…

    Vue 2023年5月27日
    00
  • Vue 2阅读理解之initRender与callHook组件详解

    Vue 2阅读理解之initRender与callHook组件详解 1. 什么是initRender initRender是Vue在组件挂载前执行的一个钩子函数,用于初始化组件的渲染。在这个过程中,Vue会根据组件的各种属性和配置来建立组件的虚拟DOM,并通过组件的template编译生成可执行的渲染函数(render function)。 具体来说,ini…

    Vue 2023年5月28日
    00
  • Vue.js中的组件系统

    Vue.js是一个流行的JavaScript框架,其中一个主要的功能是组件系统。组件允许开发人员将页面分解为多个可重用的部分,从而使开发更高效和组件复用更简单。 下面将详细讲解Vue.js的组件系统,并提供两个示例来帮助您理解。 什么是Vue.js中的组件? 在Vue.js中,组件是构建Web页面的可重用元素。在页面中,每个组件都具有自己的HTML模板、Ja…

    Vue 2023年5月27日
    00
  • vue中如何去掉空格的方法实现

    首先需要明确一下,“vue中如何去掉空格的方法实现”这个问题具体指什么样的空格。如果是指字符串中的空格,那么可以采用 JavaScript 内置的字符串方法 replace() 来实现去除,示例如下: // 去除字符串中所有空格 let str = ‘ hello world ‘ str = str.replace(/\s/g, ”) console.lo…

    Vue 2023年5月27日
    00
  • vue项目input标签checkbox,change和click绑定事件的区别说明

    我来为你详细讲解“vue项目input标签checkbox,change和click绑定事件的区别说明”的攻略。 标题:vue项目input标签checkbox,change和click绑定事件的区别说明 1. click和change事件的区别 在下面的示例中,我们将展示click和change事件在checkbox上的区别: <template&g…

    Vue 2023年5月27日
    00
  • websocket在springboot+vue中的使用教程

    下面是关于使用WebSocket在Spring Boot和Vue中的完整攻略。 WebSocket 在 Spring Boot 和 Vue 中的使用教程 什么是 WebSocket? WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单、更便捷,且可以实现低…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部