后面包车型大巴话

javascript里的关联又多又乱。成效域链是一种单向的链式关系,还算轻松清晰;this机制的调用关系,稍微某些复杂;而关于原型,则是prototype、proto和constructor的三角形关系。本文先用一张图直抒己见,然后详细表明原型的三角形关系

前方的话

  javascript里的关联又多又乱。作用域链是一种单向的链式关系,还算轻巧清晰;this机制的调用关系,稍微有些复杂;而至于原型,则是prototype、proto和constructor的三角形关系。本文先用一张图开门见山,然后详细分解原型的三角关系

 

本文转自:

最近的话

  javascript里的关系又多又乱。效用域链是一种单向的链式关系,还算轻松清晰;this机制的调用关系,稍微有些复杂;而关于原型,则是prototype、proto和constructor的三角关系。本文先用一张图刀切斧砍,然后详细表明原型的三角形关系

 

图示

金沙注册送58 1

图示

金沙注册送58 2

 

前方的话

  javascript里的关联又多又乱。功效域链是壹种单向的链式关系,还算轻巧清晰;this机制的调用关系,稍微有些复杂;而至于原型,则是prototype、proto和constructor的三角形关系。本文先用一张图心直口快,然后详细分解原型的三角关系

 

图示

金沙注册送58 3

 

概念

上海体育场面中的复杂关系,实际上来自就两行代码

    function Foo(){};
    var f1 = new Foo;

【构造函数】
用来开首化新成立的对象的函数是构造函数。在例子中,Foo()函数是构造函数

【实例对象】
透过构造函数的new操作创设的对象是实例对象。能够用3个构造函数,构造多少个实例对象

    function Foo(){};
    var f1 = new Foo;
    var f2 = new Foo;
    console.log(f1 === f2);//false

【原型对象及prototype】
构造函数有多少个prototype属性,指向实例对象的原型对象。通过同1个构造函数实例化的三个对象具有一样的原型对象。平常选择原型对象来兑现接二连三

    function Foo(){};
    Foo.prototype.a = 1;
    var f1 = new Foo;
    var f2 = new Foo;

    console.log(Foo.prototype.a);//1
    console.log(f1.a);//1
    console.log(f2.a);//1

【constructor】
原型对象有2个constructor属性,指向该原型对象对应的构造函数

    function Foo(){};
    console.log(Foo.prototype.constructor === Foo);//true

鉴于实例对象能够承继原型对象的属性,所以实例对象也富有constructor属性,一样指向原型对象对应的构造函数

    function Foo(){};
    var f1 = new Foo;
    console.log(f1.constructor === Foo);//true

【proto】
实例对象有一个proto属性,指向该实例对象对应的原型对象

    function Foo(){};
    var f1 = new Foo;
    console.log(f1.__proto__ === Foo.prototype);//true

概念

  上海体育场合中的复杂关系,实际上来自就两行代码

function Foo(){};
var f1 = new Foo;

【构造函数】

  用来开头化新创制的对象的函数是构造函数。在例子中,Foo()函数是构造函数

【实例对象】

  通过构造函数的new操作创制的对象是实例对象。能够用1个构造函数,构造七个实例对象

function Foo(){};
var f1 = new Foo;
var f2 = new Foo;
console.log(f1 === f2);//false

【原型对象及prototype】

  构造函数有2个prototype属性,指向实例对象的原型对象。通过同3个构造函数实例化的多少个对象具备同等的原型对象。日常应用原型对象来完毕持续

function Foo(){};
Foo.prototype.a = 1;
var f1 = new Foo;
var f2 = new Foo;

console.log(Foo.prototype.a);//1
console.log(f1.a);//1
console.log(f2.a);//1

【constructor】

  原型对象有叁个constructor属性,指向该原型对象对应的构造函数

function Foo(){};
console.log(Foo.prototype.constructor === Foo);//true

  由于实例对象可以再而三原型对象的属性,所以实例对象也有所constructor属性,同样指向原型对象对应的构造函数

function Foo(){};
var f1 = new Foo;
console.log(f1.constructor === Foo);//true

一张图精通prototype,proto和constructor的三角关系。【proto】

  实例对象有二个proto属性,指向该实例对象对应的原型对象

