JS继承 笔记

 更新时间:2011年07月13日 23:41:56   作者:  
JavaScript中没有类的概念,与类相关的继承的概念更是无从谈起,但是我们可以通过特殊的语法来模拟面向对象语言中的继承。
JS继承
JavaScript中没有类的概念,与类相关的继承的概念更是无从谈起,但是我们可以通过特殊的语法来

模拟面向对象语言中的继承。
在JS中模拟继承有多种方式,其中寄生组合模式是一种比较容易简单的模拟继承模式,下面我们就来

介绍一下用寄生组合模式模拟继承。
JS的继承包括属性的继承和方法的继承,他们分别通过不同的方法来实现。
1属性的继承
属性的继承通过改变函数的执行环境来实现的。而改变函数的执行环境可以使用call()和apply()两种

方法来实现。
我们首先创建一个Animal“类”(因为JS中没有类的概念,这里只是一个模拟,它实际上只是一个

Function函数对象)。
复制代码 代码如下:

   function Animal(name){
   this.name=name;
  }

再创建一个Lion“类”,“继承”于Animal
复制代码 代码如下:

  function Lion(){
   Animal.apply(this, ["狮子"]);
   }

这里使用了Animal的apply方法,把Animal的执行环境改成Lion被调用时的执行环境。
这里要解释一下,我们要想使用Lion这个“类”,通常需要new一个Lion。如:
       var l = new Lion();
而new关键字是十分伟大的,在上段代码中,new关键字完成了以下几项工作:
   1)开辟堆空间,以准备存储Lion对象
  2)修改Lion对象本身的执行环境,使得Lion函数的this指向了Lion函数对象本身。
  3)调用Lion“类”的“构造函数”,创建Lion对象
  4)将Lion函数对象的堆地址赋值给变量l,这个时候l就指向了这个Lion函数对象
所以经过new关键字以后Animal.apply(this, ["狮子"])中的this已经指向了Lion函数对象本身了,所

以这段代码就将Animal函数的执行环境改变成了Lion函数中,相当于以下代码:
复制代码 代码如下:

  function Lion(){
  function Animal(name){
  this.name=name;
   }
  }

而此时的this已经是Lion函数对象了所以上段代码进一步相当于:
复制代码 代码如下:

  function Lion(){
   this.name=name;
  }

这样就给Lion函数对象添加了name属性,也模拟了Lion函数继承于Animal函数的效果。
2方法的继承
在JS中每一个“类”(即函数,注意不是函数对象)都有一个prototype属性,prototype表示该函数

的原型,也表示一个类的成员的集合(通常是方法的集合)。我们可以通过函数的prototype属性来实现方

法的继承。
我们同样首先创建一个Animal“类”:
复制代码 代码如下:

   function Animal(name){
  this.name=name;
  }

给Animal的原型中加入一个eat方法:
复制代码 代码如下:

  Animal.prototype.eat=function(){
   alter("我能吃!~");
  }

创建一个Lion“类”,同时完成对Animal“类”的属性的继承
复制代码 代码如下:

   function Lion(){
Animal.apply(this, ["狮子"]);
  }

注意下面的代码,我们马上要完成方法的继承了
Lion.prototype=new Animal();
这样就把一个Animal函数对象储存在了Lion的原型中了,Lion也就包含了Animal中的方法了(其实也

包含了属性)。这样就模拟了Lion函数对Animal的继承。

相关文章

  • 再谈javascript面向对象编程

    再谈javascript面向对象编程

    虽有陈皓《Javascript 面向对象编程》珠玉在前,但是我还是忍不住再画蛇添足的补上一篇文章,主要是因为javascript这门语言魅力
    2012-03-03
  • JavaScript的面向对象方法以及差别

    JavaScript的面向对象方法以及差别

    JS作为一种动态语言,在语法上有相当大的自由度,所以造成了一种功能,有N种写法的局面。 在JS中实现OOP,一般来说有两种方法:
    2008-03-03
  • 从面试题学习Javascript 面向对象(创建对象)

    从面试题学习Javascript 面向对象(创建对象)

    从面试题学习Javascript 面向对象(创建对象),学习js的朋友可以参考下
    2012-03-03
  • JavaScript中的面向对象介绍

    JavaScript中的面向对象介绍

    在JavaScript,可以说everything is object,那么什么是对象?对象就是包含一组变量和函数的集合。在其它面向对象语言中对象是由类的实例化而来,JavaScript是基于原型的面向对象语言,没有类的概念,对象派生自现有对象的副本
    2012-06-06
  • javascript 面向对象全新理练之数据的封装

    javascript 面向对象全新理练之数据的封装

    JavaScript 是一种非常灵活的面向对象程序设计语言,它与传统的强类型的面向对象程序设计语言(如 C++,Java,C# 等)有很大不同,所以要实现如 C++、java、C# 当中的一些特性就需要换一种思考方式来解决。
    2009-12-12
  • JavaScript 面向对象编程(1) 基础

    JavaScript 面向对象编程(1) 基础

    自从有了Ajax这个概念,JavaScript作为Ajax的利器,其作用一路飙升。JavaScript最基本的使用,以及语法、浏览器对象等等东东在这里就不累赘了。把主要篇幅放在如何实现JavaScript的面向对象编程方面。
    2010-05-05
  • javascript Base类 包含基本的方法

    javascript Base类 包含基本的方法

    一个Base类,包含基本的方法,大家可以在这个基础上拓展下功能。
    2009-07-07
  • 关于js类的定义

    关于js类的定义

    这两天帮同学做秒杀网,打算将前台和后台彻底分离,仅用ajax通信。这样就免不了大量的使用javascript,于是发现,js果然是难学难用。
    2011-06-06
  • javascript new后的constructor属性

    javascript new后的constructor属性

    new后的constructor属性使用说明,需要的朋友可以参考下。
    2010-08-08
  • javscript对象原型的一些看法

    javscript对象原型的一些看法

    javscript对象原型的小技巧。学习js面向对象的朋友可以参考下。
    2010-09-09

最新评论