参考手册
JavaScript 对象
JavaScript 对象访问器
JavaScript 对象原型
返回 JavaScript 对象

JavaScript 对象构造器

实例

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 对象构造器</h1>
  7. <p id="demo">
  9. <script>
  10. // Person 对象的构造器函数
  11. function Person(first, last, age, eye) {
  12.   this.firstName = first;
  13.   this.lastName = last;
  14.   this.age = age;
  15.   this.eyeColor = eye;
  16. }
  18. // 创建 Person 对象
  19. var myFriend = new Person("埃隆", "马斯克", 50, "blue");
  21. // 显示年龄
  22. document.getElementById("demo").innerHTML =
  23. "我父亲已经 " + myFriend.age + "岁了。";
  24. </script>
  26. </body>
  27. </html>
运行一下

用大写首字母对构造器函数命名是个好习惯。

对象类型（蓝图）（类）

前一章的实例是有限制的。它们只创建单一对象。

有时我们需要创建相同“类型”的许多对象的“蓝图”。

创建一种“对象类型”的方法，是使用对象构造器函数。

在上面的例子中，函数 Person() 就是对象构造器函数。

通过 new 关键词调用构造器函数可以创建相同类型的对象：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 对象构造器</h1>
  7. <p id="demo">
  9. <script>
  11. // Person 对象的构造器函数
  12. function Person(first, last, age, eye) {
  13.   this.firstName = first;
  14.   this.lastName = last;
  15.   this.age = age;
  16.   this.eyeColor = eye;
  17. }
  19. // 创建 Person 对象
  20. var myFriend = new Person("埃隆", "马斯克", 50, "蓝色");
  21. var myBrother = new Person("马克", "扎克伯格", 40, "绿色");
  23. // 显示年龄
  24. document.getElementById("demo").innerHTML =
  25. "我朋友是 " + myFriend.age + "岁. 我哥哥是 " + myBrother.age + "岁。";
  27. </script>
  29. </body>
  30. </html>
运行一下

this 关键词

在 JavaScript 中，被称为 this 的事物是代码的“拥有者”。

this 的值，在对象中使用时，就是对象本身。

在构造器函数中，this 是没有值的。它是新对象的替代物。 当一个新对象被创建时，this 的值会成为这个新对象。

请注意 this 并不是变量。它是关键词。您无法改变 this 的值。

为对象添加属性

为已有的对象添加新属性很简单：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 对象构造器</h1>
  7. <p id="demo">
  9. <script>
  10. // Person 对象的构造器函数
  11. function Person(first, last, age, eye) {
  12.   this.firstName = first;
  13.   this.lastName = last;
  14.   this.age = age;
  15.   this.eyeColor = eye;
  16. }
  18. // 创建两个 Person 对象
  19. var myFriend = new Person("埃隆", "马斯克", 50, "蓝色");
  20. var myBrother = new Person("马克", "扎克伯格", 40, "绿色");
  22. // 为第一个对象添加国籍
  23. myFriend.nationality = "美国人";
  25. // 显示国籍
  26. document.getElementById("demo").innerHTML =
  27. "我朋友是 " + myFriend.nationality;
  28. </script>
  30. </body>
  31. </html>
运行一下

新属性被添加到 myFather。不是 myMother，也不是任何其他 person 对象。

为对象添加方法

为已有的对象添加新方法很简单：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 对象构造器</h1>
  7. <p id="demo">
  9. <script>
  11. // Person 对象的构造器函数
  12. function Person(first, last, age, eye) {
  13.   this.firstName = first;
  14.   this.lastName = last;
  15.   this.age = age;
  16.   this.eyeColor = eye;
  17. }
  19. // 创建两个 Person 对象
  20. var myFriend = new Person("埃隆", "马斯克", 50, "蓝色");
  21. var myBrother = new Person("马克", "扎克伯格", 40, "绿色");
  23. // 向第一个对象添加 name 方法
  24. myFriend.name = function() {
  25.   return this.firstName + " " + this.lastName;
  26. };
  28. // 显示全名
  29. document.getElementById("demo").innerHTML =
  30. "我朋友是 " + myFriend.name();
  31. </script>
  33. </body>
  34. </html>
