面向对象的原型：prototype，原型链

面向对象的应用：


    <div class="box1">
        <h1>h1>
        <ul>ul>
    div>
    <div class="box2">
        <h1>h1>
        <ul>ul>
    div>
 
    <script>
        var data1 = {
            title:"体育",
            list:["体育-1","体育-2","体育-3"]
        }
        var data2 = {
            title:"综艺",
            list:["综艺-1","综艺-2","综艺-3"]
        }
        function CreateList(select,title,list){
            this.ele = document.querySelector(select)
            this.title = title,
            this.list = list,
            this.render = function(){
                var h1 = this.ele.querySelector("h1")
                var ul = this.ele.querySelector("ul")
                // console.log(h1,ul)
                h1.innerHTML = this.title
                ul.innerHTML = this.list.map(item=>`
${item}
`).join("")

}
}
var obj1 = new CreateList(".box1",data1.title,data1.list)
obj1.render()
var obj2 = new CreateList(".box2",data2.title,data2.list)
obj2.render()
script>

结果：

现在我们可以使用“面向对象的原型”的思路来做，把render函数拿出来，用原型表示：


    <div class="box1">
        <h1>h1>
        <ul>ul>
    div>
    <div class="box2">
        <h1>h1>
        <ul>ul>
    div>
 
    <script>
        var data1 = {
            title:"体育",
            list:["体育-1","体育-2","体育-3"]
        }
        var data2 = {
            title:"综艺",
            list:["综艺-1","综艺-2","综艺-3"]
        }
        function CreateList(select,title,list){
            this.ele = document.querySelector(select)
            this.title = title,
            this.list = list
        }
        CreateList.prototype.render = function(){
                var h1 = this.ele.querySelector("h1")
                var ul = this.ele.querySelector("ul")
                // console.log(h1,ul)
                h1.innerHTML = this.title
                ul.innerHTML = this.list.map(item=>`
${item}
`).join("")

}

        var obj1 = new CreateList(".box1",data1.title,data1.list)

obj1.render()

        var obj2 = new CreateList(".box2",data2.title,data2.list)

obj2.render()

//对象._proto_ === 构造函数.prototype

script>

把render函数拿出来写，按照面向对象的原型方法写就是上面的：构造函数.prototype.render这样子；
因为对象有一个属性__proto__属性===构造函数的原型prototype，所以对象可以访问到render函数，也就是obj1.render成立的原因；
对象.__proto__===构造函数.prototype

为什么会引入原型的概念：

因为按照第一种方法，当我们构造多个函数时，这个函数里面其实在堆区里占用的是不同的空间不是一个空间，而一个render函数虽然执行的代码是一样的，但是obj1和obj2执行的render函数还是不在一个区域，这样就会造成，构造函数越多，空间重复占用越大，浪费空间。

但是我们用原型就可以解决这个问题，用每一个对象去调用同一个原型即可，不会造成重复的空间浪费。

构造函数也是一个对象，

原型链的概念：

面试题：obj.toString():为什么对象都有toString这个方法：

解答：在创建完构造函数以后，obj对象有一个__proto__方法，会在自己对象上找，如果找不到就去它的构造函数prototype上去找，找不到就去上一级Object的prototype上找，刚好Object上面是有的。

整个原型的顶点是什么呢：有两种解释：

Object.prototype或者null

链状结构：

当一个对象我们不知道准确的是谁构造的时候，我们呢就把它看成 Object 的实例化对象
也就是说，我们的 构造函数的 prototype 的 __proto__ 指向的是 Object.prototype
那么 Object.prototype 也是个对象，那么它的 __proto__ 又指向谁呢？
因为 Object 的 js 中的顶级构造函数，我们有一句话叫 万物皆对象
所以 Object.prototype 就到顶了，Object.prototype 的 __proto__ 就是 null