JavaScript 对象原型
JavaScript基础 2022-04-25 01:49:58小码哥的IT人生shichen
JavaScript 对象原型
所有 JavaScript 对象都从原型继承属性和方法。
在前一章里，我们学到了如何使用对象构造器：
示例代码：
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
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>
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
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
我们已经认识到，您无法为已有的对象构造器添加新属性：
示例代码：
Person.nationality = "English";
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象</h1>
<p>您不能将新属性添加到构造函数。</p>
<p id="demo"></p>
<script>
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
Person.nationality = "English";
var myFriend = new Person("Bill", "Gates", 62, "blue");
var myBrother = new Person("Steve", "Jobs", 48, "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>
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.nationality = "English";
}
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 + ". The nationality of my brother is " + myBrother.nationality;
</script>
</body>
</html>
运行结果：
Javascript 对象 The nationality of my friend is English. The nationality of my brother is English
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
原型继承
所有 JavaScript 对象都从原型继承属性和方法。
日期对象继承自 Date.prototype。数组对象继承自 Array.prototype。Person 对象继承自 Person.prototype。
Object.prototype 位于原型继承链的顶端：
日期对象、数组对象和 Person 对象都继承自 Object.prototype。
向对象添加属性和方法
有时，您希望向所有给定类型的已有对象添加新属性（或方法）。
有时，您希望向对象构造器添加新属性（或方法）。
使用 prototype 属性
JavaScript prototype 属性允许您为对象构造器添加新属性：
示例代码：
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象</h1>
<p id="demo"></p>
<script>
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
Person.prototype.nationality = "English";
var myFriend = new Person("Bill", "Gates", 62, "blue");
document.getElementById("demo").innerHTML =
"The nationality of my friend is " + myFriend.nationality;
</script>
</body>
</html>
运行结果：
Javascript 对象 The nationality of my friend is English
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript prototype 属性也允许您为对象构造器添加新方法：
示例代码：
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
return this.firstName + " " + this.lastName;
};
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象</h1>
<p id="demo"></p>
<script>
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
Person.prototype.name = function() {
return this.firstName + " " + this.lastName
};
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
请只修改您自己的原型。绝不要修改标准 JavaScript 对象的原型。
