JavaScript 对象构造器
JavaScript 对象构造器
实例
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象构造器</h1>
<p id="demo"></p>
<script>
// Person 对象的构造器函数
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// 创建 Person 对象
var myFriend = new Person("Bill", "Gates", 62, "blue");
// 显示年龄
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.age + ".";
</script>
</body>
</html>
运行结果：
Javascript 对象构造器 My friend is 62.
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
用大写首字母对构造器函数命名是个好习惯。
对象类型（蓝图）（类）
前一章的实例是有限制的。它们只创建单一对象。
有时我们需要创建相同“类型”的许多对象的“蓝图”。
创建一种“对象类型”的方法，是使用对象构造器函数。
在上面的例子中，函数 Person() 就是对象构造器函数。
通过 new 关键词调用构造器函数可以创建相同类型的对象：
var myFather = new Person("Bill", "Gates", 62, "blue");
var myMother = new Person("Steve", "Jobs", 56, "green");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象构造器</h1>
<p id="demo"></p>
<script>
// Person 对象的构造器函数
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// 创建 Person 对象
var myFriend = new Person("Bill", "Gates", 62, "blue");
var myBrother = new Person("Steve", "Jobs", 56, "green");
// 显示年龄
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.age + ". My brother is " + myBrother.age + ".";
</script>
</body>
</html>
运行结果：
Javascript 对象构造器 My friend is 62. My brother is 56.
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
this 关键词
在 JavaScript 中，被称为 this 的事物是代码的“拥有者”。
this 的值，在对象中使用时，就是对象本身。
在构造器函数中，this 是没有值的。它是新对象的替代物。 当一个新对象被创建时，this 的值会成为这个新对象。
请注意 this 并不是变量。它是关键词。您无法改变 this 的值。
为对象添加属性
为已有的对象添加新属性很简单：
示例代码：
myFather.nationality = "English";
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象构造器</h1>
<p id="demo"></p>
<script>
// Person 对象的构造器函数
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// 创建两个 Person 对象
var myFriend = new Person("Bill", "Gates", 62, "blue");
var myBrother = new Person("Steve", "Jobs", 56, "green");
// 为第一个对象添加国籍
myFriend.nationality = "English";
// 显示国籍
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.nationality;
</script>
</body>
</html>
运行结果：
Javascript 对象构造器 My friend is English
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
新属性被添加到 myFather。不是 myMother，也不是任何其他 person 对象。
为对象添加方法
为已有的对象添加新方法很简单：
示例代码：
myFather.name = function () {
return this.firstName + " " + this.lastName;
};
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象构造器</h1>
<p id="demo"></p>
<script>
// Person 对象的构造器函数
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// 创建两个 Person 对象
var myFriend = new Person("Bill", "Gates", 62, "blue");
var myBrother = new Person("Steve", "Jobs", 56, "green");
// 向第一个对象添加 name 方法
myFriend.name = function() {
return this.firstName + " " + this.lastName;
};
// 显示全名
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.name();
</script>
</body>
</html>
运行结果：
Javascript 对象构造器 My friend is Bill Gates
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
新方法被添加到 myFather。不是 myMother，也不是任何其他 person 对象。
为构造器添加属性
与向已有对象添加新属性不同，您无法为对象构造器添加新属性：
示例代码：
Person.nationality = "English";
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象构造器</h1>
<p>您不能将新属性添加到构造函数。</p>
<p id="demo"></p>
<script>
// Person 对象的构造器函数
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// 您不能将新属性添加到构造函数
Person.nationality = "English";
// 创建两个 Person 对象
var myFriend = new Person("Bill", "Gates", 62, "blue");
var myBrother = new Person("Steve", "Jobs", 56, "green");
// 显示国籍
document.getElementById("demo").innerHTML =
"The nationality of my friend is " + myFriend.nationality;
</script>
</body>
</html>
运行结果：
Javascript 对象构造器 您不能将新属性添加到构造函数。 The nationality of my friend is undefined
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如需向构造器添加一个新属性，您必须添加到构造器函数：
示例代码：
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = "English";
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象构造器</h1>
<p id="demo"></p>
<script>
// Person 对象的构造器函数
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.nationality = "English";
}
// 创建两个 Person 对象
var myFriend = new Person("Bill", "Gates", 62, "blue");
var myBrother = new Person("Steve", "Jobs", 56, "green");
// 显示国籍
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.nationality + ". My brother is " + myBrother.nationality;
</script>
</body>
</html>
运行结果：
Javascript 对象构造器 My friend is English. My brother is English
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
这样对象属性就可以拥有默认值。
为构造器添加方法
您的构造器函数也可以定义方法：
示例代码：
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.name = function() {return this.firstName + " " + this.lastName;};
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象构造器</h1>
<p id="demo"></p>
<script>
// Person 对象的构造器函数
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.name = function() {
return this.firstName + " " + this.lastName
};
}
// 创建 Person 对象
var myFriend = new Person("Bill", "Gates", 62, "blue");
// 显示全名
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.name();
</script>
</body>
</html>
运行结果：
Javascript 对象构造器 My friend is Bill Gates
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
与向已有对象添加新方法不同，您无法为对象构造器添加新方法。
必须在构造器函数内部向一个对象添加方法：
示例代码：
function Person(firstName, lastName, age, eyeColor) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.changeName = function (name) {
this.lastName = name;
};
}
changeName() 函数把 name 赋值给 person 的 lastName 属性。
现在您可以试一试：
myMother.changeName("Jobs");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象构造器</h1>
<p id="demo"></p>
<script>
// Person 对象的构造器函数
function Person(firstName,lastName,age,eyeColor) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.changeName = function (name) {
this.lastName = name;
}
}
// 创建 Person 对象
var myFriend = new Person("Bill","Gates",62,"green");
// 修改姓氏
myFriend.changeName("Jobs");
// 显示姓氏
document.getElementById("demo").innerHTML =
"My friend's last name is " + myFriend.lastName;
</script>
</body>
</html>
运行结果：
Javascript 对象构造器 My friend's last name is Jobs
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
通过用 myMother 替代 this，JavaScript 可以获知目前处理的哪个 person。
内建 JavaScript 构造器
JavaScript 提供用于原始对象的构造器：
示例代码：
var x1 = new Object(); // 一个新的 Object 对象
var x2 = new String(); // 一个新的 String 对象
var x3 = new Number(); // 一个新的 Number 对象
var x4 = new Boolean(); // 一个新的 Boolean 对象
var x5 = new Array(); // 一个新的 Array 对象
var x6 = new RegExp(); // 一个新的 RegExp 对象
var x7 = new Function(); // 一个新的 Function 对象
var x8 = new Date(); // 一个新的 Date 对象
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象构造器</h1>
<p id="demo"></p>
<script>
var x1 = new Object(); // 新的 Object 对象
var x2 = new String(); // 新的 String 对象
var x3 = new Number(); // 新的 Number 对象
var x4 = new Boolean(); // 新的 Boolean 对象
var x5 = new Array(); // 新的 Array 对象
var x6 = new RegExp(); // 新的 RegExp 对象
var x7 = new Function(); // 新的 Function 对象
var x8 = new Date(); // 新的 Date 对象
// 显示所有对象的类型
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>" +
"x8: " + typeof x8 + "<br>";
</script>
<p>没有必要使用 String()、Number()、Boolean()、Array() 以及 RegExp()。</p>
</body>
</html>
运行结果：
Javascript 对象构造器 x1: object x2: object x3: object x4: object x5: object x6: object x7: function x8: object 没有必要使用 String()、Number()、Boolean()、Array() 以及 RegExp()。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Math() 对象不再此列。Math 是全局对象。new 关键词不可用于 Math。
您知道吗？
正如以上所见，JavaScript 提供原始数据类型字符串、数字和布尔的对象版本。但是并无理由创建复杂的对象。原始值快得多！
请使用对象字面量 {} 代替 new Object()。
请使用字符串字面量 "" 代替 new String()。
请使用数值字面量代替 Number()。
请使用布尔字面量代替 new Boolean()。
请使用数组字面量 [] 代替 new Array()。
请使用模式字面量代替 new RexExp()。
请使用函数表达式 () {} 代替 new Function()。
示例代码：
var x1 = {}; // 新对象
var x2 = ""; // 新的原始字符串
var x3 = 0; // 新的原始数值
var x4 = false; // 新的原始逻辑值
var x5 = []; // 新的数组对象
var x6 = /()/ // 新的正则表达式对象
var x7 = function(){}; // 新的函数对象
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象构造器</h1>
<p id="demo"></p>
<script>
var x1 = {}; // 对象
var x2 = ""; // 字符串
var x3 = 0; // 数字
var x4 = false; // 布尔
var x5 = []; // 对象（非数组）
var x6 = /()/; // 对象
var x7 = function(){}; // 函数
// 显示所有类型
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>";
</script>
</body>
</html>
运行结果：
Javascript 对象构造器 x1: object x2: string x3: number x4: boolean x5: object x6: object x7: function
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
字符串对象
通常，字符串被创建为原始值：var firstName = "Bill"
但是也可以使用 new 关键词创建字符串对象：var firstName = new String("Bill")
请在 JS 字符串这一章中学习为何不应该把字符串创建为对象。
数字对象
通常，数值被创建为原始值：var x = 456
但是也可以使用 new 关键词创建数字对象：var x = new Number(456)
请在 JS 数字这一章中学习为何不应该把数值创建为对象。
布尔对象
通常，逻辑值被创建为原始值：var x = false
但是也可以使用 new 关键词创建逻辑对象：var x = new Boolean(false)
请在 JS 逻辑这一章中学习为何不应该把逻辑值创建为对象。
