学习原型总结

前言：

        原型与原型链是js中非常重要的知识点，今天学习到vue脚手架，老师提到原型与原型链，因此我便用了两个小时仔细研究了一下原型与原型链，在此我用我总结的语言分享一下我的心得：

概念前提：

首先要了解几个个概念：显示原型和隐式原型，构造函数和实例对象。简单来说可以这么理解：

        显示原型：可以理解为prototype代表的就是显示原型；

        隐式原型：可以理解为__proto__(注意：前后各两条下划线)代表的就是隐式原型；

        构造函数：与普通函数的区别就是首字母大写；

        实例对象：构造函数new出来的对象。

只有构造函数才有显示原型属性，实例对象才有隐式原型属性。

构造函数的prototype都指向自己的原型对象。

构造函数与原型对象的关系：

了解了以上前提，便可以解释下图：因为每调用一次函数，函数中的所有属性、对象等都需要重新创建，而对于只需要创建一次的属性或者对象，所以提高运行速度、节省空间，我们经常将这些放到构造函数的原型对象中，例如

function Class(name,age,gender){
            this.name = name
            this.age = age
            this.gender = gender
            this.className = '一年级一班'
            this.greet = function(){
                console.log('欢迎来到一年级一班')
            }
        }

其中的className属性和greet方法属于是创建一次就可以的，重复调用方法会影响运行效率、占用内存空间，所以我们可以通过以下写法，将只需使用一次的属性或方法放到该函数的原型对象中，当实例对象需要使用这些方法属性时，在构造函数中找不到就会到构造函数的原型对象中寻找：

function Class(name, age, gender) {
            this.name = name
            this.age = age
            this.gender = gender
        }
        Class.prototype.className = '一年级一班'
        Class.prototype.greet = function () {
            console.log('欢迎来到一年级一班')
        }
        let one = new Class('小明', 11, '男')
        console.log(one.className)//一年级一班
        console.log(one.greet)//f(){console.log('欢迎来到一年级一班')}

在原型概念中，可以使用prototype和__proto__来查看原型对象：

        let one = new Class('小明', 11, '男')
        console.log(one.__proto__)//Class.prototype
        console.log(Class.prototype)//Class.prototype
        console.log(one.__proto__===Class.prototype)//true
        console.log(one.constructor)//Class()
        console.log(one.__proto__.constructor)//Class()
        console.log(one.__proto__.constructor===one.constructor)//true

其中，输出的Class.prototype指的是构造函数的原型对象，Class()指的是构造函数，one是构造函数Class()的实例对象。它们之间的关系可以用下图来说明：

这就可以解释上述代码中两个输出为true的地方了，因为他们指的就是同一个事物。

在我学习过程中还有原型链的概念，在上图的基础上下面还有一长串其他的图，不过对于初学者来说，现在说的这些应该就可以有个初步的认识了。

再次强调，本文中所有语言都是通过自己理解转换过来的，并不一定专业。