zoukankan      html  css  js  c++  java
  • 关于JavaScript中Get/Set访问器

    有时候大家可能会纳闷,在使用JavaScript的时候,只需要给一个系统变量赋值就可以触发一系列操作去相应。

    但是我们在写Js的时候,修改了一个自定义变量,却连个P都没有。是不是很郁闷呢?

    其实,我们现在就可以做类似系统变量那样的功能了!


    做个假设,我们有一个变量,要求可以输入出生年份并自动计算当前年龄。

    如:

    // 定义一个年龄变量并赋予初始值
    var age = 18;
    // 我们手动输入的出生年份
    age = 1994;
    // 此时age=?

    大家可能说我最后的这个疑问有毛病,骂我是SB。。。没关系。。。刚才我们提过需求了嘛……

    按需求来说,age这个时候应该是等于20。

    很明显要做这个操作我们要调用一个函数来进行处理,但是能不能不手动调用函数来完成这个功能呢?

    下面我们来介绍一下此章主角 Get/Set访问器!


    说明了,就是我们可以限制一个变量是否可以被访问或是否可以被重写。

    另外还有一个功能是,我们在访问或重写时可以执行其他语句进行处理。


    使用方法一:

    var age = 18;
    var test = {
        get age (){
            return age;
        },
        set age (value){
            if(value > 100) age= new Date().getFullYear() - value;
            else age = value;
        }
    };
    这个时候我们再写如下代码来进行操作。
    test.age = 1994;
    alert(test.age);
    如何?是不是正确的显示了20这个数字?

    可是以上方法比较麻烦也不好理解。我们来看看第二种方法是否更有实用性:

    function Person() {
        var age = new Date().getFullYear() - 18;
        Object.defineProperty(this, "age", {
            get: function () { alert("内部存储数据为:" + age); return new Date().getFullYear() - age; },
            set: function (value) { age = value; }
        });
    }
    使用以下代码测试:
    var p = new Person();
    p.age = 1994;
    alert("外部获取到的数据为:" + p.age);


    具体使用哪种方法按照需求进行选择。


    拓展知识:

    问:为什么以前没听过Get/Set访问器?

    答:因为这是ECMAScript 5新增特性,比较新,所以以前自然是没有了。


    问:我可以在什么样的浏览器中运行?

    答:具体的我没测试过,但是就我本机环境来说这些版本的浏览器可以运行(Chrome 32、IE 9、FireFox 28、Opera 19、Safari 5.1.7)。


    如有其它问题请评论讨论~谢谢!~撒花~~~

  • 相关阅读:
    什么叫委托
    什么是继承
    什么叫多态
    委托的了解
    什么是数组
    工作记录之 oracle去重的三个方法
    实例分析J2ME网络编程的两种方法
    在无线J2ME设备上实现超文本传输协议
    java与C、C++进行通信的一些问题
    如何配置Wiindows live writer
  • 原文地址:https://www.cnblogs.com/qiyebao/p/4028129.html
Copyright © 2011-2022 走看看