构造函数的用法以及优缺点

254 阅读1分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第30天,点击查看活动详情

系统自带的构造函数

  //系统自带的构造函数
    var obj = new Object(); //对象字面量相等
    obj.name = '张三';
    obj.sex = '男生';
    console.log(obj)

image.png

自定义构造函数

   //自定义构造函数
   //首字母大写 大驼峰
   //这里的this指的是new 实例化对象本身
   function Teacher() {
        this.name = '张三';
        this.sex = '男士';
        this.smoke = function() {
            console.log('I am smokeing')
        }
   }
    var teacher1 = new Teacher();
    var teacher2 = new Teacher();
    teacher1.name = '李四'; //teacher1改变,完全不会影响teacher2里面的数据
    console.log(teacher1, teacher2);
    //new 做了什么
    //调用了函数
    //生成了一对象
    //修改函数内部的this指向 指向这个对象
    //给对象添加对应的属性
    //返回改对象

c79a7c551fc62780c0f3f9ca09deaa3.png

案例

function Teacher() {
        this.name = '张三';
        this.sex = '男士';
        this.weight = 130;
        this.smoke = function() {
            this.weight--;
            console.log(this.weight)
        };
        this.eat = function() {
            this.weight++;
            console.log(this.weight)
        }
    }
    var t1 = new Teacher();
    var t2 = new Teacher();

    t1.smoke();
    t1.smoke();
    console.log(t2.weight);

可以看出修改t1的时候,t2完全不会受影响,两个实例化的对象互不影响

b95769ce5e10218817eaff96380de76.png

构造函数的传参

function Teacher(name, sex, weight, course) {
        this.name = name;
        this.sex = sex;
        this.weight = weight;
        this.course = course;

    }
    var t1 = new Teacher('张三', '男', 145, 'JavaScript');
    var t2 = new Teacher('李四', '女', 90, 'HTML');
    console.log(t1);
    console.log(t2);

76e5fecce9b29176b84d8750723ffea.png

简化传参的方式

function Teacher(opt) {
        this.name = opt.name;
        this.sex = opt.sex;
        this.weight = opt.weight;
        this.course = opt.course;

    }
    var t1 = new Teacher({
        name: '张三',
        sex: '男',
        weight: 145,
        course: 'javascript'
    });
    var t2 = new Teacher({
        name: '李四',
        sex: '女',
        weight: 90,
        course: 'HTML'
    });
    console.log(t1);
    console.log(t2);

2a26b619022f7dbd40b056348047f4d.png

构造函数的优缺点

  • 构造函数优点是,构造函数创建的属性和方法可以在实例之间共享
  • 缺点为如果实例之间有相同的方法,这个方法会在每个实例上创建一遍,这样显然会造成系统资源的浪费