JavaScript 对象访问器

于 2024-08-26 14:54:26 发布
阅读量130 收藏 2
点赞数 7
分类专栏： js 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78133614/article/details/141564149
版权

JavaScript 访问器（Getter 和 Setter）

Getter 和 Setter 允许您定义对象访问器（被计算的属性）。

<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        const person = {
            nama: "DianDian",
            age: 20,
            city: "ShenZhen",
            language:"China",
            get lang(){
                return this.language;
            }
        };

        document.getElementById("demo").innerHTML = person.lang;
    </script>

</body>
//China

JavaScript Setter（set 关键词）

本例使用 lang 属性来设置 language 属性的值。

实例

<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        const person = {
            nama: "DianDian",
            age: 20,
            city: "ShenZhen",
            language:"China",
            set lang(value){
                this.language=value;
            }
        };
        person.lang="Dian"
        document.getElementById("demo").innerHTML = person.language;
    </script>

</body>
//Dian

JavaScript 函数还是 Getter？

下面两个例子的区别在哪里？

例子 1

<!DOCTYPE html>
<html>

<body>

    <p id="demo"></p>

    <script>
        // 创建对象：
        var person = {
            firstName: "Bill",
            lastName: "Gates",
            fullName: function () {
                return this.firstName + " " + this.lastName;
            }
        };
        // 使用方法显示对象的数据：
        document.getElementById("demo").innerHTML = person.fullName();
    </script>

</body>

</html>
//Bill Gates

例子 2

<!DOCTYPE html>
<html>

<body>

    <p id="demo"></p>

    <script>
        // 创建对象：
        var person = {
            firstName: "Bill",
            lastName: "Gates",
            get fullName() {
                return this.firstName + " " + this.lastName;
            }
        };
        // 使用 getter 显示对象的数据：
        document.getElementById("demo").innerHTML = person.fullName;
    </script>

</body>

</html>
//Bill Gates

例子 1 以函数形式访问 fullName：person.fullName()。

例子 2 以属性形式访问 fullName：person.fullName。

第二个例子提供了更简洁的语法。

数据质量

使用 getter 和 setter 时，JavaScript 可以确保更好的数据质量。

在本例中，使用 lang 属性以大写形式返回 language 属性的值：

实例

<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        const person = {
            nama: "DianDian",
            age: 20,
            city: "ShenZhen",
            language: "China",
            get lang() {
                return this.language.toUpperCase();
            }
        };

        document.getElementById("demo").innerHTML = person.lang;
    </script>

</body>
//CHINA

在本例中，使用 lang 属性将大写值存储在 language 属性中：

实例

<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        var person = {
            nama: "DianDian",
            age: 20,
            city: "ShenZhen",
            language: "",
            set lang(lang) {
                this.language = lang.toUpperCase();
            }
        };
        person.lang = "China"
        document.getElementById("demo").innerHTML = person.language;
    </script>

</body>
//CHINA

一个计数器实例

实例

<!DOCTYPE html>
<html>

<body>

    <h1>JavaScript Getter 和 Setter</h1>

    <p>创建完美的计数器对象：</p>

    <p id="demo"></p>

    <script>
        var obj = {
?? counter : 0,
?? get reset() {
?????? this.counter = 0;
?? },
?? get increment() {
?????? this.counter++;
?? },
?? get decrement() {
?????? this.counter--;
?? },
?? set add(value) {
?????? this.counter += value;
?? },
?? set subtract(value) {
?????? this.counter -= value;
?? }
};
        // 操作计数器：
        obj.reset;
        obj.add = 5;
        obj.subtract = 1;
        obj.increment;
        obj.decrement;
        // 显示计数器：
        document.getElementById("demo").innerHTML = obj.counter;
    </script>

</body>

</html>

Object.defineProperty() 方法也可用于添加 Getter 和 Setter：

实例

<!DOCTYPE html>
<html>

<body>

    <h1>JavaScript Getter 和 Setter</h1>

    <p>创建完美的计数器：</p>

    <p id="demo"></p>

    <script>
        // 定义对象
        var obj = { counter: 0 };

        // 定义 Setter 和 Getter
        Object.defineProperty(obj, "reset", {
???? get : function () { this.counter = 0; }
});
        Object.defineProperty(obj, "increment", {
???? get : function () { this.counter++; }
});
        Object.defineProperty(obj, "decrement", {
???? get : function () { this.counter--; }
});
        Object.defineProperty(obj, "add", {
???? set : function (value) { this.counter += value; }
});
        Object.defineProperty(obj, "subtract", {
???? set : function (value) { this.counter -= value; }
});

        // 操作计数器：
        obj.reset;
        obj.add = 5;
        obj.subtract = 1;
        obj.increment;
        obj.decrement;
        document.getElementById("demo").innerHTML = obj.counter;
    </script>

</body>

