今天,咱来聊聊JavaScript中的原型跟原型链
这一块的知识,主要是设计模式方面的。
首先,我们知道JavaScript是面向对象的。既然是面向对象,那它自然也有相应的类跟对象等概念。
在JavaScript中,function这个东西还是比较特殊的,它既能用来声明方法,还能用来声明一个类似C#/.NET中的类,然后new一下得到一个对象。
举例
思考:
既然person1.sayName===person2.sayName返回false,两个对象person1和person2各自的sayName方法虽然本身不同,实现的效果是一样的,那可不可以让每个对象调用的是同一个公共的方法sayName呢?答案是可以的。
这里有个优化方案
以上的方案的确实现了想要的结果,但我们知道JavaScript是面向对象的,面向对象的三要素有个封装。但以上的方案并没有体现出封装的思想。更好的方式是通过原型模式来解决。
以上便是原型模式,也并非没有缺点,虽然不用在构造函数里面传递参数来初始化,但得到的对象属性都是一样的。这便是最大的问题。
怎么办呢?
构造函数模式可以通过构造函数来传递参数进行初始化,原型模式可以共享某些属性跟方法。那可不可以合二为一,将两者结合起来,岂不更好?
二者结合,代码如下:
以下三句话特别重要,需要深刻理解。
1、每个函数都有个prototype属性,prototype是函数独有的属性。
2、每个对象都有个__proto__属性。__proto__是对象独有的属性。
2、每个函数的portotype的是Object的实例
在JavaScript中,继承便是通过原型链实现的。
既然明白以上的知识,怎么优雅地运用到实际工作中呢?
在搞Vue项目时,我们几乎不可避免地会通过EventBus进行组件通信。
每次都需要var bus=new Vue();
在这里便可以通过原型模式来优化。
在其他组件,便可以直接通过this.$bus发布订阅事件了。