1.原型链继承
下面的案例使用了原型链继承的方法,实现了Student 继承 Person
/**1.父亲构造器函数*/
function Person(name) {
}
/**2.子构造器函数*/
function Student() {
}
/**3.设计原型链继承*/
Student.prototype=new Person();
/**4.修改原型对象中constructor属性指向*/
Student.prototype.constructor=Student;
/**5.创建Student对象*/
var student=new 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 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的构造函数
控制台输出:
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对象。