JS继承 笔记

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的继承。

赞 (0)

相关推荐

  • 不错的一篇关于javascript-prototype继承

    1.最基本的用法 把ClassA的一个实例赋值给ClassB, ClassB就继承了ClassA的所有属性. 代码入下: function ClassA() { this.a='a'; } function ClassB() { this.b='b'; } ClassB.prototype=new ClassA(); var objB=new ClassB(); for(var p in objB)document.write(p+" "); [Ctrl+A 全选 注:如需引入外部Js

  • 前端开发必须知道的JS之原型和继承

    一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一个对象,即原型对象,也简称原型.这个函数包括构造函数和普通函数,我们讲的更多是构造函数的原型,但是也不能否定普通函数也有原型.譬如普通函数: 复制代码 代码如下: function F(){ alert(F.prototype instanceof Object) //true; } 构造函数,也即构造对象.首先了解下通过构造函数实例化对象的过程. 复制代码 代码如下: function A(x){ this.x

  • js的2种继承方式详解

    js的2种继承方式详解

    js中继承可以分为两种:对象冒充和原型链方式 一.对象冒充包括三种:临时属性方式.call()及apply()方式1.临时属性方式 复制代码 代码如下: function Person(name){     this.name = name;     this.say = function(){          alert('My name is '+this.name);     }}function F2E(name,id){     this.temp = Person;     thi

  • Javascript 继承机制的实现

    Javascript 继承机制的实现

    选定基类后,就可以创建它的子类了.是否使用基类完全由你决定.有时,你可能想创建一个不能直接使用的基类,它只是用于给子类提供通用的函数.在这种情况下,基类被看作抽象类. 尽管ECMAScript并没有像其他语言那样严格地定义抽象类,但有时它的确会创建一些不允许使用的类.通常,我们称这种类为抽象类. 创建的子类将继承超类的所有属性和方法,包括构造函数及方法的实现.记住,所有属性和方法都是公用的,因此子类可直接访问这些方法.子类还可添加超类中没有的新属性和方法,也可以覆盖超类中的属性和方法. 4.2.

  • 学习javascript面向对象 javascript实现继承的方式

    本文实例为大家介绍了javascript实现继承的6种方式,分享给大家供大家参考,具体内容如下 1.[原型链继承]实现的本质是重写原型对象,代之以一个新类型的实例.实际上不是SubType的原型的constructor属性被重写了,而是SubType的原型指向了另一个对象--SuperType的原型,而这个原型对象的construtor属性指向的是SuperType function SuperType(){ this.property = true; } SuperType.prototype

  • Extjs学习笔记之八 继承和事件基础

    这里接口的意思是Observable实际上起了一个抽象类的作用,Extjs中有大量的组件都是继承自这个类的.这个类提供了一些基本的方法比如addEvents,addlistener,fireEvent等等. 本文暂时不介绍如何使用extjs的组件响应事件,而是介绍Extjs的事件的一些实现原理.整个Extjs框架都是以一种面向对象的方式开发的,所以理解Javascript中的继承也很重要.我前面的一篇文章 补点基础:Javascript中的类和闭包 也是为这篇做准备.另外,博客园内还有一个写的很

  • ExtJS4中使用mixins实现多继承示例

    在ExtJS4中使用mixins来实现多继承.具体例子代码如下: 复制代码 代码如下: (function(){ Ext.onReady(function(){ Ext.define('say',{ canSay:function(){ alert("hello"); } }); Ext.define('eat',{ caneat:function(){ alert("eating"); } }); Ext.define("user",{ mix

  • 深入了解javascript中的prototype与继承

    通常来说,javascript中的对象就是一个指向prototype的指针和一个自身的属性列表.javascript创建对象时采用了写时复制的理念.只有构造器才具有prototype属性,原型链继承就是创建一个新的指针,指向构造器的prototype属性.prototype属性之所以特别,是因为javascript时读取属性时的遍历机制决定的.本质上它就是一个普通的指针. 构造器包括: 1.Object2.Function3.Array4.Date5.String 下面我们来举一些例子吧 复制代

  • JS继承--原型链继承和类式继承

    JS继承--原型链继承和类式继承

    什么是继承啊?答:别人白给你的过程就叫继承. 为什么要用继承呢?答:捡现成的呗. 好吧,既然大家都想捡现成的,那就要学会怎么继承! 在了解之前,你需要先了解构造函数.对象.原型链等概念...... JS里常用的两种继承方式: 原型链继承(对象间的继承)类式继承(构造函数间的继承) 原型链继承: 复制代码 代码如下: //要继承的对象var parent={name : "baba" say : function(){ alert("I am baba");}} //

  • js中继承的几种用法总结(apply,call,prototype)

    一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 复制代码 代码如下: <SPAN style="BACKGROUND-COLOR: #ffffff"><SPAN style="FONT-SIZE: 18px"><html>  <body>  <script type="text/javascript">      function Person(na

随机推荐