• 属性特性get/set


    get/set访问器是属性的特性;

    特性只有内部才用,因此在javaScript中不能直接访问他们;

    (1)数据属性——包含一个数据值的位置。这个位置可以读入和写入值。

    数据属性有描述其行为的四个特性:

    [[Configurable]]:是否可配置

    [[Enumerable]]:是否可枚举

     [[Writable]]:是否可读

    [[Value]]: 属性值

        

    (2)访问器属性属性——不包含数据值,包含一个getter和setter函数(这两个函数不是必须的)

    访问器属性也有描述其行为的四个特性: 

    [[Configurable]]:是否可配置

    [[Enumerable]]:是否可枚举

    [[Get]]:在读取属性时调用的函数,默认是undefined

    [[Set]]:在写入属性时调用的函数,默认是undefined 

    get/set访问器行为特点:

    get/set访问器可以不用定义,不定义也可以读写属性值。也可以只定义一个。只定义get,则被描述的属性只可读,不可写。只定义set,则被描述的属性只可写,不可读。

     

    总结

    只声明了get pro(){}属性 可读不可写;

    只声明 set pro(){}属性可写不可读。

    如果都不声明,属性可读可写;

    如果都声明就按照,get set 定义的方法,读写;

    如果都声明了,但是定义的读写方法不能正确读写,get/set失效。变成默认的可读可写

    在prototype里面定义的value属性,定义了get 特性。依然可以控制value属性的读写 。也就是说obj.value访问属性时,会调用get方法,先在对象本身寻找,如果没有,再到prototype寻找,如果都没有才算没有定义,默认的既可读又可写。

    get是得到,一般是要返回的,set是设置,不用返回;

    如果调用对象内部属性约定的命名方式是 _名称;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>get/set</title>
    </head>
    <body>
    <input id="both" type="text" placeholder="请输入你的出生年,比如1989">
    <button id="btn">计算</button>
    结果:<p id="text"></p>
    </body>
    </html>
    <script>
    var myV = document.getElementById("both");
    var btn = document.getElementById("btn");
    var age = 18;
    var test = {
        get age (){
            return age;
        },
        set age (value){
            if(value > 100) age= new Date().getFullYear() - value;
            else age = value;
        }
    };
    console.log(test.age);//18
    
    btn.onclick = function(){
        test.age = myV.value;
        console.log("age值:"+test.age);
        
        cart.wheels = myV.value;
        console.log("wheels值:"+cart.wheels);
    }
    
    const cart = {
            _wheels:4,
            // get wheels(){
            //     return this._wheels;
            // },
            // set wheels(value){
            //     if(value < this._wheels){
            //         throw new Error('小了');
            //     }
            //     this._wheels = value;
            // }
            get wheels (){
                return this._wheels;
            },
            set wheels (value){
                if(value > 100) this._wheels= new Date().getFullYear() - value;
                else this._wheels = value;
            }
        }
        console.log(cart);//{_wheels: 4}
        console.log(cart.wheels);//4
    
    </script>
  • 相关阅读:
    前端-【学习心得】-事件委托方法
    [方法] iOS时间戳的转换
    [封装] 修改NSString中部分字段的颜色
    Python3基础16——file对象测试数据的读写与操作
    Python3基础15—— 变量作用域
    Python3基础14——函数&内置函数
    Python3基础13——冒泡排序
    Python3基础12——while循环
    Python3基础11——打印三角形
    Python3基础10——切片(str和list)
  • 原文地址:https://www.cnblogs.com/wang715100018066/p/8135909.html
Copyright © 2020-2023  润新知