js中set和get方法

get和set的使用方法:

1. get和set是方法,因为是方法,所以可以进行判断

2. get一般是要返回的;而set是设置,不用返回

3. 如果调用对象内部的属性约定的命名方式是变量名前加_

var p={
    _age:18,
    get age(){
        return this._age;
    },
    set age(val){
        this._age=val;
    }
}
p.age;    // 18
p.age=20;    // 20
p.age;    // 20

即get是对象的属性值返回的方法,set是属性值修改的方法

<think>我们被要求解释JavaScript中setget的用途及使用方法,并参考了提供的引用内容。 引用[1]提到:getset关键字用于控制对象属性的读取设置行为,实现更灵活安全的数据管理。 引用[3]给出了一个简单的例子,并说明了setget的特征:set方法有且仅有一个参数,不用return;get方法不能有参数,必须用return。 引用[4]展示了在Vue3.0中使用计算属性(computed)的getset实现双向绑定。 引用[5]则给出了一个对象中使用setget来在设置年龄时自动更新出生年份的例子。 因此,我们可以这样组织回答: 1. 引入:说明setget的作用(控制属性访问,实现封装验证等) 2. 基本语法:如何定义gettersetter(在对象字面量中,使用getset关键字) 3. 特征:根据引用[3]总结特征(set一个参数,无返回;get无参数,必须返回) 4. 使用场景:数据验证、计算属性、双向绑定(如引用[4])、数据联动(如引用[5]中年龄出生年份) 5. 示例:给出几个例子,包括基本使用、验证、计算属性等。 注意:用户要求尽可能参考上一次的问题回答,但这是用户第一次提问关于JavaScript的setget,所以直接回答即可。 另外,根据系统指令,我们需要在行内数学表达式使用$...$,独立公式使用$$...$$,但本问题不涉及数学公式,所以可以忽略。但要注意代码块的使用。 我们将按照以下结构回答: 一、作用 二、基本语法 三、特征 四、使用示例 1. 基础示例 2. 数据验证 3. 计算属性(联动更新) 4. Vue3中的计算属性(可选,因为引用[4]提到,但用户问题没有限定Vue,所以简单提一下) 五、注意事项 最后生成相关问题。 注意引用标识:在回答中引用到的地方添加引用标识,如[^3]等。 开始回答:</think>在 JavaScript 中,`set` `get` 是用于**控制对象属性访问**的特殊方法,它们通过拦截属性读写操作实现数据封装、验证计算逻辑。以下是详细解析: --- ### 一、核心作用 1. **数据封装** 将属性设为私有(通常用 `_` 前缀表示),禁止外部直接访问,强制通过 `get/set` 方法操作[^3]。 2. **访问控制** - `set`:在赋值时执行验证或联动更新 - `get`:动态计算返回值 3. **数据联动** 修改一个属性时自动更新相关属性(如年龄 → 出生年份)[^5]。 --- ### 二、基础语法 ```javascript const obj = { _value: 0, // 私有属性(约定用 _ 前缀) // setter:接收一个参数 set value(newVal) { if (newVal >= 0) { // 数据验证 this._value = newVal; } }, // getter:无参数,必须返回 get value() { return this._value * 2; // 返回计算值 } }; obj.value = 10; // 触发 setter console.log(obj.value); // 20(触发 getter) ``` > **特征总结**(根据引用[^3]): > - `set`:有且仅有一个参数,无返回值 > - `get`:无参数,必须用 `return` 返回值 --- ### 三、使用场景与示例 #### 1. 数据验证(拦截非法值) ```javascript const user = { _age: 0, set age(val) { if (val < 0) throw Error("年龄不能为负数"); this._age = val; }, get age() { return this._age; } }; user.age = 25; // 有效 user.age = -5; // 报错:年龄不能为负数 ``` #### 2. 属性联动(自动更新关联值) ```javascript const person = { _age: 0, birthYear: null, set age(value) { this._age = value; this.birthYear = new Date().getFullYear() - value; // 自动计算出生年份 }, get age() { return this._age; } }; person.age = 30; console.log(person.birthYear); // 输出当前年份-30 ``` > 当设置 `age` 时,`birthYear` 自动更新[^5]。 #### 3. 计算属性(动态返回值) ```javascript const rectangle = { _width: 10, _height: 5, set width(val) { this._width = val }, set height(val) { this._height = val }, get area() { return this._width * this._height; // 实时计算面积 } }; rectangle.width = 20; console.log(rectangle.area); // 100 ``` #### 4. Vue 双向绑定(参考引用[^4]) 在 Vue 计算属性中使用: ```javascript import { ref, computed } from 'vue'; setup() { const age = ref(18); const newAge = computed({ get() { return age.value + 2 }, // 读取时 +2 set(val) { age.value = val - 2 } // 写入时反向操作 }); return { age, newAge }; } ``` > 模板中 `v-model="newAge"` 将自动触发 `set` `get`。 --- ### 四、注意事项 1. **命名冲突**:避免 `get/set` 方法与普通属性同名 2. **无限递归**:在 `set` 中勿直接写同名属性(用 `_` 私有变量) ```javascript // 错误示例(会死循环) set value(val) { this.value = val; // 递归调用 set ! } ``` 3. **兼容性**:ES5+ 支持,IE9+ 可用 --- ### 五、与 `Set` 数据结构的区别 注意区分**对象方法** `set/get` **`Set` 数据结构**(引用[^2]): ```javascript // Set 数据结构(用于存储唯一值) const mySet = new Set(); mySet.add(1); // 添加值 mySet.has(1); // 检查存在性 ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值