一、原型链继承
每个构造函数都有一个原型对象,原型对象中都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。当原型对象等于另外一个类型的实例即继承。
缺点:如果某一个构造函数实例对象修改了原型对象上的属性值和方法,则也会影响其他实例对象
//定义父构造函数类型
function Animal(){
this.name = "animal"
}
Animal.prototype = {
sayName : function(){
console.log(this.name);
}
}
//定义子类类型
function Dog(){
this.color = "灰色"
}
//通过将子对象的原型对象指向父对象的一个实例来完成继承
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;
子构造函数的原型指向父构造函数的实例
子构造函数Dog的原型指向父构造函数Animal的实例
Dog.prototype = new Animal();//嫁给有钱人家的孩子
Dog.prototype.constructor = Dog;//建立起夫妻关系
二、经典继承
也称 "伪造对象" 或 ”借用构造函数",在子类型构造函数的内部调用超类型构造函数。函数不过是在特定环境中执行代码的对象,因此通过apply(),call()方法可以在(将来)新建对象上执行构造函数,即在子类型对象上执行父类型函数中定义的所有对象初始化的代码。结果每个子类实例中都具有了父类型中的属性以及方法
function Animal(name){
this.name = name;
this.colors = ["red","gray"];
}
function Dog(name){
//继承了Animal
Animal.call(this,name);
this.color = "gray";
}
Animal.prototype.sayName = function(){
alert(this.name);
}
三、组合函数(原型链继承+经典继承)
组合函数(原型链继承+经典继承)
也称“伪经典继承”,将原型链和借用构造函数的技术组合在一起。原理是:使用原型链实现对原型属性和方法的继承,而通过借用构造函数实现对实例属性的继承。
function Animal(name){
this.name = name;
this.colors = ["red","gray"];
}
function Dog(name){
//经典继承,继承了Animal(属性)
Animal.call(this,name);
this.color = "gray";
}
Animal.prototype.sayName = function(){
alert(this.name);
}
//原型链继承,继承了方法
Dog.prototype = new Animal();
Dog.prototype.constructor = Animal;
原理是:使用原型链实现对原型属性和方法的继承,而通过借用构造函数实现对实例属性的继承
实例:
// 1、原型链的继承
function Dog2() {}
// 在prototype中定义的属性和方法,所有的实例都共享
Dog2.prototype.name = 'xiaobai';
Dog2.prototype.age = 2;
Dog2.prototype.sayName = function() {
console.log(this.name);
}
// 原型链继承的操作
function Dog_son() {}
Dog_son.prototype = new Dog2(); //当原型对象等于另外一个类型的实例即继承。
Dog_son.prototype.constructor = Dog_son(); //这样是为了使Dog_son的构造函数变为原来的,重新指定一下
var d1 = new Dog_son();
console.log(d1);
d1.sayName();
// -------------------------------
// 2、经典继承(伪继承)
console.log('经典继承')
function Animal(name, age) {
this.name = name;
this.age = age;
}
function Dog(name, age, color) {
Animal.call(this, name, age); //经典继承,好熟悉
this.color = color;
}
var dl = new Dog('小白', '2', 'white');
console.log(d1);
// ------------------------------------
// 3.组合模式
// 原型链加借用构造函数
function Animal_1(name, age) {
this.name = name;
this.age = age;
}
Animal_1.prototype.sayName = function() {
console.log(this.name);
}
function Dog(name, age, color) {
Animal.call(this, name, age);
this.color = color;
}
Dog.prototype = new Animal_1(); //当原型对象等于另外一个类型的实例
Dog.prototype.constructor = Dog; //将构造函数设置回来
Dog.prototype.sayColor = function() {
console.log(this.color);
}
eg深入理解
// 父类
function Father(name) {
// 属性
this.name = name || 'father',
// 实例方法
this.sleep = function() {
console.log(this.name + "正在睡觉");
}
}
// 原型方法
Father.prototype.look = function(book) {
console.log(this.name + "正在看:" + book);
}
// --------------------------------------------
// 1.原型继承
// 核心:将父类的实例作为子类的原型(并不是把父类中的属性和方法克隆一份一模一样的给子类,而是让子类父类之间增加了原型链接)
// 特点:父类中私有的和公有的都继承到了子类原型上(子类公有的)
// 缺点:如果某一个构造函数实例对象修改了原型对象上的属性值和方法,则也会影响其他实例对象
function Son() {}
Son.prototype = new Father(); //相当于重写了Son的原型
Son.prototype.constructor = Son; //重写原型后把Son原型上的constructor重新指向Son
var son = new Son();
son.sleep() //---------father正在睡觉
son.look('TV') //-------------father正在看:TV
console.log(son) //----------------Son {} 【原型链继承并不是克隆一份】
console.log(Father.prototype.isPrototypeOf(son)) //----------true【在原型链上面】
console.log(son instanceof Son) //---------true
console.log(son instanceof Father) //-------true
// ----------------------------------------------
// 2.借用构造继承,call继承 【不能继承原型链的方法】
// 核心:使用父类的构造函数来增强子类实例
// 特点:把父类私有的属性和方法,克隆一份一样的给子类私有的属性,Father执行的时候,把Father的中的this换成Son的实例,由于并不是new Father,所以Father.prototype上的属性无关
// 缺点:但没有原型,则复用无从谈起
function Son2() {
Father.call(this);
// 可以加参数
}
var son2 = new Son2();
son2.sleep(); //--------father正在睡觉
// son2.look('TV');-------没有原型链的方法,会报错
console.log(son2) //----------Son2 { name: 'father', sleep: [Function (anonymous)] } 【不能继承原型链上的方法,所以没有原型链方法】
console.log(Father.prototype.isPrototypeOf(son2)) //-----------false 【原型链还是】
console.log(son2 instanceof Son2) //----------------------------true
console.log(son2 instance