prototype和开房:你会用才能理解它

有一些知识点我们就算知道概念也没用，因为你不会用。这节课我们来引入大家都觉得迷茫的知识点：prototype，概念也许大家都知道，但是怎么用呢？

回顾

上节课我们已经学了如何必须用new来实例化function
我们留了一个课后作业，要实现下面功能

var God = new GodClass({"version":"1.0"});
alert(God.version); //'1.0'

在我们实例化GodClass类的时候，传入参数，然后可通过实例化后的对象访问。

我们在上节课的代码的基础上来实现该功能：

var GodClass = function abc(obj){
    if(this instanceof abc){
        //把obj中的可枚举属性拿出来给this
        Object.assign(this,obj);
    }else{
        alert('不要胡搞');
    }
}

上面代码，Object.assign(this,obj);其中的this指的就是这个类被实例化后的对象，所以可以通过对象.属性的方式访问。

换个角度

比如我们使用PHP或者Java创建类对象，往往我们会创建
1、静态方法(变量)
2、实例方法(变量)
所谓的静态方法，就是不必实例化，直接使用类来调用方法，比如GodClass.init()这种形式。类名.方法或类名.属性。

JS中可以？自然是可以的，今天我们来模拟，并且顺便让大家对prototype怎么用有个感觉。

var GodClass = function abc(obj){
    if(this instanceof abc){
        //把obj中的可枚举属性拿出来给this
        Object.assign(this,obj);
    }else{
        alert('不要胡搞');
    }
}

//添加一个init方法
GodClass.init = function () {
    console.log('初始化');
}

上面代码，我们给GodClass类添加了一个init方法，我们只需如下调用，并能执行该方法:

GodClass.init(); //这就类似PHP中的静态方法了

那么要是实例化后的对象来调用该方法呢？

//实例化
var God = new GodClass({"version":"1.0"});
God.init(); //TypeError: God.init is not a function

报错：TypeError: God.init is not a function，这个God对象并不存在init方法。

问题来了

我们就是想要God对象也能调用这方法，怎么解决？
解决方法1：

var GodClass = function abc(obj){
    this.init = function(){
        console.log('实例化对象初始化');
    }
}

我们已经知道其中的this指向的就是实例化后的对象God，所以是可以通过实例化的对象访问init方法的。

解决方法2：使用prototype

var GodClass = function abc(){

}

//给GodClass的原型上添加一个init方法
GodClass.prototype.init = function () {
    console.log('初始化222');
}

//实例化
var God = new GodClass();
God.init(); //'初始化222'

prototype用法简单，但是怎么理解呢？
大家可以理解为一个“指针”，好比我出差去开房。
1、开房就是一个function，是一个行为，是一个动作的描述。随时可以在它上面新增子行为。

开房.init = function(){交钱}
开房.do = function(){提供身份证}
//...可以不断扩展

2、具体开房，拿了房卡后(比如302)，prototype指向房价地址

开房.prototype.notice = function(){不许抽烟}

注意点：(1)所有开房的人都会拥有这个 notice方法，(2)也只有开房后，才能提示不许抽烟。

GodClass.notice = function () {
    alert('不能洗澡');
}

GodClass.prototype.notice = function () {
    alert('不能抽烟');
}

上面代码，我们分别给Godclass类和Godclass类的prototype添加了notice方法。
它们之间是不冲突的，调用的时候会执行各自的方法。

GodClass.notice(); //'不能洗澡'

var God = new GodClass({"version":"1.0"});
God.notice(); //'不能抽烟'

var God2 = new GodClass({"version":"1.0"});
God2.notice(); //'不能抽烟'

这一点，我们拿我们使用的其他框架如Vue.js举例

//实例化之前，如
Vue.user(xxxx);

//实例化之后，如
var myvue = new Vue({});

2个做的事情是不一样的。