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

JavaScript05

js对象中的get和set方法的实现,第1张

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

作用:

(1). 在对象内属性嵌套层级过多时,可以直接在对象下读取到对应属性,简化调用;

(2). 在get时可以任意设置属性名,可以不暴露组件内部属性名。

作用:

(1). 在对象内属性嵌套层级过多时,可以直接在对象下设置到对应属性,简化层级;

(2). set方法内的逻辑在赋值时会自动执行,可以监听属性值的改变

作用:

set方法可以监听对应属性值的改变,vue的数据动态绑定就是通过这个方法实现的,监听到vue实例中的data属性发生改变时,在set方法中触发模版重新渲染逻辑。

作用:

和方法1直接在对象中设置效果和原理相似

  var student = new Object()

        student.name = "张三"

        student.age = 18

        student.sex = 'man'

        

        document.write(student.name +"</br>")

        document.write(student.age + "</br>")

        document.write(student.sex)

没有说为什么没有,而是 Array 这一种 JavaScript 标准内置对象没有 get 和 set 方法。MDN JavaScript 标准内置对象 Array

你截图的 get set 方法也不是属于数组的,而是数组元素中的对象的。对于数组来说,添加 get set 方法没什么意义,因为对于数组元素的确定,是用下标的。如:

const a = []

a[1] = 3

console.log(a[1])

要添加 get set 也很容易:

a = {

_value: 1,

get value() {

return this._value

},

set value(value) {

this._value = value

}

}

这样 a 对象就有 get set 了。注意 get set 方法对应的方法名,和你用这个方法名要存储的字段不能用相同,不然会内存溢出。(不要问我为什么特意提出来。)