构造函数

什么是构造函数

• vue
• react
• 可以通过new得出一个新的对象的就是构造函数

this 的引入

<script>
    // 在函数中this代表谁调用了这个函数，this就指向谁
    function add(){
        var a=10;
        var b=20;
        console.log('this代表的是：',this);//这里的this指向window
    }

    add();//一般直接调用是window调用的


    var list = {
        start:function(){
            console.log('this指向'+this);
        }
    }
    list.start();//this指向list

</script>

创建对象

<script>
    // 直接量（字面）方式创建对象
    // var vog = {
    //     color:'red',
    //     age = 2
    // }

    // 使用new关键字创建对象
    var date = new Date();
    //Date是特殊函数，专门用来创建对象称为构造函数
    var reg = new RegExp('web','i');//RegExp


    // 自定义构造函数
    // 定义一个构造函数,用来创建猫cat的对象
    function MadeCat(name,age,addr){
        this.name=name
        this.age=age
        this.addr=addr
        // 这里的this指向MadeCat
    }
    
    // 根据名字,年龄,产地创建一个猫的对象
    var cat = new  MadeCat('布偶',2,'美国'); 
    // 调用函数,这个时候this指向MadeCat

    // 通过调用函数和传参,生成一个新的cat
    console.log(cat);


</script>

构造函数

<script>
    // 构造函数的原型
    // 定义一个构造函数,用来创建cat的对象

     function MadeCat(name, age, addr) {
            this.name = name,
                this.age = age,
                this.addr = addr;
            // 这里的this指向MadeCat
        }

        // MadeCat.prototype 指向了MadeCat的原型
        console.log(MadeCat.prototype);

        MadeCat.prototype.color='白色';//在原型上添加属性  (简称更改构造函数)
        MadeCat.prototype.say = function(){
            console.log('么么么');
        }

        // 创建一个猫的对象,实例化
        var cat = new MadeCat('小白',2,'中国');
        console.log(cat);
        cat.say();

        // MadeCat.prototype === cat.__proto__   这两个是相等的 true

        /**
            总结:
            1.构造函数,定义函数
            2.了解this的指向,this指向调用者
            3.通过函数生成对象(简单来说就是想里面添加参数然后
                把这些属性和属性值赋给一个变量,这个变量是一个对象)
            4.通过prototype来选择函数原型(可以通过prototype向函数原型里
                添加想要添加的属性或者函数)
            

            原型：1.所有的构造函数都有对应的原型
                2.在原型上定义的属性方法，实例都会有该属性和方法
                3.如何访问，通过构造函数.protoTypr
                    和   实例.__proto__
                    
        */
</script>

构造函数的原型

• prototype 指向构造函数的方法
• 原理 通过prototype来选定构造函数的原型,对其进行增删改

原型 实际应用场景

• 封装方法

在vue里，根据原型定义一个变量$http 把封装好的方法放进来
使得不管什么都可以通过this.$http直接访问原型 获取到get和post方法
Vue.prototype.$http = {
  get,
  post
};