运行一下

新方法被添加到 myFather。不是 myMother，也不是任何其他 person 对象。

为构造器添加属性

与向已有对象添加新属性不同，您无法为对象构造器添加新属性：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 对象构造器</h1>
  7. <p>您不能将新属性添加到构造函数。</p>
  9. <p id="demo">
  11. <script>
  13. // Person 对象的构造器函数
  14. function Person(first, last, age, eye) {
  15.   this.firstName = first;
  16.   this.lastName = last;
  17.   this.age = age;
  18.   this.eyeColor = eye;
  19. }
  21. // 您不能将新属性添加到构造函数
  22. Person.nationality = "美国人";
  24. // 创建两个 Person 对象
  25. var myFriend = new Person("埃隆", "马斯克", 50, "蓝色");
  26. var myBrother = new Person("马克", "扎克伯格", 40, "绿色");
  28. // 显示国籍
  29. document.getElementById("demo").innerHTML =
  30. "我朋友是 " + myFriend.nationality;
  31. </script>
  33. </body>
  34. </html>
运行一下

如需向构造器添加一个新属性，您必须添加到构造器函数：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 对象构造器</h1>
  7. <p id="demo">
  9. <script>
  11. // Person 对象的构造器函数
  12. function Person(first, last, age, eye) {
  13.   this.firstName = first;
  14.   this.lastName = last;
  15.   this.age = age;
  16.   this.eyeColor = eye;
  17.   this.nationality = "美国人";
  18. }
  20. // 创建两个 Person 对象
  21. var myFriend = new Person("埃隆", "马斯克", 50, "蓝色");
  22. var myBrother = new Person("马克", "扎克伯格", 40, "绿色");
  24. // 显示国籍
  25. document.getElementById("demo").innerHTML =
  26. "My friend is " + myFriend.nationality + ". My brother is " + myBrother.nationality; 
  27. </script>
  29. </body>
  30. </html>
运行一下

这样对象属性就可以拥有默认值。

为构造器添加方法

您的构造器函数也可以定义方法：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 对象构造器</h1>
  7. <p id="demo">
  9. <script>
  11. // Person 对象的构造器函数
  12. function Person(first, last, age, eye) {
  13.   this.firstName = first;
  14.   this.lastName = last;
  15.   this.age = age;
  16.   this.eyeColor = eye;
  17.   this.name = function() {
  18.     return this.firstName + " " + this.lastName
  19.   };
  20. }
  22. // 创建 Person 对象
  23. var myFriend = new Person("埃隆", "马斯克", 50, "蓝色");
  25. // 显示全名
  26. document.getElementById("demo").innerHTML =
  27. "我朋友是 " + myFriend.name();
  29. </script>
  31. </body>
  32. </html>
运行一下

与向已有对象添加新方法不同，您无法为对象构造器添加新方法。

必须在构造器函数内部向一个对象添加方法：

  1. function Person(firstName, lastName, age, eyeColor) {
  2.     this.firstName = firstName;
  3.     this.lastName = lastName;
  4.     this.age = age;
  5.     this.eyeColor = eyeColor;
  6.     this.changeName = function (name) {
  7.         this.lastName = name;
  8.     };
  9. }

changeName() 函数把 name 赋值给 person 的 lastName 属性。

现在您可以试一试：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 对象构造器</h1>
  7. <p id="demo">
  9. <script>
  10. // Person 对象的构造器函数
  11. function Person(firstName,lastName,age,eyeColor) {
  12.   this.firstName = firstName;
  13.   this.lastName = lastName;
  14.   this.age = age;
  15.   this.eyeColor = eyeColor;
  16.   this.changeName = function (name) {
  17.     this.lastName = name;
  18.   }
  19. }
  20. // 创建 Person 对象
  21. var myFriend = new Person("埃隆", "马斯克", 50, "蓝色");
  23. // 修改姓氏
  24. myFriend.changeName("乔布斯");
  26. // 显示姓氏
  27. document.getElementById("demo").innerHTML =
  28. "我朋友的名字是 " + myFriend.lastName;
  29. </script>
  31. </body>
  32. </html>
