`

javascript中的__proto__, prototype和constructor

阅读更多

1》__proto__

javascript中一切都是对象,每个对象都是基于原型对象创建的,每个对象中都有__proto__属性,这个属性指向的就是它基于的原型对象。

__proto__属性是系统(浏览器)自动给创建的,在对象被创建的时候自动指向基于的原型对象。

 

比如:

 

function Foo(){

 

}

 

var foo=new Foo();

 

foo.__proto__指向的就是Foo.prototype


因为Foo函数本身也是个对象,所以Foo.__proto__指向的是Function.prototype


Function.prototype本身也是对象,所以Function.prototype.__proto__指向的是Object.prototype

 

2》prototype

只有构造函数对象才有prototype属性,构造函数的作用是创建对象,创建对象的时候,它要知道这个对象基于哪个原型来创建,这个prototype指向的就是这个原型。

prototype属性也是系统(浏览器)给创建的,并指向创建对象时基于的原型。

注意不是构造函数本身基于的原型,本身基于的原型都是Function.prototype。

比如:

 

function Foo(){

 

}

//系统自动把Foo的prototype属性指向Foo.prototype

//所以,new Foo()的时候,就基于Foo.prototype来创建,

//foo.__proto__就是Foo.prototype

var foo=new Foo();

 

foo.__proto__和Foo.prototype指向的都是Foo.prototype。

自定义一个Foo构造函数的时候,系统默认会自动指定一个Foo.prototype原型对象,其实就是一个Object对象。

3》constructor

只有原型对象才有constructor属性,而且也是系统(浏览器)给创建的。前面说过构造函数对象的prototype属性会指向一个原型对象,那么这个原型对象中的constructor属性指向的就是这个构造函数。

constructor属性其实是给自定义对象使用的,自定义对象通过constructor属性就可以知道自己是用哪个构造函数new出来的。比如:

function Foo(){

 

}

 

var foo=new Foo();

 

alert(foo.constructor)  // function Foo(){}

// foo中没有constructor,foo访问的是它的原型Foo.prototype中的constructor属性。

 

一个对象被new出来以后,就可以知道自己的两方面事情:

1. 通过foo.__proto__,可以知道自己是基于哪个原型创建出来的,相当于自己的父类

2. 通过foo.constructor,可以知道自己是用哪个构造函数构造出来的相当于自己的类

 

分享到:
评论

相关推荐

    prototype,__proto,constructor

    分析javascript中 prototype __proto__ constructor之间的关系

    图解prototype、proto和constructor的三角关系

    在javascript中,prototype、constructor以及__proto__之间有着“著名”的剪不断理还乱的三角关系,楼主就着自己对它们的浅显认识,来粗略地理理以备忘,有不对之处还望斧正。

    TsangTszKin#HexoBlog#prototype、__proto__与constructor1

    它的作用就是当访问一个对象的属性时,如果该对象内部不存在这个属性,那么就会去它的__proto__属性所指向的那个对象(可以理解为父对象)里找,如果父对象也不存

    Javascript中获取对象的原型对象的方法小结

    在Javascript中,如果我们有一个对象但是又不知道它的构造函数时,如何获取它的原型对象呢? 在Chrome中或是FireFox浏览器中,我们可以直接使用对象的__proto__属性获取它的原型对象。 代码如下: <!– lang: js ...

    【JavaScript源代码】怎样用JavaScript实现原型模式.docx

     prototype警告:学习了解原型模式前需先学习原型、原型链、prototype、__proto__、constructor等知识; 实现原型模式 ES5中的API:Object.create(prototype, optionalDescriptorObjects) Object.create()方法...

    JavaScript面向对象编程指南

    JavaScript面向对象编程指南不适合初学者 适合想提升JavaScript编程能力的人 prototype _proto_ constructor 浅拷贝深拷贝 JavaScript编程模式 设计模式

    傲娇大少之—【JS的原型,prototype、__proto__、constructor】

    因为现在封装好的主流框架和插件很多,用着方便,底层的东西都不怎么用了,也用不太到了。 最近自己在开发一款插件,突然发现这个东西我好像忘的差不多了。我的良心受到了深深的谴责,我怎么可能是这么不求甚解的人...

    【JavaScript源代码】JavaScript中的几种继承方法示例.docx

    JavaScript中的几种继承方法示例  1.原型链继承  原理: 子类原型指向父类实例对象实现原型共享,即Son.prototype = new Father()。 这里先简单介绍下原型 js中每个对象都有一个__proto__属性,这个属性指向的...

    JavaScript prototype属性深入介绍

    每个函数创建时默认带有一个prototype属性,其中包含一个constructor属性,和一个指向Object对象的隐藏属性__proto__。constructor属性的值为该函数的对象。在一个函数前面加上new来调用,则会创建一个隐藏连接到该...

    前端Javascript相关面试基础问答整理md

    从“原始值和引用值类型及区别”到“EventLoop事件循环&宏任务和微任务 ”,整理了Javascript学习和面试中遇到的一些基础和常见的问题。 总共包含33个问答,部分问题带有代码解答。 1. 原始值和引用值类型及区别 2. ...

    深入理解javascript prototype的相关知识

    如图比较好的阐述了prototype和__proto__ 简单的可以这么理解: 狗类A( function foo()),狗类A的模板描述:A.模板 (foo.prototype)是一个对象object, A.模板有个构造方法 foo.prototype.constructor=function foo()...

    JavaScript中的几种继承方法示例

    js中每个函数都有一个prototype属性,这个属性指向该函数作为构造函数调用时创建的实例的原型。原型对象上有一个constructor属性,指向创建该对象的构造函数,该属性不可枚举。 var obj = {}; obj.__proto__ === ...

    JavaScript-skills

    obj.__proto__ = Constructor.prototype; var ret = Constructor.apply(obj, arguments); return typeof ret === 'object' ? ret : obj; } 注意如果返回值是一个基本类型,就相当于没有返回值处理. 模拟bind函数...

    weapp.qrcode.js

    var hasIsPrototypeOf = obj.constructor && obj.constructor.prototype && hasOwn.call(obj.constructor.prototype, 'isPrototypeOf'); // Not own constructor property must be Object if (obj.constructor &&...

    Biu-blog:个人博客

    constructor, prototype, __proto__ 详解 Webpack webpack-dev-server使用方法,看完还不会的来找我~ 基于后编译的国际化解决方案 Webpack hash 生成规则 Webpack Ruleset loader过滤器 Webpack Loader 高手进阶(一)...

    深入理解Angular.JS中的Scope继承

    在JavaScript中,每创建一个构造函数(constructor),就会同时给该函数生成一个指向原型对象的属性prototype。每个原型对象又获得一个constructor属性指向相应的构造函数,原型对象的其他属性和方法从Object继承而...

    javascript关于继承的用法汇总

    本文实例汇总了javascript关于继承的用法。分享给大家供大家参考。...proto.constructor = subType; subType.prototype = proto; }; }); //—————————————————————————— d

    JS原型、原型链深入理解

    原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,...所以为了方便查看一个对象的原型,Firefox和Chrome中提供了__proto__这个非标准(不是所有浏览器都支持)的访问器(EC

    详解JavaScript中new操作符的解析和实现

    前言 new 运算符是我们在用构造函数创建实例... 把新对象的 __proto__ 链接到构造函数的 prototype 对象(每一个用户定义函数都有一个 prototype 属性指向一个对象,该对象有一个 constructor 属性指向该函数),让我们

Global site tag (gtag.js) - Google Analytics