JS基础继承(面向对象思想)

女爷i 2022-07-12 02:58 231阅读 0赞

# [javascript继承基础][javascript] #

标签： [javascript][javascript 1][class][][function][][prototype][][delete][][object][]

2008-02-07 20:12  472人阅读  [评论][Link 1](0)  收藏  [举报][Link 2]

![category_icon.jpg][]  分类：

javascript（5） ![arrow_triangle_20_down.jpg][]

/\*([JavaScript][]高级程序设计读书笔记)  
  javascript继承  
  author:shine  
\*/  
谁都知道封装，继承，多态是JAVA语言的三大性质，javascript虽然不是纯的JAVA语言，但它也有继承机制。

那么我们就来看看它是如何实现的吧。  
一、继承的方式。  
1、对象冒充：  
1）单继承的对象冒充：  
如：  
function Class1(name) \{  
  this.name = name;  
  this.sayHello = function() \{  
    alert("hello!"+this.name);  
  \}  
\}

function Class2(name,sal) \{  
  // 以下a.b.c三步就是对象冒充方式的核心代码  
  this.newMethod = Class1;  //a   
  this.newMethod(name);  //b  
  delete this.newMethod;  //c

this.sal = sal;  
  this.showSal = function() \{  
     alert(name+ "的工资是"+this.sal);  
  \};  
\}

var test = new Class2("yaoyao",10000);  
test.sayHello();  //output：hello!yaoyao  
test.showSal();  //output：yaoyao的工资为10000

小结：  
冒充对象方式：三步完成。  
a.用指针指向父类函数Class1。  
b.调用函数此指针的方法（有参数就传，没有就不传，但是一定要调用此方法），这就能使父类的方法

和属性成为子类的方法和属性。  
c.删除指针的引用。

2）多继承的对象冒充  
function Class1() \{  
  this.showClass1 = function() \{  
    alert("showClass1");  
  \}  
\}

function Class2() \{  
  this.showClass2 = function() \{  
    alert("showClass2");  
  \}  
\}

function Class3() \{  
  this.newMethod = Class1;  //继承Class1  
  this.newMethod();  
  delete this.newMethod;  
    
  this.newMethod = Class2;  //继承Class2  
  this.newMethod();  
  delete this.newMethod;  
\}

var test = new Class3();  
test.showClass1();  
test.showClass2();

小结：  
对象冒充实现多继承时有个问题，就是当Class1和Class2中的方法或属性有同名时，按照javascript的执

行顺序是后面的优先，也就是Class2优先。

总结：  
传统的对象冒充是以构造函数方式来声明类的。

2.call()方法。  
1）call的普通用法：  
如：  
function favoriteColor(name)\{  
  alert(this.color + "是" + name + "的最爱");  
\}

var obj = new Object();  
obj.color = "棕黄色";  
sayColor.call(obj,"yaoyao");  //output：深棕色是yaoyao的最爱。  
小结：  
a.方法名.call()  有两个参数，第一个参数是指在哪个对象里用该方法（即：用哪个对象的资源），第二个

参数就是该方法的参数列表。（有几个写几个）。  
b.call()方法并不是把方法放入某个指定的对象中，而是借用某个对象中的资源（如上例中的this.color）  
来调用这个方法。

2）call的经典用法  
如：  
function Class1(name) \{  
  this.name = name;  
  this.sayHello = function() \{  
    alert("hello!" + this.name);  
  \}  
\};

function Class2(name,sal) \{  
  //this.newMethod = Class1;    
  //this.newMethod(name);  
  //delete this.newMethod;  
  Class1.call(this,name);   //把三步简化为一步。  
    
  this.sal = sal;  
  this.showSal = function() \{  
    alert(this.name + "的工资："+this.sal);  
  \}  
\}

var test = new Class2("yaoyao",10000);  
test.sayHello();  //output：hello!yaoyao  
test.showSal();  //output：yaoyao的工资是10000

3.apply()方法。  
1）apply的普通用法：  
function favoriteColor(num,name) \{  
  alert("编号为"+num+"的同学"+name + "最喜欢的颜色是"+this.color);  
\}

var obj = new Object();  
obj.color = "棕黄色";  
favoriteColor.apply(obj,new Array("1","yaoyao"));  //output：编号为1的同学yaoyao最喜欢的颜色是棕黄色  
小结：  
apply方法唯一的不同就是以一种数组对象的形式来传参数，有人会问那不是还麻烦些么，有了call还要

