<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo"></p>
<script>
function Person(first, last, age, like) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.likeColoe = like;
}
var myFriend = new Person("Rose", "li", 20, "pick");
document.getElementById("demo").innerHTML =
"My friend " + myFriend.firstName + " is " + myFriend.age + ".";
</script>
</body>
//My friend Rose is 20.
用大写首字母对构造器函数命名是个好习惯。
对象类型(蓝图)(类)
前一章的实例是有限制的。它们只创建单一对象。
有时我们需要创建相同“类型”的许多对象的“蓝图”。
创建一种“对象类型”的方法,是使用对象构造器函数。
在上面的例子中,函数 Person() 就是对象构造器函数。
通过 new 关键词调用构造器函数可以创建相同类型的对象:
<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo"></p>
<script>
function Person(first, last, age, like) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.likeColoe = like;
}
var myFriend = new Person("Rose", "li", 20, "pick");
var mySister = new Person("jisso", "Tina", 15, "blue");
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.age + ". My mySister is " + mySister.age + ".";
</script>
</body>
//My friend is 20. My mySister is 15.
this 关键词
在 JavaScript 中,被称为 this
的事物是代码的“拥有者”。
this
的值,在对象中使用时,就是对象本身。
在构造器函数中,this
是没有值的。它是新对象的替代物。 当一个新对象被创建时,this 的值会成为这个新对象。
请注意 this
并不是变量。它是关键词。您无法改变 this 的值。
为对象添加属性
为已有的对象添加新属性很简单:
<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo"></p>
<script>
function Person(first, last, age, like) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.likeColoe = like;
}
//创建两个person对象
var myFriend = new Person("Rose", "li", 20, "pick");
var mySister = new Person("jisso", "Tina", 15, "blue");
//为第一个对象添加国籍
myFriend.nationality = "China";
// 显示国籍
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.nationality;
</script>
</body>
//My friend is China
为对象添加方法
为已有的对象添加新方法很简单:
实例
<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo"></p>
<script>
function Person(first, last, age, like) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.likeColoe = like;
}
//创建两个person对象
var myFriend = new Person("Rose", "li", 20, "pick");
var mySister = new Person("jisso", "Tina", 15, "blue");
//为第一个对象添加国籍
myFriend.name = function () {
return this.firstName + " " + this.lastName;
}
// 显示国籍
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.name();
</script>
</body>
//My friend is Rose li
新方法被添加到 myFather。不是 myMother,也不是任何其他 person 对象。
为构造器添加属性
与向已有对象添加新属性不同,您无法为对象构造器添加新属性:
实例
<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo"></p>
<script>
function Person(first, last, age, like) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.likeColoe = like;
}
//创建两个person对象
var myFriend = new Person("Rose", "li", 20, "pick");
var mySister = new Person("jisso", "Tina", 15, "blue");
//您不能将属性添加到构造天数
Person.nationality = "China";
// 显示国籍
document.getElementById("demo").innerHTML =
"The nationality of my friend is " + myFriend.nationality;
</script>
</body>
//The nationality of my friend is undefined
为构造器添加方法
您的构造器函数也可以定义方法:
实例
<!DOCTYPE html>
<html>
<body>
<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>
//My friend is Bill Gates
与向已有对象添加新方法不同,您无法为对象构造器添加新方法。
必须在构造器函数内部向一个对象添加方法
<!DOCTYPE html>
<html>
<body>
<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>
//My friend's last name is Jobs
内建 JavaScript 构造器
JavaScript 提供用于原始对象的构造器:
实例
<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo"></p>
<script>
var a1 = new Object(); // 新的 Object 对象
var a2 = new Object(); // 新的 Object 对象
var a3 = new Number(); // 新的 Number 对象
var a4 = new Boolean(); // 新的 Boolean 对象
var a5 = new Array(); // 新的 Array 对象
var a6 = new RegExp(); // 新的 RegExp 对象
var a7 = new Function(); // 新的 Function 对象
var a8 = new Date(); // 新的 Date 对象
// 显示国籍
document.getElementById("demo").innerHTML =
"a1: " + typeof x1 + "<br>" +
"a2: " + typeof x2 + "<br>" +
"a3: " + typeof x3 + "<br>" +
"a4: " + typeof x4 + "<br>" +
"a5: " + typeof x5 + "<br>" +
"a6: " + typeof x6 + "<br>" +
"a7: " + typeof x7 + "<br>" +
"a8: " + typeof x8 + "<br>";
</script>
</body>
<!--
a1: undefined
a2: undefined
a3: undefined
a4: undefined
a5: undefined
a6: undefined
a7: undefined
a8: undefined
-->
Math()
对象不再此列。Math 是全局对象。new
关键词不可用于 Math。
您知道吗?
正如以上所见,JavaScript 提供原始数据类型字符串、数字和布尔的对象版本。但是并无理由创建复杂的对象。原始值快得多!
请使用对象字面量 {}
代替 new Object()
。
请使用字符串字面量 ""
代替 new String()
。
请使用数值字面量代替 Number()
。
请使用布尔字面量代替 new Boolean()
。
请使用数组字面量 []
代替 new Array()
。
请使用模式字面量代替 new RexExp()
。
请使用函数表达式 () {}
代替 new Function()
。
实例
<!DOCTYPE html>
<html>
<body>
<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>
<!--
x1: object
x2: string
x3: number
x4: boolean
x5: object
x6: object
x7: function
-->
字符串对象
通常,字符串被创建为原始值: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 逻辑这一章中学习为何不应该把逻辑值创建为对象。
标签:对象,age,JavaScript,构造,Person,var,new,myFriend From: https://blog.csdn.net/2301_78133614/article/details/141570043