详解JavaScript中属性getter和setter

阿立聊代码

已于 2024-09-27 10:25:29 修改

阅读量150

点赞数 3

分类专栏： JavaScript权威指南文章标签：前端 javascript 开发语言

于 2024-09-27 10:23:18 首次发布

本文链接：https://blog.csdn.net/qq_36324341/article/details/142587156

版权

JavaScript权威指南专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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>