zoukankan      html  css  js  c++  java
  • JavaScript的setter与getter方法

    作者:http://hawkzz.com

    以前在写项目过程一直都没有使用过Javascript的setter与getter方法,所以对其是一种要懂不懂的概念;今天看书看到这个知识点,还是模模糊糊的,于是就打算研究研究;

    Javascript对象的属性是由名字,值和一组特性构成的。那么首先,来了解一下对象的两种属性:

    • 数据属性,我们经常使用,应该很熟悉
    • 访问器属性,也称存取器属性

    何为存取器属性?就是一组获取和设置值的函数。在ECMAScript5中,属性值可以用一个或两个方法设置,这两个方法就是getter和setter;因此getter和setter定义的属性被称为存取器属性。

    var o = {
        get val(){
            /*函数体*/
            return ;
        },
        set val(n){
            /*函数体*/
        }
    }
    

    上面的就是一个存取器属性定义的最简单的方法,可以看出getter和setter方法其实就是取代function的一个函数。

    var o = {
        a:3,
        get val(){
            return Math.pow(this.a,2);
        }
    }
    
    console.log(o.val);//9
    o.val = 100;
    console.log(o.val);//9
    

    getter方法是无参数,并且有返回值的;当单独设置getter方法时,只能获取属性值,无法更改其定义的属性值的,保证了数据的安全性;

    var o = {
        a:3,
        set val(n){
            this.a = n;
        }
    }
    
    console.log(o.val);//undefined
    

    setter方法是有参数,没有返回值的;当单独设置setter方式时,是无法读取属性值的;

    var  o ={
        a:3,
        get val(){
            return Math.pow(this.a,n);
        },
        set val(n){
            this.a = Math.max(this.a,n);
        }
    }
    
    console.log(o.a);//3
    console.log(o.val);//9
    o.val = 10;
    console.log(o.a);//10
    console.log(o.val);//100
    

    通过上面的代码可以看出,其中this是指其对象(即代码中的“o”);

    var o ={
         a:3,
        get val(){
            return Math.pow(this.a,n);
        },
        set val(n){
            this.a = Math.max(this.a,n);
        }
    }
    
    o.val = 10;
    var foo = Object.create(o);
    console.log(foo.val);//10
    foo.val = 9;
    console.log(foo.val);//10
    

    另外,存取器属性也是可以被继承的;

  • 相关阅读:
    POJ 2054 Color a Tree
    UVA12113-Overlapping Squares(二进制枚举)
    UVA690-Pipeline Scheduling(dfs+二进制压缩状态)
    UVA818-Cutting Chains(二进制枚举+dfs判环)
    UVA211-The Domino Effect(dfs)
    UVA225-Golygons(dfs)
    UVA208-Firetruck(并查集+dfs)
    UVA1374-Power Calculus(迭代加深搜索)
    UVA1374-Power Calculus(迭代加深搜索)
    UVA1434-The Rotation Game(迭代加深搜索)
  • 原文地址:https://www.cnblogs.com/hawk-zz/p/7911634.html
Copyright © 2011-2022 走看看