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

本文实例讲述了JS原型prototype和__proto__用法。分享给大家供大家参考，具体如下：

先来看一个实例

function Foo() {
}
var foo = new Foo();
console.log(foo.prototype);// undefined
console.log(foo.__proto__ === Foo.prototype);// true
console.log(Foo.__proto__);  [Function]

Foo.__proto__结果如下:

console.log(Foo.prototype);// [object Object]

Foo.prototype结果如下:

console.log(Foo.prototype.prototype);// undefined

实例说明了：

1、 foo 是 Foo 的一个实例，不是一个函数，所以没有prototype；

Foo是Function的一个实例，而Function是一个函数，他的实例Foo也是一个函数，所以他们都有prototype。此外Object Array RegExp等也是函数。Math就仅仅是一个new Object() ,不是函数。

2、构造函数的prototype，默认情况下就是一个new Object()还额外添加了一个constructor属性。所以说默认是没有prototype只有__proto__的。

除了Object.prototype这个对象，其他所有的对象都会有__proto__属性，之后函数才会有prototype属性。

在创建对象的时候会自动创建一个__proto__属性，指向它构造函数的prototype,当访问这个对象的属性的时候会顺带访问__proto__中对应的属性，也就是构造函数prototype这样实现了继承。

只有创建函数的时候才会创建一个prototype属性，目的就是为了完成上面的继承方式。

总结:

<1>不管是普通对象还是函数对象，它们都有一个隐含属性”__proto__ “，而这属性就是我们通常说的原型(属性)，它其实就是一个Object类型的对象。

<2>对于函数对象，它们还会多一个prototype的属性，它和以它为构造函数创建的普通对象的”__proto__ “属性等同,即"new XXXt().__proto__ ===XXX.prototype"为true，即对象XXX中都有__proto__属性就是一个指针，指向XXX构造函数中的prototype属性。

摘录网上

一个图（橙色箭头是初始的关系，绿色是执行 var Fish = new Fu... 创建，蓝色是执行f1= new Fish()创建。）

