js对象继承的方式-三种 +三种

一、原型链继承

每个构造函数都有一个原型对象,原型对象中都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。当原型对象等于另外一个类型的实例即继承。

缺点:如果某一个构造函数实例对象修改了原型对象上的属性值和方法,则也会影响其他实例对象

//定义父构造函数类型
	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
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值