apply干嘛，呵呵继续看下去，你就会知道啦。

2）apply的经典用法：  
function Class1(name) \{  
  this.name = name;  
  this.sayHello = function() \{  
    alert("hello!" + this.name);  
  \};  
\};

function Class2(name,sal) \{  
  //this.newMethod = Class1;    
  //this.newMethod(name);  
  //delete this.newMethod;  
  Class1.apply(this,arguments);  //没错就是用到arguments对象  
  this.sal = sal;  
  this.showSal = function() \{  
    alert(this.name + "的工资："+this.sal);  
  \};  
\};  
小结：  
看上去似乎apply加上arguments后，又比call强些，其实这里有“猫腻”，arguments是函数的参数列表对象

，如上例中的arguments指的是name，sal，那么Class1不是只要一个参数name么，没错，确实是传过

去了两个参数，但javascirpt并不做参数的检查，所以Class1会顺着取传过来的第一个参数，即name。  
由此看来，使用apply加arguments时，必须使两个函数的参数顺序相同。

4.原型链  
如果说上面的对象冒充，call，apply是以构造函数方式声明类，那么从名字上就应该猜到原型链自然是

以原型方式声明类。  
如：  
function Class1() \{\};  
Class1.prototype.color="red";  
Class1.prototype.showColor = function ()\{  
  alert(this.color);  
\};

function Class2() \{\};  
Class2.prototype = new Class1();  //关键在这里

var test = new Class2();  
test.showColor();  
小结：既然是原型方式，那么一样也存在着同样的问题，构造函数不能带参数。

5\* 继承中同名问题。  
1）  
function Class1() \{\};  
Class1.prototype.color="red";  
Class1.prototype.showColor = function ()\{  
  alert(this.color);  
\};

function Class2() \{\};  
Class2.prototype = new Class1(); //a  
Class2.prototype.color = "green";  //b  观察1) 2) 中a.b两句的顺序,和输出的结果  
var test = new Class2();  
test.showColor();  //output：green

2）  
function Class1() \{\};  
Class1.prototype.color="red";  
Class1.prototype.showColor = function ()\{  
  alert(this.color);  
\};

function Class2() \{\};  
Class2.prototype.color = "green";  //b  
Class2.prototype = new Class1();  //a  
var test = new Class2();  
test.showColor();  //output：red  
小结：  
你现在一定在思考为什么吧?  
a.在例1中的现象是因为javascirpt中是先查找该类中所有属性和方法，如果没找到，就找该类prototype中

的类（例1中的Class1）的属性和方法,如果还找不到，就找Class1中prototype中的类的属性和方法，如

此循环下去。  
b.在例2中的现象是因为所有函数的prototype都只有一个，既然a句在b句之后，所以a就把b中的同名方

法覆盖掉了。（例1从这个角度也可以解释）

6.混合方式  
可能有人猜得到这就是"构造函数/原型方式" 加上了“继承” ，使用“对象冒充”来继承属性，使用“原型链”来

继承方法。这样即能排除使用“对象冒充”带来的函数的多余定义，又能避免“原型链”带来的无法带入参数

的弊端。  
如：  
function Class1(color)\{  
  this.color = color;  
\}  
Class1.prototype.showColor = function ()\{  
  alert(this.color);  
\}

function Class2(color,name)\{  
  Class1.call(this,color);  .//用“对象冒充”继承属性  
  this.name = name;    
\}  
Class2.prototype = new Class1();  //用“原型链”继承方法  
Class2.prototype.showName = function() \{  
  alert(this.name);  
\}

var test = new Class2("red","yaoyao");  
test.showColor();  
test.showName();

[javascript]: http://blog.csdn.net/mynameisshine/article/details/2086451
[javascript 1]: http://www.csdn.net/tag/javascript
[class]: http://www.csdn.net/tag/class
[function]: http://www.csdn.net/tag/function
[prototype]: http://www.csdn.net/tag/prototype
[delete]: http://www.csdn.net/tag/delete
[object]: http://www.csdn.net/tag/object
[Link 1]: http://blog.csdn.net/mynameisshine/article/details/2086451#comments
[Link 2]: http://blog.csdn.net/mynameisshine/article/details/2086451#report
[category_icon.jpg]: /images/20220711/be1adbffbe72437e91b8ffc203a6765f.png
[arrow_triangle_20_down.jpg]: /images/20220711/41daa69d4ba84610942baa1205fa3a9d.png
[JavaScript]: http://lib.csdn.net/base/javascript