对象.属性与对象[属性]的区别

两种取属性值的区别

在获取对象属性值的时候，通常有两种方法，一种为对象.属性 一种为对象[属性]。
其中对象.属性可以静态的获取对象中的属性值，获取格式直接通过对象.属性即可。大家都知道对象中的属性名为字符串类型，但是在静态获取时切忌不可写成对象.‘属性’，这种写法会报错 如下所示

对象[属性]相比于对象.属性可以静态获取对象属性值，同时也可以动态获取属性值。当需要静态获取属性值时，获取格式为对象[‘属性’]，当需要动态获取属性值时，获取格式为对象[属性]，需要注意的是，当动态获取属性值时，需要先提前定义动态属性。

可以看到，当使用对象[属性]的时候，此时属性是被看作一个变量，而不是一个静态的属性值，当给属性添加’'时，会使其变成一个静态属性。如果在动态获取对象属性时，没有提前定义好，那么就会报错，如下所示。

小示例

接下来做一个小题目如下所示

    var  a={}
    var b={
        key:'b'
    }
    var c={
        key:'c'
    }

    a[b]='1'
    a[c]='2'
    console.log(a[b])
    console.log(a[c])
    console.log(a['b'])
    console.log(a['c'])
    console.log(a.b)
    console.log(a.c)
    a['b']='3'
    a['c']='4'
    console.log(a[b])
    console.log(a[c])
    console.log(a['b'])
    console.log(a['c'])
    console.log(a.b)
    console.log(a.c)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

这段代码的输出结果会是什么呢？
这段代码的输出结果如下所示

简单分析一下。由于对a[b]与a[c]赋值的时候，没有添加’'所以此时b与c代表的是一个已经定义好的变量，通过上述代码可以发现b与c均是一个对象。我们知道对象中的属性值是字符串，那么当对a[b]与a[c]赋值，就相当于对同一个字符串属性赋值。为了更好的说明问题请看下图

此时对象a中只有一个属性

因此当对a[b]与a[c]赋值的时候，后者会覆盖前者，因此2会覆盖1。在进行取值的时候，由于采用的时a[b]的方法，因此无论是a[b]，a[c]，a[d]那个取值，得到的结果都是一样的（前提是b,c,d都得提前定义为对象）

后面的就顺理成章了，a[‘b’]取得是a对象属性名为b的属性值，由于没有定义所以输出undefine,同理a[‘c’],a.b,a.c。
这就是对象.属性与对象[属性]在用法上的区别，总结来说对象[属性]的方法更为灵活，既可以动态也可以静态。