详解JavaScript中属性getter和setter

news2024/9/28 6:33:38

6.6 属性getter和setter

属性值可以用1个或者2个方法替代,getter和setter.

由这两个定义的属性称作存取器属性(accessor property),不同于数据属性,只有一个简单的值。有读写属性,只能写,只能读,可以读写。

代码实现:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>6.6 属性getter和setter</title>
        <script>
            var p={
                x:1.0,
                y:1.0,
                get r(){
                    return Math.sqrt(this.x*this.x+this.y*this.y);
                },
                set r(newvalue){
                    var oldvalue=Math.sqrt(this.x*this.x+this.y*this.y);
                    var ratio=newvalue/oldvalue;//比率
                    this.x*=ratio;
                    this.y*=ratio;
                },
                get theta(){
                    return Math.atan2(this.y,this.x);//赛塔,反切
                }
            }
        </script>
    </head>
    <body>
        <h1>6.6 属性getter和setter</h1>
    </body>
</html>

页面效果:

产生严格自增的序列号

代码实现:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>产生严格自增的序列号</title>
        <script>
            //这个对象产生严格自增的序列号
            var serialnum={
                //包含下一个序列号
                //$符号暗示这个属性是一个私有属性
                $n:0,
                get next(){
                    return this.$n++;//返回当前值,然后自增
                },
                set next(n){
                    if (n >= this.$n) {
                        this.$n=n;
                    } else{
                        throw "设置的序列号的值不能比当前值小!"
                    }
                }
            }
        </script>
    </head>
    <body>
        <h1>产生严格自增的序列号</h1>
        <textarea name="" id="" cols="100" rows="18" readonly>
            //这个对象产生严格自增的序列号
            var serialnum={
                //包含下一个序列号
                //$符号暗示这个属性是一个私有属性
                $n:0,
                get next(){
                    return this.$n++;//返回当前值,然后自增
                },
                set next(n){
                    if (n >= this.$n) {
                        this.$n=n;
                    } else{
                        throw "设置的序列号的值不能比当前值小!"
                    }
                }
            }
        </textarea>
    </body>
</html>

页面效果:

产生随机数的对象

代码实现:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>产生随机数的对象</title>
        <script>
            //这个对象有可以返回随机数的存取器属性
            var random={
                get octet(){
                    return Math.floor(Math.random()*256);
                },
                get unit16(){
                    return Math.floor(Math.random()*65535);
                },
                get int16(){
                    return Math.floor(Math.random()*65535)-32768;
                }
            }
        </script>
    </head>
    <body>
        <h1>产生严格自增的序列号</h1>
        <textarea name="" id="" cols="90" rows="13" readonly>
            //这个对象有可以返回随机数的存取器属性
            var random={
                get octet(){
                    return Math.floor(Math.random()*256);
                },
                get unit16(){
                    return Math.floor(Math.random()*65535);
                },
                get int16(){
                    return Math.floor(Math.random()*65535)-32768;
                }
            }
        </textarea>
    </body>
</html>

页面效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2172714.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据结构 算法的时间复杂度 计算(两种规则 加法原则+乘法原则)

在分析时间复杂性时&#xff0c;加法和乘法原则是两个基本且重要的概念&#xff0c;它们分别用于处理算法中顺序执行和嵌套执行的代码段的时间复杂度计算。以下是对这两个原则的详细说明&#xff1a; 一、加法原则 定义&#xff1a; 加法原则适用于顺序执行的代码段。如果一…

从Linux系统的角度看待文件-基础IO

目录 从Linux系统的角度看待文件 系统文件I/O open write read 文件操作的本质 vim中批量注释的方法 从Linux系统的角度看待文件 关于文件的共识&#xff1a; 1.空文件也要占用磁盘空间 2.文件内容属性 3.文件操作包括文件内容/文件属性/文件内容属性 4.文件路径文…

LDO实习报告(免费)-有完整电路版图

LDO实习任务书 实习目的&#xff1a; 了解LDO电路研究现状和原理结构&#xff0c;熟悉模拟电路设计流程。 week1 &#xff1a; 调研LDO应用情况及研究现状。 week2 &#xff1a; 熟悉LDO基本原理及组成。 week3 &#xff1a; 构建LDO电路。 week4 &#xff1a; 对LDO进…

从日志到洞察:轻松实现服务器安全管理的神器

在当今复杂多变的网络环境中&#xff0c;服务器安全管理已成为一项不可或缺的任务。然而&#xff0c;面对海量的日志数据&#xff0c;如何快速精准地提取有价值的信息&#xff0c;并及时发现潜在的安全威胁&#xff1f;本文将为您介绍一款强大的服务器日志检索与查杀工具&#…

pilz皮尔兹PSSuniversal分散控制平台 Dezentrale Steuerungsplattform 手测

pilz皮尔兹PSSuniversal分散控制平台 Dezentrale Steuerungsplattform 手测

WebAPI编程(第三天,第四天)

WebAPI编程&#xff08;第三天&#xff0c;第四天&#xff09; day03 - Web APIs1.1. 节点操作1.1.1 删除节点1.1.2 案例&#xff1a;删除留言1.1.3 复制&#xff08;克隆&#xff09;节点1.1.4 案例&#xff1a;动态生成表格1.1.5 创建元素的三种方式1.1.6 innerTHML和createE…