function Foo(){};
var f1 = new Foo;
console.log(f1.__proto__ === Foo.prototype);//true

 

图示

 

概念

  上海体育场面中的复杂关系,实际上来自就两行代码

function Foo(){};
var f1 = new Foo;

【构造函数】

  用来开始化新制造的指标的函数是构造函数。在例子中,Foo()函数是构造函数

【实例对象】

  通过构造函数的new操作创建的目的是实例对象。能够用一个构造函数,构造多少个实例对象

function Foo(){};
var f1 = new Foo;
var f2 = new Foo;
console.log(f1 === f2);//false

【原型对象及prototype】

  构造函数有二个prototype属性,指向实例对象的原型对象。通过同三个构造函数实例化的八个指标具有一样的原型对象。日常利用原型对象来促成持续

function Foo(){};
Foo.prototype.a = 1;
var f1 = new Foo;
var f2 = new Foo;

console.log(Foo.prototype.a);//1
console.log(f1.a);//1
console.log(f2.a);//1

【constructor】

  原型对象有二个constructor属性,指向该原型对象对应的构造函数

function Foo(){};
console.log(Foo.prototype.constructor === Foo);//true

  由于实例对象足以继续原型对象的习性,所以实例对象也颇具constructor属性,同样指向原型对象对应的构造函数

function Foo(){};
var f1 = new Foo;
console.log(f1.constructor === Foo);//true

【proto】

  实例对象有多个proto属性,指向该实例对象对应的原型对象

function Foo(){};
var f1 = new Foo;
console.log(f1.__proto__ === Foo.prototype);//true

 

说明

概念介绍完了,以后对图示的关联进行详细表明

    function Foo(){};
    var f1 = new Foo;

【第二有个别: Foo】

金沙注册送58 4

实例对象f一是由此组织函数Foo()的new操作成立的。构造函数Foo()的原型对象是Foo.prototype;实例对象f①通过__proto__性情也本着原型对象Foo.prototype

    function Foo(){};
    var f1 = new Foo;
    console.log(f1.__proto === Foo.prototype);//true

实例对象f1本人并不曾constructor属性,但它能够连续原型对象Foo.prototype的constructor属性

    function Foo(){};
    var f1 = new Foo;
    console.log(Foo.prototype.constructor === Foo);//true
    console.log(f1.constructor === Foo);//true
    console.log(f1.hasOwnProperty('constructor'));//false

下图是实例对象f1的垄断(monopoly)台效益

金沙注册送58 5

【第一某些: Object】

金沙注册送58 6

Foo.prototype是f一的原型对象,同时它也是实例对象。实际上,任何对象都得以看作是通过Object()构造函数的new操作实例化的靶子
所以,Foo.prototype作为实例对象,它的构造函数是Object(),原型对象是Object.prototype。相应地,构造函数Object()的prototype属性指向原型对象Object.prototype;实例对象Foo.prototype的proto属性同样指向原型对象Object.prototype

    function Foo(){};
    var f1 = new Foo;
    console.log(Foo.prototype.__proto__ === Object.prototype);//true

  

实例对象Foo.prototype自身持有constructor属性,所以它会覆盖承接自原型对象Object.prototype的constructor属性

    function Foo(){};
    var f1 = new Foo;
    console.log(Foo.prototype.constructor === Foo);//true
    console.log(Object.prototype.constructor === Object);//true
    console.log(Foo.prototype.hasOwnProperty('constructor'));//true

  
下图是实例对象Foo.prototype的操纵台作用

金沙注册送58 7

设若Object.prototype作为实例对象的话,其原型对象是怎么,结果是null。私以为,那恐怕也是typeof
null的结果是’object’的原由之壹吧

    console.log(Object.prototype.__proto__ === null);//true

【第二有的: Function】

金沙注册送58 8

前边已经介绍过,函数也是目的,只可是是装有特有功效的目的而已。任何函数都得以用作是因而Function()构造函数的new操作实例化的结果。
假设把函数Foo当成实例对象的话,其构造函数是Function(),其原型对象是Function.prototype;类似地,函数Object的构造函数也是Function(),其原型对象是Function.prototype

    function Foo(){};
    var f1 = new Foo;
    console.log(Foo.__proto__ === Function.prototype);//true
    console.log(Object.__proto__ === Function.prototype);//true

