005 创建对象之原型模式(一)

JavaScript 中,每个对象(nullundefined 、通过 Object.create(null) 创建出的对象除外)都有一个 [[prototype]] 属性,这个 [[prototype]] 也叫作对象的原型。JavaScript 中一切皆对象,当我们在创建各种各样的对象时(nullundefined 、通过 Object.create(null) 创建出的对象除外):值类型、引用类型、函数甚至原生类型,都会在该对象创建伊始,都会为其分配一个原型属性。该属性是一个引用类型,或者说指针,指向另外一个对象。

获取原型对象

获取原型对象有两种方法:

  • 通过标准的 Object.getPropertyOf() 方法
  • 通过对象的 __proto__ 属性(非标准,但很多浏览器支持)
function Person(name){ this.name = name }
// 创建对象
let arr = []
let str = ""
let obj = {}
let person = new Person("MIKE")

// 获取对象的原型 通过 Object.getPropertyOf() 方法
Object.getPropertyOf(arr)
Object.getPropertyOf(str)
Object.getPropertyOf(obj)
Object.getPropertyOf(person)

// 获取对象的原型 通过 __proto__ 属性
arr.__proto__
str.__proto__
obj.__proto__
person.__proto__

通过上面的方式可以获取任意对象的原型。

没有原型的对象

JavaScript 有以下几种对象是没有原型的:

  • undefined
  • null
  • 通过 Object.create(null) 创建出的对象

因此我们无法获取到他们的原型对象,如果强行获取或引发错误。

let a = undefined
let b = null
a.__proto__ //Uncaught TypeError: Cannot read property '__proto__' of undefined
Object.getProertyOf(b) //Uncaught TypeError: Cannot convert undefined or null to object

通过 Object.create(null) 创建出来的对象在获取其原型时,Object.getPropertyOf()__proto__ 属性有点差异:

let c = Object.create(null)
Object.getPropertyOf(a) //null
c.__proto__ //undefined

JavaScript 是基于原型继承

JavaScript 中的对象都是基于原型继承来的,每个对象中都保存了一个指针,指向该对象的原型对象。通过在原型对象上添加属性和方法后,可以让子对象继承以实现代码复用。

Object.create() 方法

通过 Object.create() 方法可以创建对象,该方法接受一个对象作为原型,返回一个基于该原型对象创建出来的对象。

let personProto = {
  getName(){
    console.log(this.name)
  }
}

let person1 = Object.create(personProto)
let person2 = Object.create(personProto)
person1.name = "MIKE"
person2.name = "JACK"
person1.getName() // "MIKE"
person2.getName() // "JACK"
person1.getName === person2.getName //true

以上的 person1person2 都是通过同一个原型 personProto 创建出来的,因此他们共享了 getName() 方法。
以上就是所谓的原型模式了,JavaScript 中所有的对象都是这样创建出来的。

构造函数的 prototype 属性

每个函数都有一个 prototype 属性,该属性是一个指针,指向一个对象,在通过 new 操作符创建对象时,会将函数的 prototype 属性作为新建对象的原型。要想新建的对象能够复用原型上的属性或方法,只需在该对象上进行增加即可。

function Person(name){ this.name = name }
Person.ptototype.showName = function(){ console.log(this.name) }
let person1 = new Person("MIKE")
let person2 = new Person("JACK")
person1.getName() // "MIKE"
person2.getName() // "JACK"

默认每个函数的 prototype 都会有一个 constructor,该属性指向函数本身。我们在创建出来的对象上可以访问到这个属性:

person1.constructor === Person //true
person1.constructor === person2.constructor //true

构造函数的秘密

现在我们知道,通过 new 操作符调用构造函数创建对象只是一个障眼法,这个“构造函数”并非是一个真正意义上的类,其创建出的对象和构造函数本身并没有直接的关系,而只是将构造函数上的一个 prototype 属性作为自身的原型而已。
这个 new 操作符只是为了对其他面向对象语言中创建对象进行视觉上的模拟而已。
下面再来梳理一下使用构造函数创建对象的过程:

  • 以函数的 prototype 属性为原型创建一个空对象
  • 把构造函数的执行上下文赋值(this)给这个对象
  • 通过 this 在函数内部进行属性、方法的添加
  • 执行完毕,返回该对象

属性的查找

