构造函数与原型链

 根据函数的业务分类 取了不一样:构造函数 闭包 回调 事件监听器

 一般专用于创建对象的函数就是构造函数

下面构造函数fn的作用是什么?

创建一个有属性a的对象

        function fn() {
            this.a = 100
        }
        var f1 = new fn()

下面构造函数fn2的作用是什么？

创建一个有fool方法的对象

        function fn2() {
            this.tool = function () {}
        }
        var f2 = new fn2()
        var f3 = new fn2()

同一个函数创建出来的对象们 具有相同的空间结构和功能

每一个函数创建出来的对象是不相同的  有哪些构造函数呢？

 a: 1.自定义函数  2.官方提供的函数:Function String Number Boolean Object Array Date Math

官方构造函数

对于自己创建的数组arr1

他的原型__proto__等于官方构造函数Array的prototype

对于构造函数创建的对象f1

f1对象的__proto__.__proto__等于arr1的__proto__.__proto__

        function fn(){

        }
        // f1.__proto__.__proto__==f1.__proto__.(Object.prototye)
        var f1=new fn()
        var arr1=[1,2,3,4]//new Array
        console.log(arr1.__proto__===Array.prototype);//true
        console.log(f1.__proto__.__proto__===arr1.__proto__.__proto__);//true

原型中添加内容再创建对象

第一个fn2.prototype=fn2.life=1  是给fn2当做对象添加了一个成员life 且值为1  然后再赋值给了函数的原型

fn2.prototype=arr2     再一次给函数的原型赋值覆盖了之前的1  现在值为arr2数组

之后通过fn2构造函数创建的对象内容都是arr2

        var arr2=[1,2,3,4]
        function fn2(){
            this.a=100
        }
        var re=new fn2()
        fn2.prototype=fn2.life=1//以后fn2函数去创建对象的话  对象的原型对象 就是arr2数组
        fn2.prototype=arr2
        console.log(fn2.prototype.length);
        console.log(re.__proto__);

原型链案例

由以下代码可知：

同时存在以下代码时

Qingwa.prototype=new Kedou()
Qingwa.prototype=k2

以第二个代码为准

代码Qingwa.prototype=new Kedou()表示

在Qingwa函数的原型中添加kedou函数创建的对象

// 自定义的构造函数的原型对象也是一个自定义构造函数创建的对象
        function Kedou(){
            this.life=1
            this.tail=1
        }
        var k1=new Kedou()
        k1.age=10
        function Qingwa(){
            this.leg=4
            this.eye=2
        }
        var k2=new Kedou()
        k2.age=20
        Qingwa.prototype=new Kedou()
        Qingwa.prototype=k2
        var q1=new Qingwa()
        console.log(q1.life);//1
        console.log(q1.__proto__==k1);//false
        console.log(q1.__proto__==k2);//true

案例2： 

由以下代码可知:
用Div（）函数分别创建了两个不同的对象div1和div2

修改div1的内容并不会改变div2的内容

但是修改函数原型div1和div2的原型都会改变

先打印再修改也会改变

        function Element(){
            this.width="20px"
            this.color="red"
            this.fontSize="20px"
        }
        function Div(){
            this.value=123
            this.innerHTML="hello"

        }
        var el=new Element()//执行以后 用Div创建的对象有Element创建的对象的功能
        

        Div.prototype=el //在Div的原型中添加el对象也就是Element函数的内容
        var div1=new Div()
        
        console.log(div1.value);//123
        console.log(div1.innerHTML);//hello
        console.log(div1);//123  hello
        console.log(div1.width);//20px

        var div2=new Div()
        console.log(div2 .value);
        console.log(div2.innerHTML);
        console.log(div2);
        console.log(div2.width);
        // div1和div2是长得一样的不一样的对象  他们的原型对象是一个

        el.height="40px"
        div1.className="box"
        console.log(div2.className,div2.height);//undefined因为div1和div2不是同一个   40px 因为他们的原型链是同一个