什么是原型，为什么要有原型，形象例子带你迅速搞懂

什么是原型

我们创建的每一个函数（普通函数，构造函数都算），解析器都会向函数中添加一个属性-prototype

而这个prototype，是以对象的形式存储的，所以叫它原型对象

    function fun() {
    }
    console.log(fun.prototype);

每一个函数都有自己独一无二的prototype

    function fun() {
    }
    function fn() {
    }
    console.log(fun.prototype == fn.prototype);//false

如果函数作为普通函数调用prototype，则没啥作用

但是当函数通过构造函数调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，正常浏览器不给我们看但是我们可以通过__proto__来访问该属性

    function Fun() {
    }
    var fun = new Fun()
    console.log(fun.__proto__)

我们举一个例子好吧

假设我们每个人都是一个构造函数构造出来的对象

假如，我们现在都是学生

而且我们是一个班的

可不可以先理解为：这个班级就是这个构造函数，我们这些学生是这个班级的构造函数创建出的对象

我们每个人，在班级里，都有自己的书，自己的私人物品，可不可以先理解为，这些私人物品，就是自己的属性和方法

但是，班级这个大家庭，是不是有一个公共物品，比如：拖布，大屏幕

我们班级这个构造函数，有个地方，用来放这个拖布和大屏幕

这个地方，就是原型，一块共有的区域

我们总不能人手一个拖布，人手一个屏幕吧

是不是班级，这个公共的区域，提供给我们，一些可以公用的东西，不需要我们自己携带

翻译到代码里

是不是这个公共区域，就是原型对象！

拖布，大屏幕是不是就是原型对象里的，班级这个构造函数里的我们这些对象的，共有的属性和方法

也就是原型对象的属性和方法

为啥要有这个原型，是不是因为，我们不能人手一个拖布啊，是不是人手一个的话，不仅没必要，而且占地方啊

在代码里，是不是就是占内存啊

所以说，就会有原型这个东西

    function Fun() {
    }
    var fun = new Fun()
    var fun2 = new Fun()
    console.log(fun.__proto__ == fun2.__proto__)//true

我们思考为什么结果是true，是不是可以理解为，这两个对象（人），是一个班的

原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象

我们可以将对象中共有的内容，统一设置到原型对象中

    function Fun() {
    }
    Fun.prototype.a = 123
    console.log(Fun.prototype);

    function Fun() {
    }
    Fun.prototype.a = 123
    console.log(Fun.prototype);
    var fun = new Fun()
    console.log(fun.a);

我没有给fun加属性，看看fun有没有a

fun去原型对象里去找a了

当我们访问对象的一个属性和方法时，它会现在对象自身（人，自己）中寻找，如果有则直接使用如果没有，就去原型对象（班级）中寻找

以后我们创建构造函数时，可以将这些对象共有的属性和方法（拖布，大屏幕），统一添加到构造函数的原型对象（班级）中去

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79711.html