组件 - 08.原型属性 - 《十年运维》

我们先看下面的例子

    //Demo.prototype 叫做显示原型属性<br />        //d.__proto__    叫做隐式原型属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript">
        //这是一个构造函数
        function Demo() {
            this.a = 1
            this.b = 2
        }
        //创建一个Demo的实例对象
        const d = new Demo()

        console.log(Demo.prototype === d.__proto__) //true

        //Demo.prototype 叫做显示原型属性
        //d.__proto__    叫做隐式原型属性
    </script>
</body>

</html>

所以我们可以得出如下结论

VueComponent.prototype.__proto__ === vue.prototype

正是通过这个关系，让组件实例对象vc可以访问到Vue原型上的属性、方法

我们通过下面例子来看一下：
console.dir()可以显示一个对象所有的属性和方法。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script type="text/javascript" src="./vue.js"></script>
    <div id="app">
        {{ myage }}
        <button @click="addage"> 增加年龄 </button>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                myage: 18,
            },
            methods: {
                addage() {
                    this.myage++
                }
            }
        })
        console.dir(Vue)
        console.dir(vm.__proto__)
    </script>
</body>

</html>

我们发现Vue是有一个prototype的

而vm只有proto

以上两个内容是一样的