JavaScript对象属性

JavaScript对象属性教程

在 JavaScript 中，如果一个变量属于一个对象所有，那么该变量就可以称之为该对象的一个属性，属性一般是名词，用来描述事物的特征。

JavaScript访问对象属性

在 JavaScript 中，我们要访问对象的属性，可以使用点运算符（.）或者中括号运算符（[]），在点运算符之后书写的属性名会被认为是标识符，而中括号运算符内的则被转为字符串值的式子。

JavaScript访问对象属性详解

使用点访问对象属性

语法

function createPerson(attr1, attr2, attr3, ...){
    var person = new Object();
    person.attr1 = attr1;
    person.attr2 = attr2;
    person.attr3 = attr3;
    ...
    person.func = function(){
        //todo
    }
    return person;
}
var person = createPerson("HaiCoder", 109, "F");
//person.attr1;

说明

我们可以直接使用点的方式来访问对象的属性。

使用 [] 访问对象属性

语法

function createPerson(attr1, attr2, attr3, ...){
    var person = new Object();
    person.attr1 = attr1;
    person.attr2 = attr2;
    person.attr3 = attr3;
    ...
    person.func = function(){
        //todo
    }
    return person;
}
var person = createPerson("HaiCoder", 109, "F");
//person["attr1"];

说明

我们也可以直接使用 [] 的方式来访问对象的属性，[] 里面传入的是对象属性的字符串形式，需要加双引号。

对比

点运算符访问对象属性较为简洁，中括号运算符访问对象属性通用性更高。能使用点运算符的一定可以使用中括号运算符，反之不成立。

只能使用中括号运算符的情况：

使用了不能作为标识符的属性名的情况。
将变量作为属性名使用的情况。
将表达式的求值结果作为属性名使用的情况。

案例

访问对象属性

使用点运算符和中括号运算符都可以访问对象属性

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript访问对象属性</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            function createPerson(name, age, sex){
                var person = new Object();
                person.name = name;
                person.age = age;
                person.sex = sex;
                person.sayHi = function(){
                    console.log("I am", this.name, "i am", this.age, "years old", "and my sex is", this.sex);
                }
                return person;
            }
            var person = createPerson("HaiCoder", 109, "F");
            person.name = "haicoder";
            person.sayHi();
            person["name"] = "HaiCoder";
            person.sayHi();
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

07_JavaScript对象属性.png

我们首先创建了一个函数 createPerson，该函数接受三个参数，这三个参数就是对象的属性，同时函数里面还有一个函数，该函数就是对象的方法。

同时，在 createPerson 函数里面，我们通过 new Object 创建了一个 person 对象，接着，给 person 对象设置属性，并最后返回创建的 person 对象。

接着，我们通过 createPerson 方法创建了一个 person 对象，并使用点运算符访问了对象的 name 属性，最后调用了对象的 sayHi 方法。

最后，我们再次使用中括号运算符，访问了对象的 name 属性，此时，使用点运算符和中括号运算符访问对象属性是一样的。

中括号访问对象属性

使用中括号运算符访问对象属性

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript访问对象属性</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            function createPerson(name, age, sex){
                var person = new Object();
                person.name = name;
                person.sayHi = function(){
                    console.log("I am", this.name);
                }
                return person;
            }
            var person = createPerson("HaiCoder", 109, "F");
            person.sayHi();
            person.firtst-name = "zhang";
            console.log("My first name is:", person.firtst-name);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

08_JavaScript访问对象属性.png

我们想给 person 对象动态的添加一个 firtst-name 属性，因为，firtst-name 属性中包含 ‘-’ ，因此此时不能使用点运算符访问该属性，现在，我们将程序修改如下：

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript访问对象属性</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            function createPerson(name, age, sex){
                var person = new Object();
                person.name = name;
                person.sayHi = function(){
                    console.log("I am", this.name);
                }
                return person;
            }
            var person = createPerson("HaiCoder", 109, "F");
            person.sayHi();
            person["firtst-name"] = "zhang";
            console.log("My first name is:", person["firtst-name"]);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

09_JavaScript访问对象属性.png

此时，我们将访问 firtst-name 属性的方式，修改为了使用中括号，此时，可以正常的访问该属性。

访问对象的变量属性

使用中括号运算符可以访问对象的变量属性

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript访问对象属性</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            function createPerson(name, age, sex){
                var person = new Object();
                person.name = name;
                person.sayHi = function(){
                    console.log("I am", this.name);
                }
                return person;
            }
            var person = createPerson("HaiCoder", 109, "F");
            person.sayHi();
            var key = "name";
            console.log("My name is:", person.key);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

10_JavaScript访问对象属性.png

我们定义了一个变量为 key，key 的值为 name，接着，我们通过点运算符访问对象的 key 属性，此时返回 undefined，因为对象不存在 key 属性，现在，我们将程序修改如下：

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript访问对象属性</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            function createPerson(name, age, sex){
                var person = new Object();
                person.name = name;
                person.sayHi = function(){
                    console.log("I am", this.name);
                }
                return person;
            }
            var person = createPerson("HaiCoder", 109, "F");
            person.sayHi();
            var key = "name";
            console.log("My name is:", person[key]);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

11_JavaScript访问对象属性.png

此时，我们将访问 key 属性的方式，修改为了使用中括号，此时，可以正常的访问该属性。因为，使用中括号访问 key 属性时，key 变量会被解析为 name 属性。

JavaScript对象属性