javaScript对象定义

东篱畔
152 阅读3分钟

javascript几乎所有的事物都是对象

  • 布尔是对象（如果用 new 关键词定义）
  • 数字是对象（如果用 new 关键词定义）
  • 字符串是对象（如果用 new 关键词定义）
  • 日期永远都是对象
  • 算术永远都是对象
  • 正则表达式永远都是对象
  • 数组永远都是对象
  • 函数永远都是对象
  • 对象永远都是对象

所有 JavaScript 值，除了原始值，都是对象。

javascript原始值

原始值是指没有属性或方法的值，原始数据类型指的是拥有原始值的数据。

javascript定义了物种原始数据类型：

  • string
  • number
  • boolean
  • null
  • undefined

原始值是一成不变的（它们是硬编码的，因此不能改变）

x = 3.14，能够改变 x 的值。但是无法改变 3.14 的值。

值类型注释
"Hello"string"Hello" 始终是 "Hello"
3.14number3.14 始终是 3.14
truebooleantrue 始终是 true
falsebooleanfalse 始终是 false
nullnull(object) null 始终是 null
undefinedundefinedundefined 始终是 undefined

对象是包含变量的变量

javascript包含单个的值：

<!DOCTYPE html>
<html lang="en">
<body>
    <p id="demo"></p>
    <script>
        var person ="Rose";
        document.getElementById("demo").innerHTML=person;
    </script>
</body>
</html>
//Rose

对象也是变量，对象能够包含很多值。值按照名称 : 值对的形式编写（名称和值以冒号分隔）。

<!DOCTYPE html>
<html lang="en">
<body>
    <p id="demo"></p>
    <script>
       var person={
        firstName:"Rose",
        lastName:"Tina",
        age:20,
        color:"pick",
       }
        document.getElementById("demo").innerHTML="My person.firstName is "+person.firstName+"</br>My person.lastName is"+person.lastName+"</br>I'm "+person.age+"</br>  I like "+person.color;
    </script>
</body>
</html>
<!-- 
My person.firstName is Rose
My person.lastName isTina
I'm 20
I like pick
 -->

JavaScript 对象是命名值的集合。

对象属性

JavaScript 对象中的命名值，被称为属性。

属性值
firstNameBill
lastNameGates
age62
eyeColorblue

创建 JavaScript 对象

能够定义和创建自己的对象。

有不同的方法来创建对象：

  • 定义和创建单个对象，使用对象文字。
  • 定义和创建单个对象，通过关键词 new。
  • 定义对象构造器，然后创建构造类型的对象。

在 ECMAScript 5 中，也可以通过函数 Object.create() 来创建对象

使用对象字面量

这是创建对象最简答的方法。

使用对象文字，您可以在一条语句中定义和创建对象。

对象文字指的是花括号 {} 中的名称:值对（比如 age:20）。

下面的例子创建带有四个属性的新的 JavaScript 对象：

<!DOCTYPE html>
<html lang="en">
<body>
    <p id="demo"></p>
    <script>
        //创建对象
        var person={firstName:"Rose",lastName:"Tina",age:20,color:"粉色"};
        //显示对象中的数据
        document.getElementById("demo").innerHTML=person.firstName+person.lastName+"现在 "+person.age+"岁，她非常喜欢"+person.color;
    </script>
</body>
</html>
//RoseTina现在 20岁，她非常喜欢粉色

空格和折行不重要。对象定义可横跨多行:

<!DOCTYPE html>
<html>

<body>

    <p id="demo"></p>

    <script>
        // 创建对象：
        var person = {
            firstName: "Rose",
            lastName: "Tina",
            age: 20,
            eyeColor: "粉色"
        };

        // 显示对象中的数据：
        document.getElementById("demo").innerHTML =
            person.firstName + " 现在是 " + person.age + " 岁了。";
    </script>

</body>

</html>
Rose 已经 20 岁了。

使用 JavaScript 关键词 new

创建了带有四个属性的新的 JavaScript 对象

<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        var person = new Object();
        person.firstName = "Rose";
        person.lastName = "Tina";
        person.age = 20;
        person.color = "blue"
        document.getElementById("demo").innerHTML =
            person.firstName + " is " + person.age + " years old.";  
    </script>
</body>

</html>
//Rose is 20 years old.

无需使用 new Object()简易性、可读性和执行速度的考虑，请使用第一种创建方法（对象文字方法）。

JavaScript 对象是易变的

对象是易变的：它们通过引用来寻址，而非值。

如果 person 是一个对象，下面的语句不会创建 person 的副本：

var x = person;  // 这不会创建 person 的副本。

对象 x 并非 person 的副本。它就是 person。x 和 person 是同一个对象。

对 x 的任何改变都将改变 person，因为 x 和 person 是相同的对象。

实例

<!DOCTYPE html>
<html>

<body>

    <p id="demo"></p>

    <script>
        var person = { firstName: "Bill", lastName: "Gates", age: 62, eyeColor: "blue" }

        var x = person;
        x.age = 10;

        document.getElementById("demo").innerHTML =
            person.firstName + " is " + person.age + " years old.";
    </script>

</body>

</html>
//Bill is 10 years old.
avatar
文章
阅读
粉丝