`
junjie314
  • 浏览: 60262 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
文章分类
社区版块
存档分类
最新评论

对JavaScript中原型的理解

阅读更多
从纯粹的面向对象思想(Java思想)向Javascript语言面向对象思想的转化沉痛而惨烈。Javascript中对象和类的概念转化悄然不动声色,让人迷糊。有时候,对Java理解得越清楚,对Javascript理解起来就越费劲。其中,对Javascript的原型对象的理解颇费功夫。

按照定义,每个javascript对象都有一个原型对象(简称原型),这个原型是由该对象的构造函数所定义(javascript自动创建的),并且对象继承原型的所有属性和方法(函数),比如 一个String对象 的原型为 String.prototype ,如果我们想要给String类添加方法,可以这样做(比如添加常用的trim()方法):


js 代码
String.prototype.trim = function (){   
  return this.replace(/(^\s*)|(\s*$)/g, "");   
}  


这个特性是相当令人惊讶的,因为这破坏了封装性,就好像在Java中你可以对Object进行修改一样。而function() 可以当作数据来给左操作数赋值(而不仅仅是当作动作),也让人吃惊。

对于Javascript内部类都可以这么改,对于自定义类当然可以这么改,如:


js 代码
function Circle(x,y,r){   
  this.x = x;   
  this.y = y;   
  this.r = r;   
  //this.prototype = null ;     /*这句代码可以看作是隐含存在的,因为javascript 中“类”的定义和函数的定义结构上没有差异,所以可以说,所有函数都隐藏有这样一个属性。*/   
}   

然后,我们给原型加一个得到面积的方法:

Circle.prototype.area = function(){   
  return this.r * this.r * 3.14159 ;   
}  

这样使用:

js 代码
var circ = new Circle(0,0,2) ;   
alert(circ.area()) ;  

为什么要使用原型呢?因为我们可以在类中很轻松的定义我们想要实现的方法,如,还是上面那个求圆面积:

js 代码
function Circle(x,y,r){   
  this.x = x;   
  this.y = y;    
  this.r = r ;   
  this.area = function (){   
    return this.r * this.r * 3.14159 ;    
  }   
}   
//调用:
var circ = new Circle(0,0,2) ;   
alert(circ.area()) ;   

两者的调用代码完全一样,那为什么要使用原型呢?我感觉主要是为了解决对内部类型的继承问题,也就是说当你无法修改String的构造函数而想要让所有String实例都具有某一方法的时候,你可以用这个prototype。

参考:

JavaScript 权威指南(第四版)


分享到:
评论

相关推荐

    JavaScript中原型和原型链详解

    在探讨JavaScript中原型和原型链的详细知识前,我们首先要了解JavaScript对象的几个核心概念,包括私有变量和函数、静态变量和函数以及实例变量和函数。这些都是理解原型和原型链的基础。 私有变量和函数属于一个...

    我所理解的从原型到原型链.pdf

    通过上述示例和解释,我们可以清楚地看到JavaScript中原型和原型链的工作原理。在JavaScript中,每一个对象都有一个`__proto__`属性,指向它的原型对象。当我们创建一个新的对象时,这个对象会继承其构造函数`...

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

    JavaScript 中的原型和继承详解 在深入探讨编程语言时,我们经常会遇到...以上便是关于 JavaScript 中原型和继承机制的详细解析。通过图文并茂的说明,希望读者能够更直观地理解这些概念,并在实际编程工作中应用。

    JavaScript ES6中CLASS的使用详解

    在ES6中,class的引入是为了解决JavaScript中原型链操作的复杂性和可读性问题,使其更符合大多数开发者熟悉的面向对象编程模式。 在ES6中定义类,可以使用class关键字,后面跟上类名,然后是大括号,内部可以包含...

    深入理解JavaScript系列(42):设计模式之原型模式详解

    首先,我们来看一下JavaScript中原型对象的概念。在JavaScript中,每个对象都有一个指向它的原型对象的内部链接,这个原型对象包含了共享的属性和方法。当我们对一个对象进行属性访问时,如果对象本身没有这个属性,...

    原生JS原型对象练习

    总的来说,这个练习旨在让学习者掌握JavaScript中原型对象和原型链的核心概念,以及如何在实际项目中运用这些知识。通过动手实践,学生们将能更深刻地理解JavaScript的对象继承机制,并提高他们的编程能力。

    Javascript原型链的原理详解

    以上解释了JavaScript中原型链的工作原理和相关细节,包括构造函数、原型对象、__proto__属性、继承方法等关键概念。这些概念的掌握对于理解JavaScript面向对象编程模型至关重要。在实际开发过程中,利用原型链可以...

    JS原型与原型链的深入理解

    以上内容总结了JavaScript中原型和原型链的基本概念和工作机制。理解这些概念有助于编写更加高效和优雅的代码,并且可以更好地控制对象的创建和继承过程。对于JavaScript开发者而言,掌握原型和原型链的深入理解是...

    prototypal-oo-js-object-oriented-constructor-functions-lab-onlin

    标题中的“prototypal-oo-js-object-oriented-constructor-functions-lab-onlin”表明这是一个关于JavaScript中原型式面向对象编程(Prototype-based Object-Oriented Programming)的实验或练习,特别是涉及构造...

    Javascript原型链及instanceof原理详解

    在深入探讨JavaScript中原型链及instanceof原理之前,需要明确一些基础概念。首先,JavaScript是一种基于原型的面向对象编程语言。与传统的基于类的语言不同,JavaScript中的对象直接继承自其他对象,这种机制被称为...

    浅谈javascript原型链与继承

    通过这些例子,我们可以清楚地看到JavaScript中原型链和继承的工作原理。每个对象都可以通过原型链向上查找属性和方法,这使得JavaScript具备了强大的继承机制,从而能够构建复杂的面向对象系统。了解并熟练掌握这些...

    Javascript学习笔记9 prototype封装继承

    本学习笔记深入分析了JavaScript中原型和原型链在对象继承中的应用,并通过工厂模式封装了继承的实现过程。通过这种方式,可以更好地理解JavaScript中的继承机制,并在实际开发中灵活运用。掌握原型和原型链的概念...

    基于js中的原型、继承的一些想法

    最近看到一个别人写的js类库,突然对js中的原型及继承产生了一些想法,之前也看过其中的一些内容,但是总不是很清晰,这几天利用空闲时间,对这块理解了一下,感觉还是有不通之处,思路上没那么条理,仅作为分享, ...

    深入理解Bootstrap.pdf

    - **原型**:探讨JavaScript中原型继承机制。 - **jQuery基本用法**: - **事件绑定**:使用`on`方法绑定事件。 - **事件命名空间**:通过添加命名空间来管理事件。 - **$.data()**:利用此方法存储和检索数据。...

    JavaScript程序中实现继承特性的方式总结

    寄生组合式继承是目前最理想的继承方式,它避免了组合继承中原型链过长的问题。这种方法的原理是利用一个空函数作为中间桥梁,将父构造函数的原型对象的引用赋给子构造函数的原型。寄生组合式继承有效地解决了组合...

    javascript将字符串中的多个空格替换为一个空格的正则实例

    通过这两个链接,我们可以更深入地理解和掌握JavaScript中原型的使用以及正则表达式匹配和替换的具体细节。 以上就是关于如何使用JavaScript将字符串中的多个空格替换为单个空格的全部知识点。掌握这一技巧,可以...

    烽火2源码(某趣源码)

    总的来说,烽火2源码的探索和研究涉及到游戏开发的多个层面,不仅需要深厚的编程技能,还需要对游戏架构和网络通信有深入理解。对于想要进一步了解或参与游戏开发的人来说,这是一个宝贵的资源,但也需要耐心和细心...

    car_prototypes

    通过详细研究"car_prototypes"项目,你将有机会亲手实践这些概念,从而加深对JavaScript中原型和面向对象编程的理解。这是一个非常有价值的练习,可以帮助你提升编程技能并准备应对实际工作中的挑战。

Global site tag (gtag.js) - Google Analytics