JavaScript中的原型、原型链、原型模式

今天，咱来聊聊JavaScript中的原型跟原型链

原型跟原型模式

这一块的知识，主要是设计模式方面的。
首先，咱们知道JavaScript是面向对象的。既然是面向对象，那它天然也有相应的类跟对象等概念。
在JavaScript中，function这个东西仍是比较特殊的，它既能用来声明方法，还能用来声明一个相似C#/.NET中的类，而后new一下获得一个对象。
举例

//js中的function使用方式一：
function testFunc() {
    cosnole.log(123456);
}
testFunc();//123456;

//js中的function使用方式二：在这里用到了构造函数模式
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        alert(this.name);
    }
}
var person1 = new Person('qwe', 26);//function还能够new一个出来，获得一个对象。
person1.sayName();

console.log(person1.constructor === Person);//true

var person2 = new Person('fgh', 26);
person2.sayName();
console.log(person1.sayName === person2.sayName);//false，这里是个重点，person1跟person2的sayName方法是不同的，是各自的方法

//方式二还能够这样用
Person('qwe', 26);
window.sayName();

思考：
既然person1.sayName===person2.sayName返回false,两个对象person1和person2各自的sayName方法虽然自己不一样，实现的效果是同样的，那可不可让每一个对象调用的是同一个公共的方法sayName呢？答案是能够的。
这里有个优化方案

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = sayName;
}
function sayName() {
    alert(this.name);
}
var person1 = new Person('qwe', 26);
var person2 = new Person('jkl', 26);
console.log(person1.sayName === person2.sayName);//true    这里是调用的公共的方法，不是各自本身的方法

以上的方案的确实现了想要的结果，但咱们知道JavaScript是面向对象的，面向对象的三要素有个封装。但以上的方案并无体现出封装的思想。更好的方式是经过原型模式来解决。

function Person() {
}
Person.prototype.name = "uip";//这里的Person是属性，不是构造函数，这个Person还有个属性prototype，原型模式即是经过这个来实现的
Person.prototype.age = 26;
Person.prototype.sayName = function () {
    alert(this.name);
}
//另一种写法
Person.prototype = {
    name: 'uio',
    age = 26,
    sayName = function () {
        alert(this.name);
    }
}

var person1 = new Person();
person1.sayName();

以上即是原型模式，也并不是没有缺点，虽然不用在构造函数里面传递参数来初始化，但获得的对象属性都是同样的。这即是最大的问题。
怎么办呢？
构造函数模式能够经过构造函数来传递参数进行初始化，原型模式能够共享某些属性跟方法。那可不能够合二为一，将二者结合起来，岂不更好？
两者结合，代码以下：

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype = {
    sayName: function () {
        alert(this.name);
    }
}
var person1 = new Person('sdaf', 26);
person1.sayName();
var person2 = new Person('ssdf', 26);
person2.sayName();
console.log(person1.sayName === person2.sayName);//true，看到这里，相信便会体会到这个模式精妙之处了吧。sayName是共有的方法，你们共享。

原型链的问题

如下三句话特别重要，须要深入理解。
一、每一个函数都有个prototype属性，prototype是函数独有的属性。
二、每一个对象都有个__proto__属性。__proto__是对象独有的属性。
二、每一个函数的portotype的是Object的实例
在JavaScript中，继承即是经过原型链实现的。

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype = {
    sayName: function () {
        alert(this.name);
    }
}
var person1 = new Person('sdaf', 26);

console.log(person1.__proto__ === Person.prototype);//true
console.log(Person.prototype.__proto__ == Object.prototype);//true   
//在这里说明一下，Person的基类是Object，Person的prototype是Object的实例，因此是个对象，它有__proto__这个属性，而这个属性等价于Object的prototype属性。
//这样一环扣一环，构成了一道链，即是所谓的原型链
console.log(Ojbect.prototype.__proto__ === null);//true

实战

既然明白以上的知识，怎么优雅地运用到实际工做中呢？
在搞Vue项目时，咱们几乎不可避免地会经过EventBus进行组件通讯。
每次都须要var bus=new Vue();
在这里即可以经过原型模式来优化。

Vue.prototype.$bus = new Vue(); // EventBus用于无关系组件间的通讯。

在其余组件，即可以直接经过this.$bus发布订阅事件了。