关键字‘继承’的相关文章

javascript设计模式学习笔记之“类式继承”

在做一件事情之前，首先要清楚做这件事情的好处有什么，相信不会有哪个人愿意无缘无故的去做事情。一般说来，我们在设计类的时候，实际上就是希望能减少重复性的代码，使用继承可以完美的做到这一点，借助继承机制，你可以在现有类的基础上再次进行设计并且充分利用它们已经具备的各种方法，而对设计的修改也更为轻松。废话不多说了，举例说明：

  1. function Person(name){
  2.     this.name = name;
  3. }
  4. Person.prototype.getname = function(){
  5.     return this.name;
  6. }
  7.  
  8. function Bloger(name,blog){
  9.     Person.call(this,name);
  10.     this.blog = blog;
  11. }
  12. var bloger = new Bloger("zhenn","http://www.men-ideal.com");
  13. alert(bloger.name=="zhenn");   /*返回ture*/
  14. alert(bloger.blog)   /*提示http://www.men-ideal.com*/
  15. alert(bloger.getname()=="zhenn");   /*提示"bloger.getname is not a function"*/

通过上例可以看到，Bloger在其内部通过call动态调用了其父类Person的原生属性和方法（关于call的讲解请参考），即可以理解为Bloger继承了Person，成为它的一个子类，但是细心的同学会发现，Person原型对象中的方法，仅仅依靠call，是不能继承过来的，这也就是会提示”bloger.getname is not a function”的原因所在了。不过不用担心，对上述代码稍作处理，即可解决这个问题！

  1. function Person(name){
  2.     this.name = name;
  3. }
  4. Person.prototype.getname = function(){
  5.     return this.name;
  6. }
  7.  
  8. function Bloger(name,blog){
  9.     Person.call(this,name);
  10.     this.blog = blog;
  11. }
  12. /*请注意以下两行代码*/
  13. Bloger.prototype = new Person();  
  14. Bloger.prototype.constructor = Bloger;
  15.  
  16. var bloger = new Bloger("zhenn","http://www.men-ideal.com");
  17. alert(bloger.name=="zhenn");   /*返回ture*/
  18. alert(bloger.blog)   /*提示http://www.men-ideal.com*/
  19. alert(bloger.getname()=="zhenn");   /*提示true*/

在这里需要对这两行代码解释一下，我们知道，每一个构造函数都有一个prototype属性，这个属性指向该构造函数的原型对象，其实原型对象也是实例对象，只不过在原型对象中定义的属性和方法可以提供给所有的实例对象共享，由此可以得出，新添加两行代码的意图就是设置子类的原型对象指向父类的一个实例化对象，而父类的实例化对象会把父类的原型属性方法统统继承过来，这样也就达到了我们的目的，子类的原型继承了所有父类实例对象具有的属性和方法。

但是还应该注意Bloger.prototype.constructor = Bloger;这行代码，因为把子类的prototype设置为父类的实例时，其constructor属性会指向父类，所以要设置子类原型的constructor重新指向子类，至此，已经完美实现了javascript的类式继承！

为了简化子类的声明，可以把扩展子类的整个过程写在一个名为extend的函数中，作用就是基于一个给定的类结构去创建一个新的类：

  1. function extend(childClass,parentClass){
  2.     var F = new Function();
  3.     F.prototype = parentClass.prototype;
  4.     childClass.prototype = new F();
  5.     childClass.prototype.constructor = childClass;
  6. }

有了这个extend这个函数，就可以很方便的扩展子类了，只需调用这个函数即可，上述添加的两行代码可改为extend(Bloger,Person), 一样可以实现完全继承！

标签：, 发布在 javascript | 一条评论 »

神奇的call()

先看看关于call()的官方解释，“调用一个对象的一个方法，以另一个对象替换当前对象。”，看了这样的解释，或许让你更摸不着头脑了。看例子：

  1. var x = "我是全局变量";　　　　//定义全局变量x
  2. function a(){　　　　　　　　　//定义函数类结构a　　
  3.     this.x = "我是在函数类结构a中声明的哦";   
  4. }
  5. //定义普通函数，弹出当前指针所包含的变量x的值
  6. function f(){      
  7.     alert (this.x);
  8. }
  9. //返回值为“我是在函数类结构a中声明的哦”
  10. f.call(new a());

我的理解是，f.call(new a())就是把函数（其实也是对象）f复制到被调用对象“new a()”下面去解析，事实上和下面这段代码的解析结果一样：

  1. function a(){
  2. 　　this.x = "我是在函数类结构a中声明的哦";
  3. 　　alert(this.x);   
  4. }
  5. a();

只不过此时变量X的作用域不同而已，咿…看起来好像有点继承的味道哦，难道不是吗？在上例中,f完全被构造函数a的实力对象继承了，如果说这还不足以说明a.call(b)是一种继承模式，那么再看一个更具有继承味道的用法吧。

  1. function f(){   
  2.     this.a ="a";   
  3.     this.b = function(){   
  4.         alert("b");
  5.     }
  6. }
  7. function e(){   
  8.     f.call(this);    
  9. }
  10. var c = new e();
  11. alert(c.a);  //弹出a
  12. c.b();    //弹出b

在这个例子中，只要会使用浏览器的朋友，都能看得出来e完全继承了f的属性和方法，否则是无法解释的，因为在e中并没有定义属性a和b，那么按常理推断在e的实例对象c中，并不会出现这两个属性。

标签：, 发布在 javascript | 没有评论 »