`
wanghaisheng
  • 浏览: 92075 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

详解javascript类继承机制的原理(转载自jimichan)

 
阅读更多

 目前 javascript的实现继承方式并不是通过“extend”关键字来实现的,而是通过 constructor function和prototype属性来实现继承。首先我们创建一个animal 类 

js 代码
 
  1.   var animal =  function (){   //这就是constructor function 了   
  2.    this .name = 'pipi';    
  3.    this .age = 10;      
  4.    this .height = 0;      
  5. }      
  6.  //建立一个动物的实例     
  7.  var  a1 =   new  animal ();   

构造函数与其他普通函数区别在于,1.构造函数里有 this关键字,2.调用构造函数是使用的new关键字。通过new运算符调用构造函数 animal 后,系统就会返回一个对象,这个对象就相当于 
js 代码
  1. var  a1 = { name:'pipi' ,age:10,height:0 }  
  2.   
  3. //或者   
  4. var  a1 =  new  Object();  
  5. a1.name='pipi';  
  6. a1.age = 10;  
  7. a1.height = 0;  
等同这样的方式来产生js对象。

到这里我们知道如何在js中定义一个类了,接下来我们展示如何写一个cat

js 代码
 
  1. var  cat =  function (){    
  2. this .play =  function (){     
  3.  alert('cat play')    
  4.  }    
  5.  }    
  6.  cat .prototype = new  animal ();    
  7.  //prototype 属性指向一个对象  
  8. var c1 = new cat();

到这里,cat就继承了 animal 对象,类cat的一个实例对象c1拥有属性name,age,height,和方法play了。
那么 
prototype起到了一个什么样的作用呢?
prototype就好比一个指针,它指向一个object,这个object就称为子类对象的原型。当cat的对象被创建的时候,由于cat的构造函数拥有prototype属性,那么cat的实例就会间接指向这个原型对象了(说成间接的是因为每个object都有一个 constructor 属性指向它的构造函数)。
那么问题来了,“当我们修改对象 c1 的name属性的时候,会不会修改它prototype的name属性值呢?”,答案是否定的。
接下来详细解析:
1.访问name属性: 首先当我们第一次访问c1.name的属性的时候,我们会得到值“pipi”,这个和我们预料中的一样。但是计算过程你未必知道。
它计算的过程是这样的:第一步:检查c1对象中是否有name属性,找到的话就返回值,没有就跳到第二步,显然没有找到,因为cat的构造函数中没有定义。第二步:当第一步没有找时,去间接访问
 prototype对象所指向的object,如果在 prototype对象中找到的name属性的话,就返回找到的属性值。如果还是没有找到的话,再去递归地寻找 prototype对象的 prototype对象(去找它的爷爷) ,一直到找到name属性或者没有prototype对象为止。如果到最后还是没有找到name属性的话就返回undefined。

2.设定name属性:当我们设定c1对象的name属性时,及调用 c1.name= ' new name';  这个过程就简单多了。首先检查是否对象已有该属性,若已存在则修改当前值,若不存在则为该对象新增一个属性并设定当前值。值得一提的是,在设定值的过程中没有去访问
 prototype属性。

为了加深理解,我们再看一个 read-write-read 的过程,第一次read的时候,由于自己的对象没有name属性,那么就会返回的原型对象的name属性的值。第二步,写入name的值,同样没发现本身对象有name属性,那么就在本身对象上新建一个name属性,然后赋值。第三步,再次读取name属性,由于在第二步中已经新建了name属性,此时就返回在第二步中设定的值。值得一提的是,在这三步中没有改变原型对象的值。

好了,到此详细分析了 javascript对象是如果实现继承的,其实和其他的面向对象语言不一样的是,javascript的继承机制是对象的原型继承而不是类型继承。
分享到:
评论

相关推荐

    javascript原型继承工作原理和实例详解_.docx

    ### JavaScript原型继承工作原理及实例详解 #### 一、引言 JavaScript作为一种广泛使用的脚本语言,在Web开发中扮演着重要角色。其独特的面向对象机制是通过原型继承来实现的,这种机制使得JavaScript能够灵活地...

    详解Javascript继承的实现

    JavaScript中的继承是面向对象编程的重要概念,允许子类继承父类的属性和方法。本文将深入探讨JavaScript继承的实现方式,以及其中的问题和解决方案。 首先,我们来看混合方式的实现,这种方式结合了原型链和对象...

    JavaScript继承的特性与实践应用深入详解

    通过构造函数,我们可以创建出一个继承自其他对象的对象。例如,我们可以定义一个`Mammal`构造函数,然后创建一个新的`Cat`构造函数,使其原型指向`Mammal`的实例。这样,`Cat`的实例就能够继承`Mammal`的属性和方法...

    C++继承与派生机制详解

    ### C++继承与派生机制详解 #### 一、引言 C++ 是一种支持面向对象编程的语言,其中继承机制是其重要的特性之一。通过继承,可以创建一个新类(称为派生类或子类),它继承了现有类(称为基类或父类)的所有属性和...

    JavaScript继承详解.doc

    JavaScript中的继承是面向对象编程的重要概念,它允许一个对象(子对象)获取另一个对象(父对象)的属性和方法,从而实现代码复用和...同时,理解JavaScript的原型、原型链和闭包等基础概念对于掌握继承机制至关重要。

    Javascript继承机制详解

    学完了Javascript类和对象的创建之后,现在总结一下Javascript继承机制的实现。Javascript并不像Java那样对继承机制有严格明确的定义,它的实现方式正如它的变量的使用方式那样也是十分宽松的,你可以设计自己的方法...

    javascript用函数实现继承详解javascript技巧docx.docx

    JavaScript中的继承机制是其面向对象编程的一个核心特性。在JavaScript中,可以使用多种方式来实现继承,其中之一就是通过函数来模拟继承。本文将详细介绍如何利用函数实现JavaScript的继承,并结合属性特性和描述符...

    详解Javascript继承的实现_.docx

    JavaScript中的继承是面向对象编程的重要概念,允许子类继承父类的属性和方法。本文将深入探讨JavaScript继承的实现,并分析其潜在的问题和解决方案。 首先,我们来看混合方式的实现,这是一种常见的继承策略,结合...

    JavaScript工作原理及对象详解.docx

    JavaScript是一种广泛应用于Web开发的动态编程语言,它的工作原理基于弱数据类型,允许开发者创建复杂的对象来存储和处理数据。本文将深入探讨JavaScript的工作原理以及对象的详细概念。 首先,JavaScript中有两种...

    C++ 继承详解 ppt C++ 继承详解(4)

    ### C++ 继承详解 #### 一、继承的概念与目的 **继承** 是 C++ 中一项非常重要的特性,它允许我们基于现有的类来构建新的类。这种特性不仅能够简化编程过程,提高代码的复用率,还能更好地模拟现实世界中的对象...

    JavaScript 继承详解(三)

    在JavaScript编程中,继承是面向对象编程的核心概念之一,它允许开发者构建出层级化的对象结构。在JavaScript中实现继承有多种方法,其中构造函数和原型链的方式是较为传统的一种,但在实际应用中存在一些问题和陷阱...

    Java的继承机制详解

    8. `Object`类:所有Java类都隐式地继承自`java.lang.Object`类,这是Java中的顶级父类。通过`Object`数组,可以存储不同类型的对象,体现了多态性。 9. 私有成员的隐藏:父类的私有成员对子类不可见,这意味着子类...

    详解JavaScript中基于原型prototype的继承特性_.docx

    由于JavaScript是一种基于原型的面向对象语言,它不支持传统的类(class)概念,因此其继承机制显得与众不同。在JavaScript中,对象可以直接从另一个对象继承属性和方法,这主要是通过原型链(prototype chain)来...

    JavaScript中的原型和继承详解(图文)_.docx

    JavaScript 中的原型和继承详解 在深入探讨编程语言时,我们经常会遇到一些专业术语,比如“原型”和“继承”,它们是面向对象编程中的核心概念。JavaScript 作为一门灵活且功能强大的编程语言,其原型和继承的实现...

    JavaScript 继承详解(六)

    在本章中,我们将分析Prototypejs中关于JavaScript继承的实现。 Prototypejs是最早的JavaScript类库,可以说是JavaScript类库的鼻祖。 我在几年前接触的第一个JavaScript类库就是这位,因此Prototypejs有着广泛的...

    JavaScript 继承详解(二)

    // "ZhangSan" 在JavaScript中,继承是通过原型链机制实现的,这里的原型就是prototype属性。每个函数都有一个prototype属性,它指向一个对象,这个对象就是实例化该函数时,新创建的对象所继承的属性和方法的来源...

    javascript继承机制实例详解

    JavaScript的继承机制是其面向对象编程的一大特点,与传统的面向对象语言有所不同。JavaScript没有像Java或C++那样的类,而是采用原型链(prototype chain)来实现继承。在JavaScript中,对象可以直接从其他对象继承...

    Java注解机制之Spring自动装配实现原理详解

    Java注解机制之Spring自动装配实现原理详解 Java注解机制是Java语言中的一种元数据 Facility,提供了一种在编译期和运行期对Java代码进行标记和描述的机制, Spring框架中使用Java注解机制来实现自动装配功能。自动...

Global site tag (gtag.js) - Google Analytics