原型对象Function.prototype的constructor属性指向构造函数Function();实例对象Object和Foo自个儿并未有constructor属性,须要持续原型对象Function.prototype的constructor属性

    function Foo(){};
    var f1 = new Foo;
    console.log(Function.prototype.constructor === Function);//true
    console.log(Foo.constructor === Function);//true
    console.log(Foo.hasOwnProperty('constructor'));//false
    console.log(Object.constructor === Function);//true
    console.log(Object.hasOwnProperty('constructor'));//false

负有的函数都得以用作是社团函数Function()的new操作的实例化对象。那么,Function能够视作是调用其本身的new操作的实例化的结果
为此,假如Function作为实例对象,其构造函数是Function,其原型对象是Function.prototype

    console.log(Function.__proto__ === Function.prototype);//true
    console.log(Function.prototype.constructor === Function);//true
    console.log(Function.prototype === Function.prototype);//true

假诺Function.prototype作为实例对象的话,其原型对象是如何吗?和前边一样,全数的目标都得以当作是Object()构造函数的new操作的实例化结果。所以,Function.prototype的原型对象是Object.prototype,其原型函数是Object()

    console.log(Function.prototype.__proto__ === Object.prototype);//true

其次局地介绍过,Object.prototype的原型对象是null

    console.log(Object.prototype.__proto__ === null);//true

说明

  概念介绍完了,未来对图示的关联进展详细表达

function Foo(){};
var f1 = new Foo;

 

【第一部分: Foo】

金沙注册送58 9

  实例对象f一是因此组织函数Foo()的new操作创造的。构造函数Foo()的原型对象是Foo.prototype;实例对象f1经过__proto__属性也本着原型对象Foo.prototype

function Foo(){};
var f1 = new Foo;
console.log(f1.__proto === Foo.prototype);//true

  实例对象f一自己并不曾constructor属性,但它能够延续原型对象Foo.prototype的constructor属性

function Foo(){};
var f1 = new Foo;
console.log(Foo.prototype.constructor === Foo);//true
console.log(f1.constructor === Foo);//true
console.log(f1.hasOwnProperty('constructor'));//false

  下图是实例对象f一的垄断台效益

金沙注册送58 10

 

【第壹有个别: Object】

金沙注册送58 11

  Foo.prototype是f壹的原型对象,同时它也是实例对象。实际上,任何对象都能够当作是经过Object()构造函数的new操作实例化的目的

  所以,Foo.prototype作为实例对象,它的构造函数是Object(),原型对象是Object.prototype。相应地,构造函数Object()的prototype属性指向原型对象Object.prototype;实例对象Foo.prototype的proto属性一样指向原型对象Object.prototype

function Foo(){};
var f1 = new Foo;
console.log(Foo.prototype.__proto__ === Object.prototype);//true

  实例对象Foo.prototype本人持有constructor属性,所以它会覆盖承袭自原型对象Object.prototype的constructor属性

function Foo(){};
var f1 = new Foo;
console.log(Foo.prototype.constructor === Foo);//true
console.log(Object.prototype.constructor === Object);//true
console.log(Foo.prototype.hasOwnProperty('constructor'));//true

  下图是实例对象Foo.prototype的支配台效益

金沙注册送58 12

  假如Object.prototype作为实例对象的话,其原型对象是怎么着,结果是null。私认为,这或者也是typeof
null的结果是’object’的缘故之一吧

console.log(Object.prototype.__proto__ === null);//true

 

【第一局地: Function】

 金沙注册送58 13

 

  前面已经介绍过,函数也是指标,只不过是享有特殊功用的靶子而已。任何函数都能够看作是通过Function()构造函数的new操作实例化的结果

  假设把函数Foo当成实例对象的话,其构造函数是Function(),其原型对象是Function.prototype;类似地,函数Object的构造函数也是Function(),其原型对象是Function.prototype

