Code前端首页关于Code前端联系我们

继承人

terry 2年前 (2023-09-08) 阅读数 162 #Vue
//父类构造函数
function Person(name){
    this.name = name;
    this.sum = function(){
        alert(this.name)
    }
}

//原型上的属性和方法
Person.prototype.age = 10;
 

1。原型链继承(函数原型指向另一个函数的实例)

  • 可以继承构造函数的属性和方法,
  • 还可以继承原型链上的属性和方法
  • 实例化子类无法向父类传递参数
//原型链继承
function Per(){
   
}
Per.prototype = new Person();//可以传参,不实用
var per1 = new Per()//不能传参给 Person
 

2.构造函数继承(模拟对象来实现继承)

  • 只能继承构造函数上的属性和方法(原型上不能继承)
  • 实例化子类可以向父类传递参数
//借用构造函数继承
function Con(){
    //只可以拿到Person里面的属性和方法
    //没有new Person()实例,所以不能继承原型上的方法
    Person.call(this,"jer");
    this.age = 12;
}
var con1 = new Con();
console.log(con1.name);//jer
console.log(con1.age);//12
console.log(con1 instanceof Person);//false
 

3。组合继承(组合原型链继承和借用构造函数继承)(常用)

  • 可以从构造函数继承属性和方法,也可以继承原型链上的属性和方法。
  • 实例化子类可以向父类传递参数
  • 父类构造函数被调用两次,消耗内存

//结合原型链和构造函数继承

function SubType(name){
    Person.call(this,name);//借用构造函数模式}

//SubType.prototype = Person.prototype ;//原型链继承
SubType.prototype = new Person();//原型链继承

var sub = new SubType("gar");  //传递参数
console.log(sub.name);//gar 继承了构造函数属性
console.log(sub.age);//10 继承了父类原型的属性
 

4。原型式的继任者

  • 所有实例都继承prototype的属性
  • 无法实现重复利用。 (稍后会添加新的实例属性)
//先封装一个函数容器,用来输出对象和承载继承的原型
function content(obj){
    function F(){};
    F.prototype = obj;//继承了传入的参数
    return new F();
}
var sup = new Person();//拿到父类的实例
var sup1 = content(sup);
console.log(sup1.age);// 10 继承了父类函数的属性
 

5。寄生遗传

  • 正式继承给原型加上了外壳
  • 不可重复使用
function content(obj){
    function F(){};
    F.prototype = obj;//继承了传入的参数
    return new F();//返回函数对象
}
var sup = new Person();
//以上是原型是继承,给原型是继承再套一个壳子传递参数
function subobject(obj){
    var sub = content(obj);
    sub.name = "gar";
    return sub;
}
var sup2 = subobject(sup);
//这个函数经过声明之后就成了可增添属性的对象
console.log(typeof subobject);//function 
console.log(typeof sup2);//object
console.log(sup2.name);//gar,返回了一个sub对象,继承了sub的属性
 

6.寄生联合遗传(一般使用)

//寄生
function content(obj){
    function F(){};
    F.prototype = obj;
    return new F();
}
//con实例(F实例)的原型 继承了父类函数的原型
var con = content(Person.prototype);

//继承了父类构造函数中的属性和方法
function Sub(){
    Person.call(this);
}

//继承了con实例
Sub.prototype = con;

//再将con的构造函数指向Sub
con.constructor = Sub;

//sub的实例就继承了构造函数属性,父类实例con的函数属性
var sub1 = new Sub();
console.log(sub1.age);//10;
 

//上述和以下例子的效果是一样的
function F(){};
F.prototype = Person.prototype;
function Sub(){
    Person.call(this);
}
Sub.prototype = new F();
var sub2 = new Sub();
console.log(sub2.age);
 

    
  

版权声明

本文仅代表作者观点,不代表Code前端网立场。
本文系作者Code前端网发表,如需转载,请注明页面地址。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门