Prototype

 bp[ 原型最重要的是为了share(共享), 共享一些方法和属性。


原型Prototype

JavaScript 是一门基于原型的语言,每个对象都有一个原型(对象)作为模板。
通过原型这种机制,对象能从其他对象继承功能特性;这种继承机制与经典的面向对象编程语言不同。

__proto__

每一个对象都有一个__proto__属性用于继承功能特效,该属性不是标准的一部分,但却是事实标准

声明对象 fan 如下, 当访问name,traval()等自身具有的属性/方法时,会从对象自身获取
当访问,valueOf(), toString(),等非自身属性/方法时,会从(也只能)__proto__属性上获取

let fan = {
name:'女粉丝',
gender:'女',
height:162,
eat(){ return `吃饭。`},
sleep(){return `睡觉`},
intro() {return `大家好!我是${this.name}。`},
travel() {return'环游世界 🌏🌎🌍'}
}

>fan.name
→"吕粉丝"
>fan.travel()
→"环游世界 🌏🌎🌍"
>fan.valueOf()
→Object{name:"吕粉丝", height:162, gender:"女",eat:function,sleep:function…}


Object.prototype

以下代码都描述了 一个事实, Object,prototype (引用的对象) 是fan 的原型

>fan.__proto__===Object.prototype//fan.__proto__ 和 Object.prototype 引用同一对象
→true
>Object.prototype.isPrototypeOf(fan)//Object.prototype(引用的对象) 是 fan 的原型
→true
>Object.prototype===Object.getPrototypeOf(fan)
→true


Object.create()

Object.create() ES5  方法允许使用指定的原型对象和属性,创建一个新的属性

//常人的属性和方法//常人的原型
const personProto  = {
name:' ',
eat() {return'吃饭 🍚'},
sleep() {return'睡觉 😴'},
sing() {return'唱歌 🎤'},
intro() {return`大家好!我是${this.name}。`}
}

//让 personProto 作为 fan 的原型

let fan= Object.create(personProto)
fan.name='吕粉丝'
fan.height=162
fan.gender='女'
fan.travel=function() {return'环游世界 🌏🌎🌍'}

显然,以下表达式都会返回true。

fan.__proto__ === personProto
true
personProto.isprototype(fan)
true
personProto === Object.getPrototypeOf(fan)

true


通过Object.keys()获取fan的所有属性名。

>Object.keys(fan)
→ ["name","height","gender","travel"]

Object.prototype.hasOwnProperty()
Object.prototype.hasOwnProperty()方法是用于判定某个指定的属性是否对象的自身(非继承)属性。

>for(letkeyinfan)console.log(key, fan[key]) 
name 吕粉丝 
height162
gender 女 
travel  function() {return'环游世界 🌏🌎🌍'} 
eat  functioneat() {return'吃饭 🍚'} 
sleep  functionsleep() {return'睡觉 😴'} 
sing  functionsing() {return'唱歌 🎤'} 
intro  functionintro() {return`大家好!我是${this.name}。`}
→undefined

由于for...in会把继承的属性和方法都进行遍历,因此需要Object.prototype.hasOwnProperty()。

>for(letkeyinfan)fan.hasOwnProperty(key)&&console.log(key, fan[key]) 
name 吕粉丝 
height 162
gender 女 
travel  function() {return'环游世界 🌏🌎🌍'}
→false


原型链 Prototype Chiin

原型本身就是一个对象,因此也有__proto__属性。即原型的原型。还有原型的原型的原型等。这就是原型链。
Object.prototype.__proto__的值是null,而null 没有原型,到此就是原型链末端。

//创建艺人的原型
const  artistProto=Object.create(personProto)
artistProto.sing=function() {return '唱歌 11🎤🎧🎸'}

//让 artistProto 作为 jay 的原型
let  jay=Object.create(artistProto)
jay.name='周杰伦'
jay.height=175
jay.gender='男'
jay.aiyo=function() {return'哎哟,不错哦!'}


//让 artistProto 作为 kris 的原型
let kris=Object.create(artistProto)
kris.name='吴亦凡'
kris.height=187
kris.intro=function() {return`歌手${this.name}。其实我是一个演员。`}
kris['有 freestyle 吗?']=function() {return['有 freestyle 吗?','还有 freestyle 吗?','有没有 freestyle?'][Math.floor(Math.random()*3)]};

以下代码中jay.intro()和kris.intro()的intro()方法分别来自哪里?

在对象创建之后往其原型新增属性/方法,对象可以立即访问到。

>jay.sing()
→"唱歌 🎤🎧🎸"
>artistProto.film=function() {return'拍戏 🎬🎬🎬'}
→function() {return'拍戏 🎬🎬🎬'}
>jay.film()
→"拍戏 🎬🎬🎬"


instanceof  运算符用来测试一个对象在其原型链中是否存在一个构造函数的prototype 属性。

var a = [1,2,3]
a instanceof Object   //  意思是 a 的原型链上有没有Object.prototype
true 

a.constructor
function Array([native code])
a.__proto__ === a.constructor.prototype  // a.constructor. prototype  === Array.prototype
true

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

推荐阅读更多精彩内容