这样f1 就可以通过__proto__ 访问 Fish.prototype中的属性（当然这是程序执行的时候自动查找的）。Fish就可以访问 Function.prototype定义的属性。所有对象都可以访问Object.prototype 中的属性。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • javascript prototype原型详解(比较基础)

    javascript prototype原型详解(比较基础)

    javascript的prototype原型简单介绍: prototype原型是javascript中特别重要的概念,属于必须要掌握,如果没有良好的掌握的话,进一步用好或者学好js基本是不可能的实现的事情,并且此概念稍有难度,可能对于初次接触的朋友来说有点困难,下面就通过代码实例简单介绍一下prototype原型的用法. 一.基本概念: 每一个函数都具有一个prototype属性. 此属性是一个指针,能够指向一个对象,而此对象将会被由构造函数创建的对象实例所共享,也就是会继承此对象. 总结:pr

  • javascript prototype的深度探索不是原型继承那么简单第1/3页

    1 什么是prototype JavaScript中对象的prototype属性,可以返回对象类型原型的引用.这是一个相当拗口的解释,要理解它,先要正确理解对象类型(Type)以及原型(prototype)的概念.         前面我们说,对象的类(Class)和对象实例(Instance)之间是一种"创建"关系,因此我们把"类"看作是对象特征的模型化,而对象看作是类特征的具体化,或者说,类(Class)是对象的一个类型(Type).例如,在前面的例子中,p1和

  • 跟我学习javascript的prototype原型和原型链

    跟我学习javascript的prototype原型和原型链

    用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了一些 JavaScript高级程序设计,终于揭开了其神秘面纱. 每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和

  • 浅谈js构造函数的方法与原型prototype

    把方法写在构造函数内的情况我们简称为函数内方法,把方法写在prototype属性上的情况我们简称为prototype上的方法. •函数内的方法: 使用函数内的方法我们可以访问到函数内部的私有变量,如果我们通过构造函数new出来的对象需要我们操作构造函数内部的私有变量的话, 我们这个时候就要考虑使用函数内的方法. •prototype上的方法: 当我们需要通过一个函数创建大量的对象,并且这些对象还都有许多的方法的时候;这时我们就要考虑在函数的prototype上添加这些方法. 这种情况下我们代码的

  • js中使用使用原型(prototype)定义方法的好处详解

    经常在前端面试或是和其他同行沟通是,在谈到构造在JS定义构造函数的方法是最好使用原型的方式:将方法定义到构造方法的prototype上,这样的好处是,通过该构造函数生成的实例所拥有的方法都是指向一个函数的索引,这样可以节省内存. 当然,这种说法没有任何问题,只是在实现上,并非只有使用prototype的方式才能达到这样的效果,我们可以将方法以函数的形式定义在构造函数之外,然后在构造函数中通过this.method = method的方式,这样生成的实例的方法也都通过索引指向一个函数,具体如下:

  • Javascript 原型和继承(Prototypes and Inheritance)

    Javascript 原型和继承(Prototypes and Inheritance)

    JavaScript 对象从一个原形对象(prototype object) 继承属性.所有对象都有原型:原型的所有属性看上去就像使用它作为原型的那些对象的属性一样.简单的说就是:所有对象都从他的原型继承属性. (each object inherits properties from its prototype). 对象的 prototype 通过它的 constructor function 来定义.JavaScript 里所有的 function 都有一个 prototype 属性.这个属

  • javascript prototype原型操作笔记

    复制代码 代码如下: //var People={name:"xiong",age:15}; //var Person=function(user,age){ //    this.name=user; //    this.age=age; //    this.say=function(){alert("I am "+this.name+"\n"+this.age);} //} //var Chairman=function(name,sal

  • [js高手之路]图解javascript的原型(prototype)对象,原型链实例

    [js高手之路]图解javascript的原型(prototype)对象,原型链实例

    我们通过原型方式,解决了多个实例的方法共享问题,接下来,我们就来搞清楚原型(prototype),原型链的来龙去脉. function CreateObj(uName) { this.userName = uName; } CreateObj.prototype.showUserName = function(){ return this.userName; } var obj1 = new CreateObj('ghostwu'); var obj2 = new CreateObj('卫庄')

  • js使用原型对象(prototype)需要注意的地方

    我们先来一个简单的构造函数+原型对象的小程序 function CreateObj( uName, uAge ) { this.userName = uName; this.userAge = uAge; } CreateObj.prototype.showUserName = function () { return this.userName; } CreateObj.prototype.showUserAge = function () { return this.userAge; } 这

  • JS构造函数与原型prototype的区别介绍

    构造函数方法很好用,但是存在一个浪费内存 通过原型法分配的函数是所有对象共享的. 通过原型法分配的属性是独立.-----如果你不修改属性,他们是共享 如果我们希望所有的对象使用同一一个函数,最好使用原型法添加函数,这样比较节省内存. 例子: //----构造函数模式 为Cat对象添加一个不变的属性"type"(种类),再添加一个方法eat(吃老鼠).那么,原型对象Cat就变成了下面这样: <script> function Cat(name, color) { this.n

  • javascript prototype 原型链

    JavaScript中的prototype概念恰如其分地反映了这个词的内含,我们不能将其理解为C++的prototype那种预先声明的概念. JavaScript 的所有function类型的对象都有一个prototype属性.这个prototype属性本身又是一个object类型的对象,因此我们也可以给这个prototype对象添加任意的属性和方法.既然prototype是对象的"原型",那么由该函数构造出来的对象应该都会具有这个"原型"的特性.事实上,在构造函数

  • JavaScript为对象原型prototype添加属性的两种方式

    复制代码 代码如下: <script type="text/javascript"> <!-- /* 给原型 prototype 添加属性的两种方式 */ //方式一 var myObj = function(){ this.study = "JavaScript"; } myObj.prototype.hobby = function() { this.hobby = "See girl"; } var newObj = ne

随机推荐