`
quepeng
  • 浏览: 2515 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

转载:javascript 类属性、类方法、类实例、实例属性、实例方法、prototype、__proto__ 测试与小结

 
阅读更多
<script>   
    function Circle( radius ){    
        this.r = radius;    
        this.des = "圆形";   
           
        this.showInfo = function(){   
            alert("这是一个"+this.des);   
        }  
    }  

    function Circle_area(r){ return Circle.PI*this.r*this.r; }  

    function Circle_perimeter(r){ return  2*Circle.PI*r;}  

    Circle.PI = 3.14;  
    Circle.perimeter = Circle_perimeter;  
    Circle.prototype.area = Circle_area;  

    var c = new Circle(3);  

    //测试类属性  
    //alert(Circle.PI )//3.14  
    //alert(c.PI)//undefined 因为类属性是和类本身,也就是函数本身相关联的,和类实例没有直接关系。  
    //alert(c.constructor.PI)//3.14 如果想通过类实例访问类属性,那么就需要先访问该实例的构造函数,进而访问该类属性  
    //alert(Circle.des)//undefined 因为函数Circle函数中的this.des中的this指代的不是函数本身,而是调用r的对象,而且只能是对象。  
    //alert(c.des)//圆形 this此时为实例化的 对象c。  

    /*结论:  
         面向对象的角度:类属性是类对象的直接属性,且该属性与基于该类对象生成的实例对象没有直接关系,无法直接调用。  
         可以直接通过 类名.属性名 调用该类属性。如果想通过该类对象的实例对象调用类属性,那么可以使用 对象实例.constructor属性  
         调用该对象的类对象,然后通过类对象调用其类属性  
         javascript函数角度:类属性是javascript函数对象的直接属性变量(这里之所以称之为属性变量是由于javascript变量和属性的同一  
         性),且该属性变量与基于该函数对象构造出来的对象引用(生成了一个对象,这个对象实际上是一个空对象,并且保存了对构造  
         函数以及构造函数初始化时函数内部this关键字下的相关属性和函数的引用[c.prototype和构造函数中this.下面的相关属性、函数]:)  
         没有直接关系,如果想通过基于构造函数生成的对象c调用构造函数对象的属性变量PI,那么需要通过c.constructor属性找到该构造  
         函数对象,并通过该对象获取其属性变量。 
     */  

    //测试类方法  
    //alert(Circle.perimeter(3)); //18.4 直接调用函数的类方法。  
    //alert( c.perimeter(3) ); //FF:c.perimeter is not a function IE:对象或属性不支持此方法。因为perimeter函数是Circle类的类方法,和实例对象没有直接关系  
    //alert(c.constructor.perimeter(3));//18.84 调用该对象构造函数(类函数)的方法(函数)。  
    //alert(c.area(3))//28.25.... Circle类的prototype原型属性下的area方法将会被Circle类的实例对象继承。  
    //alert(Circle.area(3));//FF: 错误: Circle.area is not a function  因为area方法是Circle类的原型属性的方法,并不是Circle类的直接方法。  

     //结论:同上,把属性换成了方法,把属性变量换成了函数。  

     //测试prototype对象属性  
     //alert(c.prototype); //undefined 实例对象没有ptototype属性       
     //alert(Circle.prototype); //object Object   
     //alert(Circle.prototype.constructor)//返回Circle的函数体(函数代码体),相当于alert(Circle)  
     //alert(Circle.prototype.area(3));//NaN 方法调用成功,但是返回结果却是NaN,原因是area函数内部的this.r是undefined。  
     //alert(Circle.prototype.PI) //undefined因为PI属性是Circle类函数的直接属性,并不会在prototype属性下存在  
     //alert(Circle.prototype.constructor.PI)//3.14 通过Circle类的原型对象调用该原型对象的构造函数(类函数),再通过类函数调用PI属性。  

     /*结论:prototype原型对象是javascript基于原型链表实现的一个重要属性。  
            Javascript角度:1. 实例对象没有prototype属性,只有构造函数才有prototype属性,也就是说构造函数本身保存了对prototype属性  
         的引用。。2. prototype属性对象有一个constructor属性,保存了引用他自己的构造函数的引用(看起来像是个循环:A指向B,B指向A...)  
        3.prototype对象(不要被我这里的属性对象,对象,对象属性搞晕乎了,说是属性对象,就是说当前这个东西他首先是某个对象的属性,  
        同时自己也是个对象。对象属性就是说它是某个对象的属性。)的属性变量和属性对象将会被该prototype对象引用的构造函数所创建的  
        对象继承(function A(){} A.prototype.pa = function(){} var oA = new A(); 那么oA将会继承属性函数pa)。  
     */  

     /*这里对 对象属性,对象方法不再做详细测试。  
         1.javascript对象实例的在通过其构造函数进行实例化的过程中,保存了对构造函数中所有this关键字引用的属性和方法的引用(这里不  
         讨论对象直接量语法的情况)。但如果构造函数中没有通过this指定,对象实例将无法调用该方法。2.javascript可以通过构造函数创建  
         多个实例,实例会通过__proto__属性继承原型对象的属性和方法。如果对实例对象的属性和方法进行读写操作,不会影响其原型对象的 
         属性和方法,也就是说,对于原型对象,javascript实例对象只能读,不能写。那当我们对实例对象的属性和方法进行修改的时候也可以  
         改变其值这是为什么呢?其实当我们试图在实例对象中使用继承自原型对象的属性或方法的时候,javascript会在我们的实例对象中复  
         制一个属性或方法的副本,这样,我们操作的时候,其实操作的就是实例对象自己的属性或方法了。   */  

     //测试__proto__属性  
     //alert(c.__proto__)//FF:object IE8:undefined 该属性指向Circle.prototype,也就是说调用该对象将会返回Circle的prototype属性。  
     //由于IE8及以下版本不支持__proto__属性,所以以下结果都在FF下得出。  
     //alert(c.__proto__.PI)//undefined 因为函数原型下面没有PI属性,PI是类函数Circle的直接属性  
     //alert(c.__proto__.area(3))//NaN 该函数执行成功,返回值为NaN是由于函数体中的this.r为undefined。  

     /*结论:__proto__属性保存了对创建该对象的构造函数引用prototype属性的引用,也就是说构造函数可以引用prototype,基于该构  
     造函数生成的实例也可以引用,只不过引用的方式不一样。*/  
</script>
分享到:
评论

相关推荐

    详解帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)

    总结来说,`prototype`用于定义实例的共享属性和方法,`__proto__`用于形成原型链实现属性查找,而`constructor`则用来标识对象的构造函数。理解这三个概念对于深入学习JavaScript的面向对象编程至关重要。在实际...

    prototype_oop_javascript_ruby_prototype_

    标题 "prototype_oop_javascript_ruby_prototype_" 暗示了我们将探讨的是关于原型(Prototype)面向对象编程(Object-Oriented Programming, OOP)的概念,主要关注JavaScript和Ruby这两种语言之间的相似性和差异性...

    prototype与__proto__区别详细介绍

    在JavaScript中,`prototype`和`__proto__`都是与对象继承和原型链紧密相关的概念,但它们在用途和性质上有所不同。以下是这两者的主要区别和详细解释: 1. **prototype(原型)** - `prototype`是函数特有的属性...

    js prototype和__proto__的关系是什么

    4. 当我们访问实例的属性或方法时,如果实例本身没有这个属性或方法,JavaScript引擎会沿着__proto__属性找到原型链上的下一个对象,继续查找,直到找到或者到达原型链的末端。 这种机制称为原型链继承,允许一个...

    JS原型prototype和__proto__用法实例分析

    `__proto__`属性是JavaScript实现原型链的关键,它使得对象能够继承其构造函数的`prototype`上的属性和方法。 在继承链中,每个对象都有自己的`__proto__`,而函数的`prototype`则为创建它的对象提供了继承的基础。...

    简单解析JavaScript中的__proto__属性

    再具体一点,当访问一个对象的属性或方法时,如果在对象自身中未找到,解释器会沿着__proto__指针向上遍历,直到找到对应的属性或方法,或者达到原型链的末端(Object.prototype),如果还是没有找到,则会返回...

    浅谈javascript中的prototype和__proto__的理解

    在工作中有时候会看到prototype和__proto__这两个属性,对这两个属性我一直比较蒙圈,但是我通过查阅相关资料,决定做一下总结加深自己的理解,写得不对的地方还请各位大神指出。 跟__proto__属性相关的两个方法 ...

    了解JavaScript中的prototype (实例)

    在JavaScript中,每个函数(包括构造函数)都有一个内置的`prototype`属性,这个属性指向一个对象,该对象包含了可以被该函数的所有实例共享的属性和方法。 当我们创建一个新对象时,它会继承其构造函数的`...

    javascript 中__proto__和prototype详解

    总结一下,__proto__属性与prototype属性是JavaScript原型继承中的两个关键点,它们共同支撑起JavaScript的原型链继承机制。通过__proto__属性,我们可以追踪到对象的原型链,而通过prototype属性,函数可以将其属性...

    JavaScript中__proto__与prototype的关系深入理解

    在JavaScript中,`__proto__` 和 `prototype` 是两个重要的概念,它们分别涉及对象的内部原型链和构造函数的原型。这篇文章将深入探讨这两者之间的关系。 首先,`__proto__` 属性是一个对象的内部属性,它指向该...

    JavaScript_Prototype(源代码+中文手册).rar

    2. **构造函数、原型与实例**:构造函数(如`Function`、`Object`等)用于创建新的对象,每个构造函数都有一个`prototype`属性,这个属性是一个对象,用于存储共享的方法和属性。当我们使用`new`关键字创建新对象时...

    帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)

    JavaScript中的`prototype`、`__proto__`和`constructor`是理解JavaScript面向对象编程的关键概念。这篇文章将通过图解的方式帮助读者深入理解这三个属性的关系。 首先,`__proto__`属性,它存在于每个对象中,表示...

    非常有用的prototype实例

    首先,了解`prototype`的基本原理:每个函数(在JavaScript中,函数也是对象)都有一个名为`prototype`的属性,这个属性是一个对象,用于定义实例化该函数的对象所能共享的属性和方法。当我们创建一个新对象时,该...

    JavaScript的prototype

    2. **构造函数与实例的原型链** 每个由构造函数创建的对象实例都有一个`__proto__`属性,它引用了构造函数的`prototype`。这样,当试图访问对象实例的一个属性时,如果在实例本身找不到,JavaScript会沿着`__proto_...

    跟我学习javascript的prototype,getPrototypeOf和__proto__

    JavaScript中的prototype属性,getPrototypeOf方法和__proto__属性,是与原型链(prototype chain)相关的重要概念。它们在JavaScript对象继承机制中扮演着至关重要的角色。下面详细解释这些概念以及它们的使用方式...

    javascript常用方法实例

    `__proto__`指向原型对象,`Object.prototype`是所有对象的根原型,`prototype`属性常用于定义构造函数的原型方法。 9. **闭包和作用域**:闭包是JavaScript中一种强大的特性,它可以访问并操作外部函数的变量。...

    JavaScript中的prototype(原型)属性研究

    当我们创建一个函数实例时,实例会自动获取一个内部属性[[Prototype]],这个属性通常通过`__proto__`或者`Object.getPrototypeOf`方法访问,它引用的就是函数的prototype属性所指向的对象。 ### prototype的用途 1....

Global site tag (gtag.js) - Google Analytics