javascript原型继承（1）

系统管理员 2022-06-03 05:48 175阅读 0赞

我们都知道构造函数、原型和实例之间的关系，如果我们让原型对象等于另一个类型的实例，结果会怎么样呢？显然此时的原型对象将包含一个指向另一个原型的指针，相应的另一个原型中也包含着一个指向另一个构造函数的指针

原型链

利用原型让一个引用类型继承另外一个引用类型的属性和方法

构造函数、原型对象和实例对象之间的关系：

构造函数.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();