基于SSM+小程序的自习室选座与门禁管理系统(自习室1)(源码+sql脚本+视频导入教程+文档)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 1、管理员实现了首页、基础数据管理、论坛管理、公告信息管理、用户管理、座位管理等 2、用户实现了在论坛模块通过发帖与评论帖子的方式进行信息讨论&#xff0c;也能对账户进行在线充值…

深圳龙链科技:全球区块链开发先锋,领航Web3生态未来

【深圳龙链科技】是全球领先的Web3区块链技术开发公司&#xff0c;专注于为全球客户提供创新高效的区块链解决方案。 深圳龙链科技由币安资深股东携手香港领先的Web3创新枢纽Cyberport联袂打造&#xff0c;立足于香港这一国际金融中心&#xff0c;放眼全球&#xff0c;汇聚了华…

罕见,回复问询后闪电终止,业绩存下滑风险

《IPO魔女》认为&#xff0c;和美精艺利润低且大幅波动&#xff0c;报告期公司毛利率持续大幅下滑。而2023年同行业的上市公司均出现了业绩大幅下滑的情况&#xff0c;还未上市的和美精艺恐怕也存在业绩下滑的风险。此外&#xff0c;2020年至2022年&#xff0c;和美精艺研发投入…

Excel根据一个值匹配一行数据

根据一个值从一个表中匹配一行数据&#xff0c;例如从左边的表中找到指定姓名的所有行数据 使用VLOOKUP函数&#xff0c;参数&#xff1a; Lookup_value&#xff1a;需要搜索的值&#xff0c;单个值 Table_array&#xff1a;被搜索的区域&#xff0c;是个表 Col_index_num&…

JS数据类型类型转换

基本数据类型 JS中的数据类型由原始值和对象共同组成&#xff0c;原始值一共有七种原始值&#xff1a; 数值(Number)大整数(BigInt)字符串(String)布尔值(Boolean)空值(Null)未定义(Undefined)符号(Symbol) 数值和大整数 数值(Number):在js中所有的整数和浮点数都是number类型 …

【vue-router】用meta.keepAlive做缓存

网上大家都说按下面的写法 <keep-alive><router-view v-if"route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if"!route.meta.keepAlive"></router-view>但是会报错 解决方法也没找到 最后换一…

23、Presidential

难度 中 目标 root权限 2个flag 基于virtualbox启动 题目提示枚举是你的朋友 kali 192.168.86.102 靶机 192.168.86.107 信息收集 端口扫描 tcp开启的端口就两个&#xff0c;稳妥起见扫了一些常见的端口看是否有UDP协议开放的端口。同时nmap在扫描80端口提示可能存在的tra…

OCR识别系统 YOLOv8 +Paddle 方案落地

YOLOv8 PaddleOCR 技术方案落地 Yolov8相关文档Step 1 证件模型的训练Step 2 Yolov8进行图片推理Step 3 PaddleOCR进行识别Step 4 整合Yolov8 PaddleOCR 进行OCR Yolov8相关文档 《yolov8 官方网站》 《Yolov8 保姆级别安装》 Ultralytics YOLOv8 是一款尖端的、最先进的 (S…

NASA数据集:ATLAS/ICESat-2 L3B 南极和北极网格陆地冰高,第 3 版

目录 简介 摘要 代码 引用 网址推荐 0代码在线构建地图应用 机器学习 ATLAS/ICESat-2 L3B Gridded Antarctic and Arctic Land Ice Height V003 简介 ATLAS/ICESat-2 L3B 南极和北极网格陆地冰高&#xff0c;第 3 版 ATL14 和 ATL15 将 ATLAS/ICESat-2 L3B 年度陆地冰…

5 分钟快速入门 Github Action

Github Action 是一种自动化构建工具。 ‍ 介绍 什么是 GitHub Action&#xff1f;来看看阮一峰大佬的介绍&#xff1a; GitHub Actions 是 GitHub 的持续集成服务&#xff0c;于 2018 年 10 月推出。 大家知道&#xff0c;持续集成由很多操作组成&#xff0c;比如抓取代码、…

深度学习(入门)03:监督学习

1、监督学习简介 监督学习&#xff08;Supervised Learning&#xff09;是一种重要的机器学习方法&#xff0c;它的目标是通过“已知输入特征”来预测对应的标签。在监督学习中&#xff0c;每一个“特征-标签”对被称为样本&#xff08;example&#xff09;&#xff0c;这些样…

视觉分析在垃圾检测中的应用

随着城市化进程的加快&#xff0c;垃圾管理成为现代城市面临的重大挑战。有效的垃圾识别和分类不仅能提升环境保护的效率&#xff0c;还能减少资源浪费。基于视觉分析的垃圾识别算法应运而生&#xff0c;为解决这一问题提供了技术支持。 垃圾识别算法的技术实现主要依赖于深度学…

FreeRTOS-队列

FreeRTOS-消息队列 一、队列简介二、队列相关函数2.1 队列结构体2.2 队列相关API函数 三、队列操作实验 一、队列简介 队列是任务到任务、任务到中断、中断到任务数据交流的一种机制(消息传递)使用队列的情况下如图&#xff0c;在写、读队列时&#xff0c;会进入临界区&#x…

前端使用vue点击上传文件,传送给后端,后端进行文件接收

一、效果图 前端页面&#xff1a; 在java这边后端的target文件就可以接收到前端发送的文件&#xff0c;文件可以打开 接下来看具体代码是怎么实现的&#xff01; 二、代码部分 Vue代码 <template> <el-upload ref"upload" class"upload-demo&q…