美文网首页
js对象的get 和 set

js对象的get 和 set

作者: dotdiw | 来源:发表于2019-05-06 23:02 被阅读0次

    get propertyName(){} 用来得到当前属性值得回调函数

    set propertyName(){} 用来监视当前属性值变化的回调函数

    存诸器属性和数据属性:

    var num= {
        a: 2,
        get b(){
            return 2;
        }   
    };
    console.log(num.a);//2
    console.log(num.b);//2
    

    上面的代码中,属性a称为“数据属性”,它只有一个简单的值;像属性b这种用getter和setter方法定义的属性称为“存取器属性”。
    存取器属性定义为一个或两个与属性同名的函数,这个函数定义没有使用function关键字,而是使用get或set,也没有使用冒号将属性名和函数体分开,但函数体的结束和下一个方法之间有逗号隔开。
    当程序查询存取器的属性值时,JavaScript代用getter方法(无参数),这个方法的返回值就是该属性存取表达式的值。当程序设置一个存取器属性值时,JavaScript调用setter方法,将赋值表达式右侧的值当作参数传入setter。从某种意义上来说,这个方法负责设置属性值,可以忽略该方法的返回值。
    当一个属性被定义为存取器属性时,JavaScript会忽略它的value和writable特性,取而代之的是set和get(还有configurable和enumerable)特性。
    对象本身的两个方法

    1. es5

    • 原型属性写法
    function Num(n){
        this._num = n;
    }
    Num.prototype = {
        get num() {
            console.log('get');
            return this._num;
        },
        set num(n) {
            console.log(n,"set")
            this._num = n;
        }
    }
    let nu = new Num(3);
    console.log(nu.num,"============")//get
    nu.num = 34 //34 set
    console.log(nu.num,"------------") //get
    
    • 对象属性写法
    function Num(n){
        let me = this;
        me._num = n;
        return {
            get num(){
                console.log("get")
                return me._num;
            },
            set num(n) {
                console.log("set",n);
                me._num = n;
            }
        }
    }
    let nu = new Num(3);
    console.log(nu.num,"============")//get
    nu.num = 34 //34 set
    console.log(nu.num,"------------") //get
    

    2. es6写法

    class Num {
        constructor(n) {
              this._num = n;
        }
        get num() {
            console.log("get")
            return this._num;
        }
        set num(n) {
            console.log("set",n)
            this._num = n;
        }
      }
      
    let nu = new Num(3);
    nu.num = 6 //set 6
    // console.log(nu.num,"============") //get 6 =============
    nu.num = 34 //set 34
    console.log(nu.num,"------------")  //get 34 =============
    

    相关文章

      网友评论

          本文标题:js对象的get 和 set

          本文链接:https://www.haomeiwen.com/subject/qezroqtx.html