`

【转载】JavaScript原型对象

阅读更多

转载地址:http://www.iteye.com/topic/1128242

什么是原型对象?

      “我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。”

      --摘自人民邮电出版社出版的Nicholas C.Zakas著的《JavaScript高级程序设计》(第2版)

      上面提到的对象,就是原型对象,它的用途是“包含可以由特定类型的所有实例共享的属性和方法”。那么怎么才能访问到它呢?按照上面的说法,每个函数都有一个prototype 指针,这个指针指向了它的原型对象,所以我们可以通过函数的prototype属性来访问函数的原型对象。

      下面用程序来说明。

 

Java代码 复制代码 收藏代码
  1. function SuperType(){}   
  2.     
  3. document.write(SuperType.prototype);//[object Object]  
function SuperType(){}
 
document.write(SuperType.prototype);//[object Object]

 

      可见函数SuperType的确存在一个prototype属性,其的确是指向了一个对象。但这个对象真是原型对象吗?怎么证明?上面不是说原型对象的用途是“包含可以由特定类型的所有实例共享的属性和方法”,既然如此,那我们就来看这个对象是不是真的有这个功能。

 

Java代码 复制代码 收藏代码
  1. function SuperType(){}   
  2.          
  3.  SuperType.prototype.name = 'Sam';//在SuperType.prototype指向的对象上增加了name属性   
  4.        
  5.  //在SuperType.prototype指向的对象上增加了sayName方法   
  6.  SuperType.prototype.sayName = function() {   
  7.           document.write(this.name);   
  8.  };   
  9.  SuperType.prototype.setName = function(name) {   
  10.           SuperType.prototype.name = name;   
  11.  };   
  12.        
  13.  var instance1 = new SuperType();   
  14.  var instance2 = new SuperType();   
  15.        
  16.  instance1.sayName();//Sam   
  17.  instance2.sayName();//Sam   
  18.        
  19.  instance1.setName('Luce');   
  20.         
  21.  instance1.sayName();//Luce   
  22.  instance2.sayName();//Luce  
function SuperType(){}
      
 SuperType.prototype.name = 'Sam';//在SuperType.prototype指向的对象上增加了name属性
  	
 //在SuperType.prototype指向的对象上增加了sayName方法
 SuperType.prototype.sayName = function() {
          document.write(this.name);
 };
 SuperType.prototype.setName = function(name) {
          SuperType.prototype.name = name;
 };
  	
 var instance1 = new SuperType();
 var instance2 = new SuperType();
  	
 instance1.sayName();//Sam
 instance2.sayName();//Sam
  	
 instance1.setName('Luce');
     
 instance1.sayName();//Luce
 instance2.sayName();//Luce

 

      当实例instance1调用setName()函数更改了SuperType.prototype.name的值后,instance2.sayName()也会输出Luce,说明SuperType.prototype指向的对象的确是“包含了可以由特定类型(这里是SuperType)的所有实例所共享的属性和方法”,所以由此可以得出结论:

      SuperType.prototype指向的就是SuperType的原型对象,也即是函数的prototype属性指向了函数的原型对象。 

 

 

 

      下面用程序来说明构造函数、实例和原型对象三者之间的关系。 

 

      首先是构造函数与实例之间的关系,实例就是通过调用构造函数创立的:

 

Java代码 复制代码 收藏代码
  1. function SuperType(name){   
  2.            this.name = name;   
  3.            this.sayName = function(){   
  4.                  document.write(this.name);       
  5.           }   
  6.  }   
  7.        
  8.  var instance1 = new SuperType("Sam");   
  9.  instance1.sayName();//Sam   
  10.        
  11.  var instance2 = new SuperType("Luce");   
  12.  instance2.sayName();//Luce  
function SuperType(name){
           this.name = name;
           this.sayName = function(){
                 document.write(this.name);    
          }
 }
  	
 var instance1 = new SuperType("Sam");
 instance1.sayName();//Sam
  	
 var instance2 = new SuperType("Luce");
 instance2.sayName();//Luce

 

      我们在构造函数里面定义了一个name属性和一个sayName()函数,当调用new SuperType()创建实例时,就会调用构造函数SuperType创建实例对象,同时为实例对象增加一个name 属性和一个sayName()方法(也即是把this换成了实例对象(如this.name换成了instance1.name),所以每个实例的name和sayName()方法都是独立的,注意和在原型对象上定义的 区别,在原型对象上定义是共享的)。

     

      构造函数与原型对象的关系。前面已经说过,构造函数中有一个prototype属性,该属性是一个指针,指向了它的原型对象,那原型对象呢?是不是在它里面也存在一个指针,指向构造函数呢?答案是的确如此。原型对象中有一个constructor属性,该属性指向了构造函数:

 

Java代码 复制代码 收藏代码
  1. function SuperType(){}   
  2.        
  3. document.write(SuperType.prototype.constructor);//function SuperType(){}   
  4. document.write(SuperType.prototype.constructor == SuperType);//true  
function SuperType(){}
  	
document.write(SuperType.prototype.constructor);//function SuperType(){}
document.write(SuperType.prototype.constructor == SuperType);//true

 

      打印SuperType.prototype.constructor,输出的是构造函数的定义,而我们知道函数名只是一个引用,其指向函数所在的地址,所以通过SuperType.prototype.constructor和SuperType的比较,返回了true,所以SuperType.prototype.constructor和SuperType一样都指向了SuperType()函数,在这里即是指向了构造函数。

 

      最后是实例与原型对象的关系。前面的例子可以看到(最开始),实例可以访问到在原型对象上定义的属性和方法,那么我们就可以猜测,实例中肯定有一个指针指向了原型对象,的确如此,实例中有一个属性__proto__(IE中没有这个属性,所以不要在IE下测试),该属性指向了原型对象:

Java代码 复制代码 收藏代码
  1. function SuperType(){}   
  2.        
  3.  var instance = new SuperType();   
  4.  document.write(instance.__proto__ == SuperType.prototype);//true  
function SuperType(){}
  	
 var instance = new SuperType();
 document.write(instance.__proto__ == SuperType.prototype);//true

   

 

      SuperType.prototype指向了SuperType的原型对象,而instance.__proto__和SuperType.prototype比较返回了true,这就说明instance.__proto__也指向了SuperType的原型 对象。

 

     以上即是JavaScript原型对象的相关信息。

分享到:
评论

相关推荐

    javascript Map对象 原型 插件

    javascript Map原型,对象,实现javascript中的Map数据类型功能

    浅析JavaScript实现基于原型对象的“继承”.pdf

    本文将对JavaScript原型继承的方式进行介绍,并结合实例进行分析。 基于类的继承 面向对象编程语言是基于类的语言,以Java为例,Java是基于类的语言。在基于类的语言中,对象是类的实例,并且一个类可以从另一个类...

    第15章 javascript面向对象与原型

    在深入讲解JavaScript面向对象与原型的知识点之前,首先需要了解JavaScript的基础知识。在JavaScript中,面向对象编程(OOP)的概念虽然存在,但是它的实现与传统基于类的语言有所不同。ECMAScript,也就是...

    原生JS原型对象练习

    在JavaScript的世界里,原型对象(Prototype)是理解对象继承机制的关键。这个练习旨在帮助学习者深入理解原型链的概念,这是JavaScript实现面向对象编程的核心部分。原生JS,即不依赖于像jQuery这样的库,让我们...

    JAVASCRIPT 面向对象编程精要

    每个对象都有一个原型对象,可以通过`__proto__`属性访问。创建一个对象时,它可以继承另一个对象的属性和方法。 ```javascript function Person(name, age) { this.name = name; this.age = age; } Person....

    JavaScript面向对象编程指南.pdf

    3. prototype:在JavaScript中,每个函数都有一个prototype属性,这个属性指向一个对象,这个对象称为原型对象。原型对象允许我们定义共享的属性和方法,这样所有通过该构造函数创建的对象都可以访问这些属性和方法...

    JavaScript原型链简单图解

    JavaSciptDOM基本操作,JavaScipt函数基础,JavaScipt流程语句,JavaScript变量,JavaScript数据类型,JavaScript数组,JavaScript正则表达式,JavaScript字符串函数,Window对象等图解。JS高手进阶的工具图谱

    JavaScript面向对象编程指南 pdf

    - 多态是指不同对象对同一消息(方法调用)做出不同响应的能力,这在JavaScript中通过覆盖原型上的方法实现。 6. **模块化** - 面向对象编程有助于模块化代码,通过将相关的功能组织到对象中,可以提高代码的...

    【技术分享】从浅入深 Javascript 原型链与原型链污染 .pdf

    本文将深入探讨JavaScript原型链的工作原理及其可能导致的安全问题——原型链污染。 首先,JavaScript 中的对象继承并不像传统面向对象语言那样基于类,而是通过原型链机制。每个对象都有一个内部属性`[[Prototype]...

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

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

    面向对象JavaScript开发

    在JavaScript中,面向对象主要通过构造函数、原型链、原型对象和闭包等机制来实现。 1. **构造函数**:构造函数在JavaScript中扮演着类的角色,它们通常用来初始化新创建的对象。我们可以通过`new`关键字调用构造...

    javascript面向对象编程.pdf

    总而言之,学习现代JavaScript面向对象编程,有助于开发者在认识这门语言演化的基础上,运用面向对象的设计和编程模式来构建更加健壮和可维护的JavaScript应用程序。同时,测试和调试是保证代码质量不可或缺的环节,...

    浅析Javascript原型继承 推荐第1/2页

    每个对象都拥有一个指向其原型对象的内部链接,这个原型对象同样拥有一个指向其原型的链接,这样一直延续下去直到一个对象的原型为null。根据这个链接,JavaScript可以检查一个对象是否具有特定属性或方法,如果没有...

    javascript面向对象编程(中文).pdf

    面向对象编程是现代JavaScript的核心之一,它通过构造函数、原型链等机制实现了类和继承的概念。掌握这些基本概念对于构建高效、可维护的JavaScript应用至关重要。同时,合理利用现有的测试工具和框架可以极大地提高...

    JavaScript面向对象精要(英文版)

    在JavaScript中,虽然它不是一种传统的类(class-based)面向对象语言,但它通过原型继承机制实现了强大的面向对象功能。 ##### 2.1 封装 封装是指将对象的状态信息隐藏在内部,仅通过公共接口与外部进行交互。在...

    学习javascript面向对象 理解javascript原型和原型链

    当创建一个构造函数时,JavaScript引擎会自动给其原型对象添加一个constructor属性,它指向构造函数本身。如果创建了自定义的构造函数,其原型对象默认只会有constructor属性和从Object继承而来的其他方法。构造函数...

    JavaScript:对象与原型链教程.docx

    JavaScript:对象与原型链教程.docx

    JavaScript构造函数和原型对象介绍.md

    JavaScript构造函数和原型对象介绍,对于构造函数的创建以及一些简单地介绍,还有就是原型对象对于构造函数的一些补充。

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

    在 JavaScript 中,原型对象可以形成一个链式结构,即一个对象的原型对象可以有自己的原型对象,以此类推。这使得对象可以继承多个原型对象的方法和属性。 五、继承 在 JavaScript 中,继承是通过原型链来实现的。...

Global site tag (gtag.js) - Google Analytics