一、本課目標(biāo)
- 理解什么是原型鏈并且會使用對象繼承，會畫原型鏈圖
二、繼承
- 原型鏈
- 對象繼承
2.1原型鏈
image.png
一個原型對象是另一個原型對象的示例：
Man.prototype = new Human();示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function Human() {
this.foot = 2;
}
Human.prototype.getFoot = function() {
return this.foot;
}
function Man() {
this.head = 1;
}
Man.prototype = new Human();
Man.prototype.getHead = function() {
return this.head;
}
var man1 = new Man();
alert(man1.getFoot());
alert(man1.getHead());
alert(man1 instanceof Man);
alert(man1 instanceof Human);
</script>
</body>
</html>
2.2Object
Object被所有的所有構(gòu)造函數(shù)繼承
2.3對象繼承
示例代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function Human() {
this.clothing = ["a", "b", "c"];
}
function Man() {
this.head = 1;
}
Man.prototype = new Human();
var man1 = new Man();
var man2 = new Man();
man1.clothing.push("d");
alert(man1.clothing);
alert(man2.clothing);
</script>
</body>
</html>
運(yùn)行結(jié)果：
兩個man對象輸出的值都一樣。
分析：1、一樣的原因是：因?yàn)槲覀儗?yīng)的這個Man構(gòu)造函數(shù)是把所有的屬性和方法共享，所以在使用的時候會把數(shù)組當(dāng)中對應(yīng)的一些信息做了一個共享。
2、在創(chuàng)建子類型的實(shí)例時，不能向父類型的構(gòu)造函數(shù)中傳遞參數(shù)
2.4借用構(gòu)造函數(shù)
image.png
示例代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function Human() {
this.clothing = ["a", "b", "c"];
}
function Man() {
Human.call(this);
}
var man1 = new Man();
var man2 = new Man();
man1.clothing.push("d");
alert(man1.clothing);
alert(man2.clothing);
</script>
</body>
</html>
借用構(gòu)造函數(shù)的一個最大優(yōu)勢在于可以在子類構(gòu)造函數(shù)中向父類型構(gòu)造函數(shù)傳遞參數(shù)。
示例：
image.png
示例代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function Human(name) {
this.name = name;
}
function Man() {
Human.call(this, "Tom");
this.age = "38";
}
var man1 = new Man();
alert(man1.name);
alert(man1.age);
</script>
</body>
</html>
2.5組合繼承
image.png
示例代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function Human(name) {
this.name = name;
}
Human.prototype.getName = function() {
return this.name;
}
function Man() {
Human.call(this, "Tom");
this.age = "38";
}
Man.prototype = new Human();
Man.prototype.getAge = function() {
return this.age;
}
Man.prototype.getName = function() {//方法重寫
return false;
}
var man1 = new Man();
alert(man1.getName());
alert(man1.getAge());
</script>
</body>
</html>
