美文网首页
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

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

  • 对象中的getter/setter和Object.defineP

    对象中的get和set方法 每一个JS对象除了自身的属性,还有setter和getter的内部属性,当读取对象属性...

  • JS基础回顾-对象

    前提:默认已经熟悉js原型链。 1.对象设置get 和set的方法 2.Object.assign(target目...

  • vue封装方法以及常用的方法

    1,新建api.js let api={ set(){ console.log('set') }, get(){ ...

  • 2019-06-21

    JS中ES5和ES6中set和get方法 ES5 情况一:对象已经创建,需要给上面添加setget方法 情况二:当...

  • js对象中的get和set方法的实现

    前言: 对象中有get和set方法,在读取和设定值的时候触发。vue中的数据绑定就是通过这个来实现的。 1. 直接...

  • 画图函数

    get set gca 图形对象gcfget(gcf)获取对象的属性set(gcf,color,red)设置属性的...

  • JavaScript中的getter与setter方法

    概述 get和set为对象创造了一个伪属性的定义 get方法返回一个值,set方法为一个属性赋值 get语法 例子...

  • @property

    @property的作用1.生成get和set方法的声明2.生成set和set方法的简单实现3.如果没有声明对象的...

  • 简析iOS程序中set和get的区别

    在面向对象的语言中,总会有set和get方法的存在。set方法和get方法到底有什么不同是我们在使用中需要注意的事...

网友评论

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

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