JavaScript中get和set方法的使用详解与示例

get和set方法的基本概念

本文通过具体实例深入分析JavaScript中get和set方法的实际应用，旨在为读者提供清晰的参考与学习素材。

首先明确get和set均为方法，正因为它们是方法，所以在代码中可以执行特定的逻辑判断。

get方法主要用于获取属性值，通常需要在函数内部返回该值；而set 方法用于设置属性值，无需返回值。

在调用对象内部属性时，通常约定使用_age这种带有下划线的命名方式作为私有属性的标识。

get和set方法代码示例

接下来通过几个具体代码示例来直观说明上述概念。

var person ={ _name : "chen", age:21, set name(name) {this._name = name;},get name() {return this._name;}}
console.log(person.name)

运行结果如下：

chen

person.name="lunc";

再次运行结果：

lunc

person.name

继续测试输出：

lunc

示例2展示了更复杂的逻辑处理：

var p = {
  name:"chen",
  work:function() {
    console.log("wording...");
  },
  _age:18,
  get age(){
    return this._age;
  },
  set age(val) {
    if (val<0 || val> 100) {//如果年龄大于100就抛出错误
      throw new Error("invalid value")
    }else{
      this._age = val;
    }
  }
};
console.log(p.name);//输出chen

在浏览器环境中调用的实际结果如下：

p.age

控制台输出：

18

p.age=23

修改属性后的输出：

23

p.age=200

当设置非法值时的输出：

Uncaught Error:invalid value

感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试一下运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript常用函数技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。