</html>
软件技术NINI
关注
  • 7
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【精讲】Javascript对象属性（数据属性、访问器属性）
weixin_46229315的博客
03-26 2212
使用访问器属性 var person=｛ name:'xiaoming', ｝ Object.defineProperty(person,"sayName",{ get:function(){ return this.name; } }); perosn.sayName();
JavaScript 函数 ，对象
qq_53587164的博客
03-24 1870
复习函数 函数定义function函数名(){函数体函数调用:函数名()*参数:形参和实参*形参:函数定义的时候函数名字后面的小括号里的变量就是参数，是不需要写var*实参:函数调用的时候小括号里传入的变量或者是值，都是丈参*返回值:函数中如果有return,那么这个函数就有返回值*如果函数中没有return,那么这个函数没有返回值*如果函数中有return,但是后面什么内容都没有，这个函数没有明确返回值*如果-个函数没有明确的返回值，函数调用了，并且接收了,那么此时接收的结果undefined*如果直.
在 JavaScript 中访问对象属性的 3 种方法
南北极之间
07-04 4430
您可以通过 3 种方式访问 JavaScript 中对象的属性：让我们看看访问属性的每种语法是如何工作的。并了解何时合理，根据情况，使用这种或那种方式。访问对象属性的常用方法是点属性访问器语法： 应计算为对象，并且是要访问的属性的名称。例如，让我们访问对象的属性： 是一个点属性访问器，用于读取对象 的属性。可以使用链中的点属性访问器来访问更深层次的属性：。当属性名称是有效的标识符时，点属性访问器可以正常工作。JavaScript 中的标识符包含 Unicode
【JavaScript】对象的访问器语法 基础
00后的一位普通处女座前端程序员
04-28 954
【JavaScript】对象的访问器语法 基础；属性访问器；提供的访问方式访问属性访等等等保姆级教学；实践demo完全的注释
JavaScript 面向对象详解
qq_36081714的博客
08-09 4705
JavaScript面向对象
JavaScript 对象初探--创建对象
热门推荐
Mr_Bobcp的博客
01-22 1万+
目录JavaScript对象概念JavaScript类型一、js中的对象二、自定义对象属性和方法创建对象方式一、对象字面量二、内置构造函数三、工厂模式四、自定义构造函数的方法五、原型模式六、组合使用构造函数模式和原型模式七、动态原型模式八、寄生模式九、稳妥构造函数模式 JavaScript对象概念 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。 在 JavaScript 中，对象是拥有属性和方法的数据。 JavaScript类型 一、js中的对象 内置对象：JS提供的 宿主对象
JavaScript 销毁对象
m0_63639281的博客
09-27 2473
JavaScript 销毁对象
JavaScript对象类型Object
qq_40837310的博客
01-12 5199
前言 系统学习JavaScript，由于有3年的java后端开发经验，并且有2年的JavaScript+Jquery开发经验，所以像编程语言的一些通用知识就直接跳过了，重点关注JavaScript的语言特性和常用库。 JavaScript对象类型 Object 对象属于一个复合的数据类型，在对象中可以封装多个不同类型的属性，比如 Number、string，函数，Object、数组等等。 在JavaScript中，String、Number、Boolean、Null、Undefined属于基本数据类型，Ob
JavaScript基础——自定义对象
小小张自由—>张有博
12-04 2685
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数... 此外，JavaScript 允许自定义对象。 根据JS的对象扩展机制，用户可以自定义JS对象，这与Java语言有类似的地方。与自定义对象相对应的是JS标准对象，例如Date、Array、Math等等
如何修改JavaScript对象的属性的访问权限
IT_10的博客
08-21 1669
JavaScript对象有两种属性：数据属性和访问器属性 1.数据属性 数据属性包含一个数据值的位置，在这个位置可以读取和写入值。即数据属性限制使用者对对象属性数据值的读取和写入权限，有四种特性 （1）[[Configurable]]：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。像前面例子中那样直接在对象上定义的属性，它们的这个特...
JavaScript对象访问器Getter及Setter原理解析
01-18
在ES5中引入了set和get关键字，允许访问和设置对象的属性。 set关键字： 　set关键字接收一个参数，用于修改对象的属性值；个人觉得类似于在对象内部的每一个方法前都隐藏一个set。 　get关键字是用来在对象外部...
Javascript访问器属性实例分析
10-24
首先，需要了解的是在JavaScript对象中，除了数据属性之外，还有访问器属性。数据属性存储一个数据值，可以读取和写入；而访问器属性则不包含数据值，它包含一对getter和setter函数，当我们尝试读取访问器属性时，...
key-path:JavaScript 对象的深层属性访问器
06-08
JavaScript 对象的深层属性访问器。 最初取自 安装 $ npm install --save key-path 用法 var KeyPath = require ( 'key-path' ) ; var kp = KeyPath . get ( [ 'identifier' , 1 , 'string with space' ] ) ; // ...
浅谈JavaScript 数据属性和访问器属性
10-21
总结，JavaScript的对象模型提供了丰富的属性定义方式，数据属性和访问器属性分别适用于不同的场景。数据属性用于存储数据，访问器属性用于控制数据的访问。理解这些概念有助于编写更灵活和可控的JavaScript代码。
JavaScript实现DOM对象选择器
10-21
本文详细介绍了如何使用JavaScript实现对DOM对象的选择器功能。DOM（文档对象模型）是处理HTML和XML文档的编程接口，它为文档提供了一个逻辑树结构，树中每个节点都是文档的一个部分。JavaScript通过DOM接口可以访问...
vue ref和reactive区别
最新发布
灰海
08-25 337
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue开发引入第三方插件的方式及其区别
你们瞎搞
08-22 373
npm。
2024前端面试题-js篇
FormAda的博客
08-22 872
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 372
【代码】【js】各类前端输入校验方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值