function Foo(){};
var f1 = new Foo;
console.log(Foo.__proto__ === Function.prototype);//true
console.log(Object.__proto__ === Function.prototype);//true

  原型对象Function.prototype的constructor属性指向构造函数Function();实例对象Object和Foo本人并未constructor属性,必要后续原型对象Function.prototype的constructor属性

function Foo(){};
var f1 = new Foo;
console.log(Function.prototype.constructor === Function);//true
console.log(Foo.constructor === Function);//true
console.log(Foo.hasOwnProperty('constructor'));//false
console.log(Object.constructor === Function);//true
console.log(Object.hasOwnProperty('constructor'));//false

  全体的函数都能够看成是结构函数Function()的new操作的实例化对象。那么,Function可以看做是调用其自个儿的new操作的实例化的结果

  所以,借使Function作为实例对象,其构造函数是Function,其原型对象是Function.prototype

console.log(Function.__proto__ === Function.prototype);//true
console.log(Function.prototype.constructor === Function);//true
console.log(Function.prototype === Function.prototype);//true

  倘若Function.prototype作为实例对象的话,其原型对象是什么吧?和日前一样,全体的对象都能够视作是Object()构造函数的new操作的实例化结果。所以,Function.prototype的原型对象是Object.prototype,其原型函数是Object()

console.log(Function.prototype.__proto__ === Object.prototype);//true

  第三片段介绍过,Object.prototype的原型对象是null

console.log(Object.prototype.__proto__ === null);//true

 

概念

  上图中的复杂关系,实际上来自就两行代码

function Foo(){};
var f1 = new Foo;

金沙注册送58,【构造函数】

  用来早先化新创立的对象的函数是构造函数。在例子中,Foo()函数是构造函数

【实例对象】

  通过构造函数的new操作创造的对象是实例对象。能够用一个构造函数,构造八个实例对象

function Foo(){};
var f1 = new Foo;
var f2 = new Foo;
console.log(f1 === f2);//false

【原型对象及prototype】

  构造函数有2个prototype属性,指向实例对象的原型对象。通过同多个构造函数实例化的四个对象具有同等的原型对象。常常应用原型对象来贯彻接二连三

金沙注册送58 14😉

function Foo(){};
Foo.prototype.a = 1;
var f1 = new Foo;
var f2 = new Foo;

console.log(Foo.prototype.a);//1
console.log(f1.a);//1
console.log(f2.a);//1

金沙注册送58 15😉

【constructor】

  原型对象有多少个constructor属性,指向该原型对象对应的构造函数

function Foo(){};
console.log(Foo.prototype.constructor === Foo);//true

  由于实例对象可以承继原型对象的质量,所以实例对象也富有constructor属性,同样指向原型对象对应的构造函数

function Foo(){};
var f1 = new Foo;
console.log(f1.constructor === Foo);//true

【proto】

  实例对象有1个proto属性,指向该实例对象对应的原型对象

function Foo(){};
var f1 = new Foo;
console.log(f1.__proto__ === Foo.prototype);//true

 

说明

  概念介绍完了,今后对图示的涉及展开详尽表明

function Foo(){};
var f1 = new Foo;

 

【第三局部: Foo】

金沙注册送58 16

  实例对象f一是透过结构函数Foo()的new操作创立的。构造函数Foo()的原型对象是Foo.prototype;实例对象f一由此__proto__品质也针对原型对象Foo.prototype

function Foo(){};
var f1 = new Foo;
console.log(f1.__proto === Foo.prototype);//true

  实例对象f一本人并从未constructor属性,但它能够持续原型对象Foo.prototype的constructor属性

function Foo(){};
var f1 = new Foo;
console.log(Foo.prototype.constructor === Foo);//true
console.log(f1.constructor === Foo);//true
console.log(f1.hasOwnProperty('constructor'));//false

  下图是实例对象f一的主宰台功用

金沙注册送58 17

 

【第二片段: Object】

金沙注册送58 18

  Foo.prototype是f1的原型对象,同时它也是实例对象。实际上,任何对象都得以视作是因而Object()构造函数的new操作实例化的靶子

  所以,Foo.prototype作为实例对象,它的构造函数是Object(),原型对象是Object.prototype。相应地,构造函数Object()的prototype属性指向原型对象Object.prototype;实例对象Foo.prototype的proto属性同样指向原型对象Object.prototype

