javascript原型继承(1)
2017-12-20 08:15
239 查看
我们都知道构造函数、原型和实例之间的关系,如果我们让原型对象等于另一个类型的实例,结果会怎么样呢?显然此时的原型对象将包含一个指向另一个原型的指针,相应的另一个原型中也包含着一个指向另一个构造函数的指针
原型链
利用原型让一个引用类型继承另外一个引用类型的属性和方法
构造函数、原型对象和实例对象之间的关系:
构造函数.prototype = 原型对象 原型对象.constructor = 构造函数(模版) 原型对象.isPrototypeOf(实例对象) 判断实例对象的原型 是不是当前对象 构造函数 实例对象 (类和实例)
// 父类构造函数 sup
function Sup(name){
this.name = name;
}
// 父类的原型对象
Sup.prototype = {
constructor : Sup ,
sayName : function(){
alert(this.name);
}
};
// 子类构造函数 sub
function Sub(age){
this.age = age ;
}
//如果我们让子类的原型对象 等于父类的实例 ,结果会怎么样呢?(实现了js的继承)
//1 显然此时的原型对象将包含一个指向另一个原型的指针
// sup的实例对象 和 sup的原型对象 有一个关系
//2 相应的另一个原型中也包含着一个指向另一个构造函数的指针
// 子类的原型对象的构造器变成了 父类的构造器
Sub.prototype = new Sup(‘张三’);
//alert(Sub.prototype.constructor);
var sub1 = new Sub();
//alert(sub1.name);
sub1.sayName();
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 也就是子类的原型对象指向的是父类实例对象,这个父类实例对象和父类的原型对象也是有关系的(isPrototypeOf),因此子类实例对象可以通过这种继承直接使用父类原型对象中的属性和方法,同样构造方法内的一样可以直接使用。实例对象并没有.prototype的方法
原型继承
原型继承的特点:即继承了父类的模版,又继承了 父类的原型对象
// 父类
function Person(name, age){
this.name = name ;
this.age = age ;
}
// 父类的原型对象属性
Person.prototype.id = 10 ;
// 子类
function Boy(sex){
this.sex = sex ;
}
//继承已经实现了
Boy.prototype = new Person(‘z3’);
var b = new Boy();
alert(b.name); //z3
alert(b.id); //10
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 这种方式的问题就是每次产生实例对象必须将需要的参数放到父类构造方法中来调用
类继承
类继承的特点:借用构造函数的方式继承。只继承模版,不继承原型对象
// 父类
function Person(name, age){
this.name = name ;
this.age = age ;
}
// 父类的原型对象属性
Person.prototype.id = 10 ;
// 子类
function Boy(name , age , sex){
// call apply
Person.call(this,name,age);
this.sex = sex ;
}
var b = new Boy(‘张三’ , 20 , ‘男’);
//alert(b.name); //张三
//alert(b.age); //20
//alert(b.sex); //男
//alert(b.id); //父类的原型对象并没有继承
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 这种方式的继承并没有将父类中的原型对象的属性与方法继承过来
混合继承
混合继承的特点:原型继承+借用构造函数继承
// 父类
function Person(name, age){
this.name = name ;
this.age = age ;
}
// 父类的原型对象属性
Person.prototype.id = 10 ;
Person.prototype.sayName = function(){alert(this.name);};
// 子类
function Boy(name , age , sex){
// call apply
Person.call(this,name,age); // 1 借用构造函数继承 继承父类的模版
this.sex = sex ;
}
// 2 原型继承
// 只剩下 父类的实例 和 父类的原型对象的关系了
Boy.prototype = new Person(); //继承父类的原型对象
var b = new Boy(‘李四’ , 20 , ‘男’);
alert(b.name);
alert(b.sex);
b.sayName();
相关文章推荐
- Javascript 原型和继承(Prototypes and Inheritance)
- 深入理解javascript原型和闭包(6)——继承
- 浅谈javascript的原型继承
- javascript 原型继承 extend
- JavaScript 原型 继承
- javascript模拟实现继承,继承一次父类模板和原型对象
- Effective Javascript 阅读笔记(6)-Javascript 原型链继承
- 深入浅出理解Javascript原型概念以及继承机制
- JavaScript中的原型和继承
- JavaScript面向对象——深入理解原型继承
- 深入javascript面向对象,js的原型链、继承
- 面向对象的Javascript - 通过原型(Prototype)实现继承
- JavaScript原型继承
- JavaScript 原型继承
- Javascript继承(原型链)
- 一张图道尽Javascript的原型继承
- javascript的原型和继承
- JavaScript中继承(一)-- 原型链
- JavaScript原型、函数伪装(apply,call)、继承
- 明白JavaScript原型链和JavaScrip继承