JavaScript学习(三) -- 对象构造器
1.构造函数
什么是构造函数:在 JavaScript 中,用 new
关键字来调用的函数,称为构造函数。
它的作用:重复需要使用的属性当做构造函数的参数传递,可以减少大量的重复操作过程。
在使用时,若是new忘记使用,会产生严重的后果。会导致构造函数内部变量变为全局变量。避免的方法,在构造函数内部使用严格模式。当出现报错时,将会终止运行js。此时可以根据报错进行修改调试。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="demo"></p>
<script>
function Person(arg1, arg2)
{
//'use strict'; 在开头处加上这个,就表示是严格模式
this.firstName = arg1;
this.lastName = arg2;
this.fullName = function ()
{
return this.firstName + this.lastName;
};
}
var x = Person("John", "Doe");
document.getElementById("demo").innerHTML = firstName; //输出:John
//正确的调用:
// var x = new Person("John","Doe");
// document.getElementById("demo").innerHTML = x.firstName; //输出:John
</script>
</body>
</html>
PS:用大写首字母对构造器函数命名是个好习惯。
2.this 关键词
在 JavaScript 中,被称为 this 的事物是代码的“拥有者”。
this 的值,在对象中使用时,就是对象本身。
在构造器函数中,this 是没有值的。它是新对象的替代物。 当一个新对象被创建时,this 的值会成为这个新对象。
请注意 this 并不是变量。它是关键词。您无法改变 this 的值。
PS:在构造函数中所有的属性和方法都要用 this 指代
3.为对象添加属性和方法
<!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"; //注意:nationality 属性只有 myFriend这个对象有,myBrother 没有
// 向第一个对象添加 name 方法
myFriend.name = function ()
{
return this.firstName + " " + this.lastName;
}; //同理,该方法也只有myFrient对象有
// 显示国籍
document.getElementById("demo").innerHTML = "My friend is " + myFriend.nationality;
</script>
</body>
</html>
4.为构造器添加属性和方法
function Person(first, last, age, eyecolor)
{
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = "English"; //新加属性
this.name = function() {return this.firstName + " " + this.lastName;}; //新加方法
}
PS:与向已有对象添加新方法不同,您无法为对象构造器添加新方法。必须在构造器函数内部向一个对象添加方法
5.内建 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 对象
PS:Math() 对象不再此列。Math 是全局对象。new 关键词不可用于 Math。