javascript学习笔记(十) js对象继承

175 阅读 0 评论 116 点赞

我是靠谱客的博主鲜艳鸵鸟，最近开发中收集的这篇文章主要介绍javascript学习笔记(十) js对象继承，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.原型链
//很少单独使用

复制代码代码如下:

 
View Code 
//定义 SuperClass类，有一个属性property和一个方法getSuperValue 
function SuperClass() { 
this.property = true; 
} 
SuperClass.prototype.getSuperValue = function() { 
return this.property; 
} 

//定义SubClass类，有一个属性subproperty和后来添加的一个方法getSubValue 
function SubClass() { 
this.subproperty = false; 
} 

//SubClass类继承SuperClass类 
SubClass.prototype = new SuperClass(); 

//SubClass类添加一个方法getSubValue 
SubClass.prototype.getSubValue = function() { 
return this.subproperty; 
} 

//创建SubClass类的实例 
var instance = new SubClass(); 
alert(instance.getSuperValue()); 

2. 确定原型与实例的关系
第一种方式用 instanceof 操作符，用来测试实例和原型链中出现过的构造函数

复制代码代码如下:

 
alert(instance instanceof Object); //true ，instance是Object的实例吗? 
alert(instance instanceof SuperClass); //true ，instance是SuperClass的实例吗? 
alert(instance instanceof SubClass); //true，instance是SubClass的实例吗? 

第二种方式用 isPrototypeOf()方法，测试原型链中出现的原型

复制代码代码如下:

 
alert(Object.prototype.isPrototypeOf(instance)); //true 
alert(SuperClass.prototype.isPrototypeOf(instance)); //true 
alert(SubClass.prototype.isPrototypeOf(instance)); //true 

3. 用原型链继承定义方法时的注意点
定义方法是的顺序：

复制代码代码如下:

 
View Code 
function SuperClass() { 
this.property = true; 
} 
SuperClass.prototype.getSuperValue = function() { 
return this.property; 
} 

function SubClass() { 
this.subproperty = false; 
} 

//SubClass继承SuperClass 
SubClass.prototype = new SuperClass(); //这个要先写，新添加的方法和重写超类的方法要写在后面，否则重写的超类方法将永远无法调用 

//添加新方法 
SubClass.prototype.getSubValue = function() { 
return this.subproperty; 
} 
//重写超类的方法 
SubClass.prototype.getSuperValue = function() { 
return false; 
} 
var instance = new SubClass(); 
alert(instance.getSuperValue()); //fales,这里SubClass的实例调用了SubClass的getSuperValue()方法，而屏蔽了SuperClass的getSuperValue()方法， 
//使用SuperClass的方法会调用SuperClass的getSuperValue()方法 

原型链继承的缺点：1）共享超类中的属性，2）在创建子类时不能向超类的构造函数传递参数。所有很少单独使用原型链

4.借用构造函数
//很少单独使用

优点：可以向超类传递参数。缺点：函数无法复用，所有类都要使用构造函数模式

复制代码代码如下:

 
View Code 
function SuperClass(name) { 
this.name = name; 
} 
function SubClass(){ 
SuperClass.call(this,"RuiLiang"); //继承了SuperClass,同时向SuperClass传递了参数 
this.age = 29; //实例属性 
} 

var instance = new SubClass(); 
alert(instance.name); //RuiLiang 
alert(instance.age); //29 

6.组合继承
//最常用的继承模式

复制代码代码如下:

 
View Code 
//创建SuperClass 
function SuperClass(name) { 
this.name = name; 
this.colors = ["red","blue","green"]; 
} 
SuperClass.prototype.sayName = function() { 
alert(this.name); 
} 

////创建SubClass 
function SubClass(name,age) { 
SuperClass.call(this,name); //继承属性 
this.age = age; //自己的属性 
} 

SubClass.prototype = new SuperClass(); //继承方法 
SubClass.prototype.sayAge = function() { //SubClass添加新方法 
alert(this.age); 
}; 

//使用 
var instance1 = new SubClass("RuiLiang",30); 
instance1.colors.push("black"); 
alert(instance1.colors); //"red,blue,green,black" 
instance1.sayName(); //"RuiLiang" 
instance1.sayAge(); //30 

var instance2 = new SubClass("XuZuNan",26); 
alert(instance2.colors); //"red,blue,green" 
instance2.sayName(); //"RuiLiang" 
instance2.sayAge(); //30 