function Foo(){};
var f1 = new Foo;
console.log(Foo.prototype.__proto__ === Object.prototype);//true

  实例对象Foo.prototype自个儿具备constructor属性,所以它会覆盖承接自原型对象Object.prototype的constructor属性

function Foo(){};
var f1 = new Foo;
console.log(Foo.prototype.constructor === Foo);//true
console.log(Object.prototype.constructor === Object);//true
console.log(Foo.prototype.hasOwnProperty('constructor'));//true

  下图是实例对象Foo.prototype的操纵台效率

金沙注册送58 19

  假设Object.prototype作为实例对象的话,其原型对象是什么样,结果是null。私以为,那恐怕也是typeof
null的结果是’object’的案由之1吧

console.log(Object.prototype.__proto__ === null);//true

 

【第三有的: Function】

 金沙注册送58 20

 

  前边早已介绍过,函数也是指标,只但是是兼备独特作用的指标而已。任何函数都足以看成是因而Function()构造函数的new操作实例化的结果

  若是把函数Foo当成实例对象的话,其构造函数是Function(),其原型对象是Function.prototype;类似地,函数Object的构造函数也是Function(),其原型对象是Function.prototype

function Foo(){};
var f1 = new Foo;
console.log(Foo.__proto__ === Function.prototype);//true
console.log(Object.__proto__ === Function.prototype);//true

  原型对象Function.prototype的constructor属性指向构造函数Function();实例对象Object和Foo本人未有constructor属性,要求后续原型对象Function.prototype的constructor属性

function Foo(){};
var f1 = new Foo;
console.log(Function.prototype.constructor === Function);//true
console.log(Foo.constructor === Function);//true
console.log(Foo.hasOwnProperty('constructor'));//false
console.log(Object.constructor === Function);//true
console.log(Object.hasOwnProperty('constructor'));//false

  全体的函数都可以看成是结构函数Function()的new操作的实例化对象。那么,Function能够看做是调用其自身的new操作的实例化的结果

  所以,假诺Function作为实例对象,其构造函数是Function,其原型对象是Function.prototype

console.log(Function.__proto__ === Function.prototype);//true
console.log(Function.prototype.constructor === Function);//true
console.log(Function.prototype === Function.prototype);//true

  假使Function.prototype作为实例对象的话,其原型对象是什么样吧?和眼下同样,全数的靶子都可以视作是Object()构造函数的new操作的实例化结果。所以,Function.prototype的原型对象是Object.prototype,其原型函数是Object()

console.log(Function.prototype.__proto__ === Object.prototype);//true

  第叁片段介绍过,Object.prototype的原型对象是null

console.log(Object.prototype.__proto__ === null);//true

 

总结

【一】函数(Function也是函数)是new
Function的结果,所以函数能够当抓实例对象,其构造函数是Function(),原型对象是Function.prototype

【2】对象(函数也是指标)是new
Object的结果,所以指标能够用作实例对象,其构造函数是Object(),原型对象是Object.prototype

【叁】Object.prototype的原型对象是null

原文

总结

  【1】函数(Function也是函数)是new
Function的结果,所以函数可以看坚实例对象,其构造函数是Function(),原型对象是Function.prototype

  【二】对象(函数也是指标)是new
Object的结果,所以目的足以看成实例对象,其构造函数是Object(),原型对象是Object.prototype

  【叁】Object.prototype的原型对象是null

说明

  概念介绍完了,未来对图示的关联进展详尽表达

function Foo(){};
var f1 = new Foo;

 

【第2有个别: Foo】

金沙注册送58 21

  实例对象f一是因而组织函数Foo()的new操作创立的。构造函数Foo()的原型对象是Foo.prototype;实例对象f1通过__proto__属性也本着原型对象Foo.prototype

function Foo(){};
var f1 = new Foo;
console.log(f1.__proto === Foo.prototype);//true

  实例对象f一自己并不曾constructor属性,但它能够三番五次原型对象Foo.prototype的constructor属性

function Foo(){};
var f1 = new Foo;
console.log(Foo.prototype.constructor === Foo);//true
console.log(f1.constructor === Foo);//true
console.log(f1.hasOwnProperty('constructor'));//false

  下图是实例对象f壹的支配台效益

