分析JavaScript中的原型鏈結構
1.原型鏈繼承
下面的案例使用了原型鏈繼承的方法，實現了Student 繼承 Person
/**1.父親構造器函式*/
function Person(name) {
}
/**2.子構造器函式*/
function Student() {
}
/**3.設計原型鏈繼承*/
Student.prototype=new Person();
/**4.修改原型物件中constructor屬性指向*/
Student.prototype.constructor=Student;
/**5.建立Student物件*/ 2.畫圖分析原型鏈結構
1.分析Student建構函式和其原型物件關係
1.從上圖可以看出student物件是通過Student構造器函式例項化的。
2.Student構造器函式的原型物件 和 student物件的原型是person物件
3.Student構造器函式的原型物件的構造器函式是Student構造器函式
2.分析Person建構函式和其原型物件關係
1.Student構造器函式的原型物件 是 person物件( 即 Student.prototype )
2.person物件( 即 Student.prototype )
Person構造器函式例項化的
3.控制檯輸出Person建構函式的原型物件
/**1.父親構造器函式*/
function Person(name) {
}
/**2.子構造器函式*/
function Student() {
}
/**3.設計原型鏈繼承*/
Student.prototype=new Person();
/**4.修改原型物件中constructor屬性指向*/
Student.prototype.constructor=Student;
/**5.建立Student物件*/
var 控制檯輸出：
4.分析Person建構函式的原型物件關係
1.Person構造器函式的原型物件 是object 物件( 即 Person.prototype )
2.object 物件( 即 Person.prototype )是 通過Object建構函式例項化出來
3.Object構造器函式的原型物件 和 object物件(即 Person.prototype) 的原型是Person.prototype_proto_物件( 其實這個也是一個object物件)
5.控制檯輸出Object建構函式的原型物件
/**1.父親構造器函式*/
function Person(name) {
}
/**2.子構造器函式*/
function Student() {
}
/**3.設計原型鏈繼承*/
Student.prototype=new Person();
/**4.修改原型物件中constructor屬性指向*/
Student.prototype.constructor=Student;
/**5.建立Student物件*/
var student=new Student();
// console.log(Student.prototype);//是person物件（通過Person例項化）
// console.log(Student.prototype.constructor);//是Student的建構函式
// console.log(Person.prototype);//是Object物件（通過Object例項化）
// console.log(Person.prototype.constructor);//是Person的建構函式
console.log(Object.prototype);//是Object物件（通過Object例項化）
console.log(Object.prototype.constructor);// 是Objectg建構函式
console.log(Object.prototype.__proto__);//null控制輸出：
6.分析Object建構函式的原型物件關係
1.Object建構函式的原型物件 是一個object物件( 即 Object.prototype)
2.object物件( 即 Object.prototype) 的constructor屬性的是Object建構函式
3.object物件( 即 Object.prototype) 是通過Object建構函式例項化出來的
4.object物件( 即 Object.prototype) 的原型的是null
思考：在js中函式也是物件, 那麼
Student構造器函式這個物件是誰例項化出來的 ?
7.檢視Student構造器函式這個物件
1.控制檯列印Student構造器函式這個物件相關的屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/**1.父親構造器函式*/
function Person(name) {
}
/**2.子構造器函式*/
function Student() {
}
/**3.設計原型鏈繼承*/
Student.prototype=new Person();
/**4.修改原型物件中constructor屬性指向*/
Student.prototype.constructor=Student;
/**5.建立Student物件*/
var student=new Student();
console.log(Student.constructor); // Student建構函式是一個物件，它的建構函式是Function: ƒunction Function(){ },所以 Student建構函式物件是通過Function建構函式例項化的
console.log(Student.__proto__); // 是一個空函式: ƒunction () { }
console.log(Function.prototype); // 是一個空函式: ƒunction () { }
</script>
</body>
</html>2.控制檯 輸出：
8.分析Student構造器函式這個物件的關係
1.Student構造器函式也是一個物件
2.Student構造器函式這個物件是通過Function建構函式例項化出來的
3.Student構造器函式這個物件 的構造器是Function建構函式
4.Student構造器函式這個物件 的 ._proto_是一個空函式
5.Function建構函式 的原型物件是空函式
9.檢視空函式這個物件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/**1.父親構造器函式*/
function Person(name) {
}
/**2.子構造器函式*/
function Student() {
}
/**3.設計原型鏈繼承*/
Student.prototype=new Person();
/**4.修改原型物件中constructor屬性指向*/
Student.prototype.constructor=Student;
/**5.建立Student物件*/
var student=new Student();
console.log(Function.prototype.constructor); // 空函式Function.prototype也是一個物件，這個物件是通過誰建立的?通過Function建構函式
console.log(Function.prototype.__proto__);// 空函式也是一個物件，這個物件的原型是誰? 是 object物件
console.log(Function.prototype.__proto__ === Object.prototype);//空函式的原型物件是Object的原型物件
</script>
</body>
</html>檢視控制檯輸出：
10.分析空函式這個物件的關係
1.空函式也是一個物件
2.空函式這個物件的構造器函式是 Function構造器函式，所以空函式物件也是通過Function建構函式例項化出來的 .
3.空函式這個物件 的原型._proto_ 是 Object構造器函式的原型物件
思考：Function建構函式也是一個物件？ 那麼Function是誰例項化的? 它的
._proto_物件是？
11.檢視Function建構函式這個物件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/**1.父親構造器函式*/
function Person(name) {
}
/**2.子構造器函式*/
function Student() {
}
/**3.設計原型鏈繼承*/
Student.prototype=new Person();
/**4.修改原型物件中constructor屬性指向*/
Student.prototype.constructor=Student;
/**5.建立Student物件*/
var student=new Student();
console.log(Function.constructor);//Function也是一個物件,是誰例項化?是Function建構函式
console.log(Function.__proto__); // 是空函式: function(){}
</script>
</body>
</html>控制檯輸出結果：
12.分析Function建構函式這個物件關係
1.Function構造器函式也是一個物件
2.Function構造器函式這個物件 的構造器函式是自身 Function構造器函式
3.Function構造器函式這個物件的原型._proto_ 是 空函式
結論：所有的物件都是繼承Object物件。