JavaScript

005 创建对象之原型模式（一）

2017-08-10  本文已影响10人  柏丘君

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

获取原型对象

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

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 有以下几种对象是没有原型的：

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

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

以上的 person1 和 person2 都是通过同一个原型 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 操作符只是为了对其他面向对象语言中创建对象进行视觉上的模拟而已。
下面再来梳理一下使用构造函数创建对象的过程：

属性的查找

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？？？上面不是说原型具有动态性吗？为什么 person 的 name 属性还是之前的属性呢？魔方，容我慢慢解释。
上面的代码流程是这样的：

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

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

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

总结

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

完。

上一篇 下一篇

猜你喜欢

热点阅读