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.0的计算属性computed和watch的区别及各自使用场景解读

    Vue2.0的计算属性computed和watch的区别及各自使用场景解读 Vue2.0中,Vue实例提供了两种方法:computed和watch来追踪和响应状态变化。 计算属性computed 定义:computed是一个计算属性,其返回值依赖于其他的状态数据。computed属性默认只有getter方法,因此不可以修改。 示例 <template&…

    Vue 2023年5月29日
    00
  • vue引用public目录下文件的方式详解

    当我们使用Vue构建项目时,有时候我们需要引用public目录下的静态资源文件,例如图片、音频、视频等等。这时候就需要了解vue引用public目录下文件的方式。 在Vue中,通过使用相对路径方式引用public目录下的文件,如下: <img src="./public/logo.png"/> 上面的代码中,通过相对路径的方式…

    Vue 2023年5月28日
    00
  • Vue实例的对象参数options的几个常用选项详解

    下面是“Vue实例的对象参数options的几个常用选项详解”的完整攻略。 一、选项名称与作用 在Vue实例中,options参数是用来配置和初始化Vue实例的重要参数。options常用的选项如下: el data methods computed watch 下面分别来详细讲解每个选项的作用。 二、选项详解 1. el 作用:指定Vue实例挂载的元素,可…

    Vue 2023年5月28日
    00
  • vue视频播放插件vue-video-player的具体使用方法

    下面是关于vue-video-player的详细使用攻略。 1. 安装vue-video-player 首先需要在你的Vue项目中安装vue-video-player,可以运行下面的命令: npm install vue-video-player –save 或者通过yarn来安装: yarn add vue-video-player 2. 引入vue-v…

    Vue 2023年5月28日
    00
  • Vue cli及Vue router实例详解

    Vue cli及Vue router实例详解 什么是Vue cli? Vue cli是一个构建Vue.js项目的基础工具。通过Vue cli可以创建一个基本的Vue.js项目,它包含了一些常用的插件和配置,可以优化我们的开发体验。Vue cli本身还提供了一些命令行工具来帮助我们快速创建组件、安装插件等操作。 如何安装Vue cli? 在开始使用Vue cl…

    Vue 2023年5月28日
    00
  • vue3获取ref实例结合ts的InstanceType问题

    获取ref实例是Vue3中常用的一种方式,可以用来访问组件内部的数据和方法。在TypeScript环境下,获取ref实例需要注意InstanceType问题。下面是一份完整的攻略,分为以下几个步骤: 步骤一:创建组件 首先我们需要创建一个Vue3组件,用来演示获取ref实例的过程。这里以一个简单的计数器组件为例: <template> <d…

    Vue 2023年5月27日
    00
  • Vue使用electron生成桌面应用过程详解

    Vue使用electron生成桌面应用过程详解 1. 概述 Vue.js是一个流行的JavaScript框架,用于构建Web应用程序。而Electron是一个使用JavaScript、HTML和CSS构建跨平台桌面应用程序的工具包。将Vue.js与Electron结合使用,可以快速而简单地构建更为强大的桌面应用程序。 本文将介绍如何使用Vue.js和Elec…

    Vue 2023年5月27日
    00
  • Vue自定义指令的使用详细介绍

    下面是关于 Vue 自定义指令的使用详细介绍及示例,希望对你有所帮助。 什么是 Vue 自定义指令 Vue 自定义指令是一个可以重复使用的指令,可以用于操作 DOM 元素。我们可以使用 Vue 中内置的一些指令,如 v-if、v-show 等等。自定义指令允许我们在 Vue 中增加自定义指令,来满足一些特殊的需求。 Vue 自定义指令的基本生命周期函数 Vu…

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