金沙注册送58 22

 

【第三有的: Object】

金沙注册送58 23

  Foo.prototype是f一的原型对象,同时它也是实例对象。实际上,任何对象都足以视作是通过Object()构造函数的new操作实例化的对象

  所以,Foo.prototype作为实例对象,它的构造函数是Object(),原型对象是Object.prototype。相应地,构造函数Object()的prototype属性指向原型对象Object.prototype;实例对象Foo.prototype的proto属性同样指向原型对象Object.prototype

function Foo(){};
var f1 = new Foo;
console.log(Foo.prototype.__proto__ === Object.prototype);//true

  实例对象Foo.prototype自个儿有所constructor属性,所以它会覆盖承继自原型对象Object.prototype的constructor属性

function Foo(){};
var f1 = new Foo;
console.log(Foo.prototype.constructor === Foo);//true
console.log(Object.prototype.constructor === Object);//true
console.log(Foo.prototype.hasOwnProperty('constructor'));//true

  下图是实例对象Foo.prototype的支配台效能

金沙注册送58 24

  假若Object.prototype作为实例对象的话,其原型对象是如何,结果是null。私以为,那只怕也是typeof
null的结果是’object’的缘故之一吧

console.log(Object.prototype.__proto__ === null);//true

 

【第①局地: Function】

 金沙注册送58 25

 

  后面已经介绍过,函数也是目的,只可是是怀有尤其效果的靶子而已。任何函数都足以作为是因此Function()构造函数的new操作实例化的结果

  假若把函数Foo当成实例对象的话,其构造函数是Function(),其原型对象是Function.prototype;类似地,函数Object的构造函数也是Function(),其原型对象是Function.prototype

function Foo(){};
var f1 = new Foo;
console.log(Foo.__proto__ === Function.prototype);//true
console.log(Object.__proto__ === Function.prototype);//true

  原型对象Function.prototype的constructor属性指向构造函数Function();实例对象Object和Foo本人并没有constructor属性,须求持续原型对象Function.prototype的constructor属性

金沙注册送58 26😉

function Foo(){};
var f1 = new Foo;
console.log(Function.prototype.constructor === Function);//true
console.log(Foo.constructor === Function);//true
console.log(Foo.hasOwnProperty('constructor'));//false
console.log(Object.constructor === Function);//true
console.log(Object.hasOwnProperty('constructor'));//false

金沙注册送58 27😉

  全体的函数都能够作为是组织函数Function()的new操作的实例化对象。那么,Function能够看成是调用其本人的new操作的实例化的结果

  所以,假若Function作为实例对象,其构造函数是Function,其原型对象是Function.prototype

console.log(Function.__proto__ === Function.prototype);//true
console.log(Function.prototype.constructor === Function);//true
console.log(Function.prototype === Function);//true

  假使Function.prototype作为实例对象的话,其原型对象是怎样呢?和最近同样,全数的靶子都能够用作是Object()构造函数的new操作的实例化结果。所以,Function.prototype的原型对象是Object.prototype,其原型函数是Object()

console.log(Function.prototype.__proto__ === Object.prototype);//true

  第二部分介绍过,Object.prototype的原型对象是null

console.log(Object.prototype.__proto__ === null);//true

 

总结

  【一】函数(Function也是函数)是new
Function的结果,所以函数可以视作实例对象,其构造函数是Function(),原型对象是Function.prototype

  【贰】对象(函数也是指标)是new
Object的结果,所以指标足以看狠抓例对象,其构造函数是Object(),原型对象是Object.prototype

  【三】Object.prototype的原型对象是null

总结

  【1】函数(Function也是函数)是new
Function的结果,所以函数能够看坚实例对象,其构造函数是Function(),原型对象是Function.prototype

  【2】对象(函数也是指标)是new
Object的结果,所以目的能够作为实例对象,其构造函数是Object(),原型对象是Object.prototype

  【三】Object.prototype的原型对象是null

好的代码像粥同样,都以用时间熬出来的

 

 

标签:
javascript总结

 

相关文章

网站地图xml地图