JavaScript字面量创建对象

JavaScript字面量创建对象教程

在 JavaScript 中，我们可以通过字面量的方式来创建一个对象，创建完对象后，我们可以使用 “.” 的方式来设置对象的属性和方法。

使用字面量方式创建的对象时一次性对象，不方便修改，不利于提高效率，一般不建议使用。

JavaScript字面量方法创建对象

语法

var obj = {};
obj.attr1 = value1;
obj.attr2 = value2;
obj.attr3 = value3;
...
obj.func = function(){
    //todo
}

说明

我们通过使用字面量的方式创建了一个对象 obj，同时，设置了该对象的三个属性和一个方法。我们在给对象设置属性和方法时，需要使用 “.” 的方式。

同时，JavaScript 中的对象的属性和方法可以动态的添加，因此，我们可以任意的添加 JavaScript 的属性。

如果，我们在对象的函数里面，需要访问对象的属性，那么我们需要使用 this 关键字。

案例

创建对象

通过字面量方法创建对象

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript字面量创建对象</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            var person = {};
            person.name = "HaiCoder";
            person.age = 109;
            person.sex = "M";
            person.sayHi = function(){
                console.log("I am", this.name, "i am", this.age, "years old", "and my sex is", this.sex);
            }
            console.log("person name is:", person.name, "age is:", person.age, "sex is:", person.sex);
            person.sayHi();
        </script>
    </head>
</html>

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

03_JavaScript字面量创建对象.png

我们首先，使用了字面量的方式创建了一个 person 对象，接着，我们通过 “.” 的形式，给对象添加了三个属性和一个 sayHi 方法。

在 sayHi 方法里面，我们需要访问对象的属性，需要使用 this 关键字，在其他地方访问对象的属性，我们直接使用对象名即可。

创建对象

通过字面量方法创建对象后，可以动态增加对象属性

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript字面量创建对象</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            var person = {};
            person.name = "HaiCoder";
            person.age = 109;
            person.sex = "M";
            person.sayHi = function(){
                console.log("I am", this.name, "i am", this.age, "years old", "and my sex is", this.sex);
            }
            person.sayHi();
            person.name = "haicoder";
            person.sayHi();
            person.score = 99;
            console.log("person name is:", person.name, "score is:", person.score);
        </script>
    </head>
</html>

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

04_JavaScript字面量创建对象.png

我们创建了对象 person 之后，再次通过给对象的属性重新赋值的方式，修改了对象属性的值，同时，我们可以任意动态的为对象添加属性。

JavaScript字面量创建对象总结

在 JavaScript 中，我们可以通过字面量的方式来创建一个对象，创建完对象后，我们可以使用 “.” 的方式来设置对象的属性和方法。

如果，我们在对象的函数里面，需要访问对象的属性，那么我们需要使用 this 关键字。