JavaScript 中,每个对象都是以某一个对象作为原型构造的,而这个原型对象也是由另外一个对象构成的...对象在进行属性查找时,会首先在自身上进行查找,找到就停止。如果没有找到,就去该对象的原型对象上查找,如果也没有找到,就去原型对象的原型对象上查找,一直找到 Object.prototype 为止。
我们也可以说,对象进行属性查找时,是按照原型链`一层一层进行查找的。

原型链上的属性不可修改

对象可以从原型链上获取属性,但无法设置或修改原型链上的属性。原型链的目的让对象之间能实现属性方法复用,如果每个对象都能修改其上的属性,那岂不是乱套了。
因此原型链的机制是这样的:

  • 当对象进行属性读取时,如果对象本身没有这个属性,则会在原型链上获取
  • 当对象设置属性时,不管原型链上有没有这个属性,都会在对象本身上进行设置,而不会修改原型链

也就是说,我可以给你,但你不能在我身上动手动脚,要动手动脚,找你自己做试验把!

function Person(name){ this.name = name }
Person.ptototype.showName = function(){ console.log(this.name) }
let person1 = new Person("MIKE")
let person2 = new Person("JACK")
person1.showName = function(){ console.log("hahaha~") }
person1.showName() //"hahaha~"
person2.showName() //"JACK"

原型的动态性

原型是具有动态性的,什么叫动态呢?就是说对象每次读取数据时,都会在原型链上进行一次搜索,而不会有缓存会副本之类的机制。,因此,在原型上做的任何改变都可以从实例上反映出来。

function Person(name){ this.name = name }
Person.ptototype.showName = function(){ console.log(this.name) }
let person1 = new Person("MIKE")
person1.showName ()
// 修改原型对象
Person.ptototype.showName = function(){ console.log("我不是黄蓉") }
person1.showName () //"我不是黄蓉"

原型链一经创建不会更改

对象之所以能找到通过原型链搜索属性,就是因为其保存了其原型对象的一个指针,这个指针始终指向原型对象所在的内存空间,对象一旦创建,其原型链就确定好,不会再更改了。

// 定义原型对象
let protoObj = { name:"MIKE" }
// 基于原型对象创建对象
let person = Object.create(protoObj)
person.name // "MIKE"

上面我们创建了一个对象 protoObj,并以此对象为原型创建了一个对象,于是新建对象可以获取到原型对象上的属性。
再进一步,如果我们将 protoObj 指向另一个对象,会发生什么情况呢?

protoObj = { name:"JACK" }
person.name // "MIKE"

纳尼?居然还是 MIKE???上面不是说原型具有动态性吗?为什么 personname 属性还是之前的属性呢?魔方,容我慢慢解释。
上面的代码流程是这样的:

  • 在堆内存中开辟了一块内存空间,放入了 { name:"JACK" } 这个玩意
  • 创建了一个 protoObj 变量,指向了前面创建的堆内存空间
  • 基于 protoObj 创建了一对象,该对象的原型属性复制了 protoObj 中保存的内存地址,同样指向了上面那块堆内存
  • 查找属性时,通过对象原型属性中保存的指针地址,在原型链上进行属性查找(这个原型链实际上是一个链表~)
  • 又开辟了一块内存空间,放入了 { name:"JACK" } 这个玩意,然后修改 protoObj 中保存的内存地址,让其指向这个新创建的堆内存
  • 但是,person 对象的原型中存放的地址是没有改变的,其还是指向第一次创建的堆内存空间。
  • person 上查找属性,仍然是按照之前的原型链查找,属性值为 MIKE

这就是上面代码的执行流程,可见,改变 protoObj 的指向并不会改变 person 对象原型的指向,是不会对 person 对象造成任何影响的。虽然 protoObj 的引用断开,但是 person 原型的引用并没有断开,因此不会对第一次创建对象时占用的堆内存空间进行垃圾回收,person 仍然可以访问到这块内存空间中的内容。因此,除了使用 __proto__ 属性重新引用新的原型对象,person 对象的原型是不会改变的。
但是,改变 protoObj 的指向后,再基于其创建的对象,就会按照新的原型链查找属性啦:

let person2 = Object.create(protoObe)
person2.name // "JACK"
person.name // "MIKE"

上面说了一大推,不知道您看明白没有,这里再总结一下:

  • 对象已经创建,其原型属性对原型对象的引用就不会改变,除非使用 __proto__ 手动进行修改
  • 如果一个用来创建对象的原型对象(这里是 protoObj)改变了引用,对已经创建好的对象不会有任何影响
  • 但是,如果原型对象(这里是 protoObj )发生改变后,基于其创建的新对象将会应用新的原型对象
  • 原型具有动态性的前提是:对象所依赖的原型对象(这里是 protoObj)对堆内存空间的指向不变
  • 所谓原型链,其实就是一个一个的链表

总结

本文主要讲到了对象的原型,任何对象都是基于一个原型对象创建出来的,以及揭示了使用构造函数创建对象的障眼法,还讲到了原型的动态性和不可修改性。其中,原型的不可修改性的本质是 JavaScript 中的引用类型数据是按照引用赋值,我们对引用类型变量所做的修改,其实是通过变量中保存的内存地址对原始内存进行修改,理解了这个,其他就好理解了。
关于原型的内容还有一些,这里为了节约篇幅,就不往下写了,下篇文章继续。

完。

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

推荐阅读更多精彩内容