原型

image.png

对应代码

function Foo(name, age){
    this.name = name
    this.age = age
    this.getName = function(){
        return this.name
    }
}
Foo.prototype.sex = "man"
var foo = new Foo("四月天", 18)
console.log(foo)

打印结果:

一个Foo类型的对象:

image.png

展开:

foo对象的 [[prototpye]] 属性指向Foo.prototype,Foo.prototpye是一个Object类型的对象

image.png

Foo.prototope对象属性列表:

image.png

sex属性是手动添加的
constructor作为一个构造器指向了Foo这个Function(其实吧,本人理解constructor和function是一个概念
[[prototype]]属性作为Javascript中对象的隐式原型,每个对象具有的

SO:
foo对象的属性有6个
构造器中3个(name,getName,age)
构造器原型中属性sex算1个
构造器属性算1个
隐式原型[[prototype]]算一个

for(i in foo){
    console.log(i)
}

参与for in 遍历的有4个,[[prototype]]和constructor不参与遍历个
image.png

继续深入:展开Foo.prototype.[[prototype]]也就是Object.prototype

image.png

可以看出:
构造器(function)的原型的隐式原型指向了Object.prototype对象
然而这个对象Object.prototype是没有[[prototype]]属性的,或者说对象Object.prototype的[[prototype]]属性指向NULL
也就是说Object.prototype是继承的原点

Object.prototype的属性: 具体API去mdn查一下就OK了

constructor:ƒ Object()
hasOwnProperty:ƒ hasOwnProperty()
isPrototypeOf:ƒ isPrototypeOf()
propertyIsEnumerable:ƒ propertyIsEnumerable()
toLocaleString:ƒ toLocaleString()
toString:ƒ toString()
valueOf:ƒ valueOf()
__defineGetter__:ƒ __defineGetter__()
__defineSetter__:ƒ __defineSetter__()
__lookupGetter__:ƒ __lookupGetter__()
__lookupSetter__:ƒ __lookupSetter__()
get __proto__:ƒ __proto__()
set __proto__:ƒ __proto__()

展开Foo.prototype.constructor

image.png
image.png
  1. Foo.prototype.constructor指向了它自身
  2. Foo.prototype.constructor.[[prototype]]指向了Function.prototype
    也就是Foo.[[prototype]]指向了Function.prototype

现在是时候展开Function.prototype了

image.png

现在看到的这些方法是不是很亲切,没错,就是我们经常用的apply,call,bind,toString
Function.prototype.[[prototype]]当然是指向Object.prototype
Function.prototype.constructor指向他自身喽

apply:ƒ apply()
arguments:(...)
bind:ƒ bind()
call:ƒ call()
caller:(...)
constructor:ƒ Function()
length:0
name:""
toString:ƒ toString()
Symbol(Symbol.hasInstance):ƒ [Symbol.hasInstance]()
get arguments:ƒ ()
set arguments:ƒ ()
get caller:ƒ ()
set caller:ƒ ()
__proto__:Object
[[FunctionLocation]]:<unknown>
[[Scopes]]:Scopes[0]

但是Object和Function的构造器是什么东东

直接打印试试:

console.log(Object)
console.log(Function)

结果是这样的:


image.png

也就是说直接打印是看不到的,因为底层是C++代码

别急:前面一直在说function=constructor,只要查看Object和Function的构造器就好了呀

查看Object构造器:
image.png

看到create(),assign(),是不是很熟悉,没错就是他

查看Function()也就是查看Function.prototype.constructor
image.png

结果发现这哥们里面干干净净的啥也没有,嘿嘿
有一点要注意:Function.[[prototype]] == Function.prototype

:总结:

constructor(function)和prototype和[[prototype]]的关系
1.不管是什么对象都会有[[prototype]]属性
2.constructor和prototype互为属性,相互引用
3.普通的对象是没有prototype属性的,只有构造器有prototype属性,并且构造器的prototype属性是一个普通对象。

也就是说,js里面只有两种对象类型Function对象,普通对象(自己取得名,或者你叫他prototype类型对象也可以吧)

但是有一个例外 Function Window ()的proto为EventTarget.prototype

<!DOCTYPE html>
<html>
</html>

<script>
    console.log(Window);
    console.log("==================");
    console.log(window);
</script>   
image.png
image.png
image.png
总结:2019.05.13
1,声明一个function比如function fun(){} 必然对应一个原型即fun.prototype, 也就是说声明以后引擎会创建两个对象(fun以及fun.prototype)
2,fun的隐式原型(_proto_)指向Function.prototype,而Function.prototype指向Object.prototype
3,fun.prototype的隐式原型(_proto_)直接指向Object.prototype
4,既然最终都是指向Object.prototype(Object的显示原型),那么为什么要绕一下呢,因为要继承Function的以写特性,如下图:
image.png
因为func集构造方法功能、普通方法功能于一身,而他本身是一个对象,js中一切皆对象

修改Function的显示原型

<script>
    window.onload = function () {
        function Father(name, age) {
            this.name = name
            this.age = age
            this.getName = function () {
                return this.name
            }
        }
        Father.prototype.sex = "man"
        var foo = new Father("四月天", 18)
        console.log(foo.prototype)

        // 定义Child
        function Child() {
            this.birth = '09.08'
        }
        // 修改Child的原型
        Child.prototype = new Father('ziyi', 88)
        Child.prototype.constructor = Child //这一步可以不要,也不影响代码以及结果,这一步的作用是给原型对象赋予构造器
        var childInstance = new Child()
        console.log(childInstance);

    }
</script>

结果:


image.png

分析:


image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,312评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,578评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,337评论 0 333
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,134评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,161评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,303评论 1 280
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,761评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,421评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,609评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,450评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,504评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,194评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,760评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,836评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,066评论 1 257
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,612评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,178评论 2 341

推荐阅读更多精彩内容