运行一下

通过用 myMother 替代 this，JavaScript 可以获知目前处理的哪个 person。

内置 JavaScript 构造器

JavaScript 提供用于原始对象的构造器：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 对象构造器</h1>
  7. <p id="demo">
  9. <script>
  10. var x1 = new Object();   // 新的 Object 对象
  11. var x2 = new String();   // 新的 String 对象
  12. var x3 = new Number();   // 新的 Number 对象
  13. var x4 = new Boolean();  // 新的 Boolean 对象
  14. var x5 = new Array();  // 新的 Array 对象
  15. var x6 = new RegExp();   // 新的 RegExp 对象
  16. var x7 = new Function(); // 新的 Function 对象
  17. var x8 = new Date();   // 新的 Date 对象
  19. // 显示所有对象的类型
  20. document.getElementById("demo").innerHTML =
  21. "x1: " + typeof x1 + "<br>" +
  22. "x2: " + typeof x2 + "<br>" +
  23. "x3: " + typeof x3 + "<br>" +
  24. "x4: " + typeof x4 + "<br>" +
  25. "x5: " + typeof x5 + "<br>" +
  26. "x6: " + typeof x6 + "<br>" +
  27. "x7: " + typeof x7 + "<br>" +
  28. "x8: " + typeof x8 + "<br>";
  29. </script>
  31. <p>没有必要使用 String()、Number()、Boolean()、Array() 以及 RegExp()。</p>
  33. </body>
  34. </html>
运行一下

Math() 对象不再此列。Math 是全局对象。new 关键词不可用于 Math。

注意事项

正如以上所见，JavaScript 提供原始数据类型字符串、数字和布尔的对象版本。但是并无理由创建复杂的对象。原始值快得多！

请使用对象字面量 {} 代替 new Object()。

请使用字符串字面量 "" 代替 new String()。

请使用数值字面量代替 Number()。

请使用布尔字面量代替 new Boolean()。

请使用数组字面量 [] 代替 new Array()。请使用模式字面量代替 new RexExp()。

请使用函数表达式 () {} 代替 new Function()。

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 对象构造器</h1>
  7. <p id="demo">
  9. <script>
  10. var x1 = {};    // 对象
  11. var x2 = "";    // 字符串
  12. var x3 = 0;     // 数字
  13. var x4 = false;   // 布尔
  14. var x5 = [];    // 对象（非数组）
  15. var x6 = /()/;    // 对象
  16. var x7 = function(){};  // 函数
  18. // 显示所有类型
  19. document.getElementById("demo").innerHTML =
  20. "x1: " + typeof x1 + "<br>" +
  21. "x2: " + typeof x2 + "<br>" +
  22. "x3: " + typeof x3 + "<br>" +
  23. "x4: " + typeof x4 + "<br>" +
  24. "x5: " + typeof x5 + "<br>" +
  25. "x6: " + typeof x6 + "<br>" +
  26. "x7: " + typeof x7 + "<br>";
  27. </script>
  29. </body>
  30. </html>
运行一下

字符串对象

通常，字符串被创建为原始值：var firstName = "John"但是也可以使用 new 关键词创建字符串对象：var firstName = new String("John")

请在 JS 字符串这一章中学习为何不应该把字符串创建为对象。

数字对象

通常，数值被创建为原始值：var x = 456但是也可以使用 new 关键词创建数字对象：var x = new Number(456)

请在 JS 数字这一章中学习为何不应该把数值创建为对象。

布尔对象

通常，逻辑值被创建为原始值：var x = false

但是也可以使用 new 关键词创建逻辑对象：var x = new Boolean(false)

请在 JS 逻辑这一章中学习为何不应该把逻辑值创建为对象。

JavaScript 对象访问器
JavaScript 对象原型

分类导航