Exercise/3-1.Object.defineProperty.html at master · keiing/Exercise · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="text" id="inpus">
    <span id='spans'></span>
    <script>
        "use strict"
        var $id = (elem) => { return document.getElementById(elem) }
        var inputs = $id('inpus');
        var spans = $id('spans');
        let Value = {}
        Object.defineProperty(Value, 'key', {
            get: () => {
                console.log('你是不是来获取值了')
                return this.key //读取值触发 this.value存放地 可写为Value.value
            },
            set: (value) => {
                console.log('你是不是来修改值了', value)
                this.key = value; //修改值触发  this.value存放地 可写为Value.value
                //每次修改页面is为spans的标签也会修改
                spans.innerHTML = this.key;
            }
        })
        inputs.addEventListener('input', function (e) {
            //e.data当前输入的值
            //this.value,e.target.value 获取值
            Value.key = e.target.value;
        })
        /*
        功能:
         方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。如果不指定configurable, writable, enumerable ，则这些属性默认值为false，如果不指定value, get, set，则这些属性默认值为undefined

        语法: Object.defineProperty(obj, prop, descriptor)
         obj: 需要被操作的目标对象
         prop: 目标对象需要定义或修改的属性的名称
         descriptor: 将被定义或修改的属性的描述符
        */
    </script>
</body>

</html>