8 - 闭包高级、对象、构造函数、实例化

88 阅读2分钟

一、构造函数、实例化

  1. 自定义构造函数 - 大驼峰命名 - function Test(){};

  2. 通过 new 关键字 创建实例化对象;

  3. 每次 new 创建的对象都是不同的对象;

  4. 构造函数的this 指向实例化对象。

1. 构造函数实例化

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);
  }
}

//每次 new 创建的对象都是不同的对象:t1 != t2
var t1 = new Teacher();
var t2 = new Teacher();

t1.smoke(); // 129
t1.smoke(); // 128

t2.smoke(); // 129 --> 130-1=129

2. 构造函数传参

2.1 传值

缺点:形参跟实参的位置必须要一一对应,参数多的时候容易出错,不利于维护;

function Teacher(name, sex, weight, course) {
  this.name = name;
  this.sex = sex;
  this.weight = weight;
  this.course = course;
}
var t1 = new Teacher('may', '女', 100, 'HTML');
console.log(t1); //Teacher {name: "may", sex: "女", weight: 100, course: "HTML"}

2.2 传引用值( 对象

优点: 参数的位置没限制,添加比较方便;

function Teacher(opt) {
  this.name = opt.name;
  this.sex = opt.sex:;
  this.weight = opt.weight;
  this.course = opt.course;
}
var t1 = new Teacher({
  sex:'女',
  name:'may',
  weight:'100',
  course:'HTML'
});
var t1 = new Teacher('may', '女', 100, 'HTML');
console.log(t1); //Teacher {name: "may", sex: "女", weight: 100, course: "HTML"}

二、案例合集

1. 用一个构造函数,接收数字类型的参数,参数数量不定,完成参数相加和相乘的功能;

不推荐的写法

//这种写法不够灵活,每个运算方法的计算数值都是一样(不推荐)
function Compute(){
  var args = arguments, //传进来的实参值
      res;  //计算结果
  //相加
  this.plus = function(){
    res = 0;
    loop('add',res);
  }
  //相乘
  this.times = function(){
    res = 1; //乘法不能从0开始
    loop('mul',res);
  }
  function loop(method,res){
    for(var i = 0; i < args.length;i++){
      var item = args[i];
      if(method === 'add'){
        res += item;
      }else if(method === 'mul'){
        res *= item;
      }
    }
    console.log(res);
  }
}
var compute = new Compute(2,3,4); //加、乘法的参数
compute.plus(); //9  2+3+4
compute.times(); //24 2*3*4

推荐的写法:

//优化后的写法:将要运算的数值也作为参数传进来,这样每个运算方法都可以传不同的参数(推荐)
function Compute(){
  var res; //计算结果     
  //相加
  this.plus = function(){
    res = 0;
    loop(arguments,'add',res);
  }
  //相乘
  this.times = function(){
    res = 1; //乘法不能从0开始
    loop(arguments,'mul',res);
  }
  //将要运算的数值作为参数传进来,不同的运算(加、乘)可以用不同的数值进行运算
  function loop(args,method,res){
    for(var i = 0; i < args.length;i++){
      var item = args[i];
      if(method === 'add'){
        res += item;
      }else if(method === 'mul'){
        res *= item;
      }
    }
    console.log(res);
  }
}
var compute = new Compute();
compute.plus(2,3,4); //9  2+3+4
compute.times(5,6); //30 5*6

2. 写一个构造车的函数,可设置车的品牌,颜色,排量;再写一个构造消费者的函数,设置用户的名字,年龄,收入,通过选择的方法实例化该用户喜欢的车,再设置车的属性

function Car(opt){
  this.brand = opt.brand; //品牌
  this.color = opt.color; //颜色
  this.displacement = opt.displacement; //排量
}
function Person(opt){
  this.name = opt.name;
  this.age = opt.age;
  this.income = opt.income;
  this.selectCar = function(){
    var myCar = new Car(opt.carOpt);
    console.log(this.name + '挑选了一辆排量为' + myCar.displacement + '的' + myCar.color + myCar.brand);
  }
}
var may = new Person({
  name: 'may',
  age: 20,
  inCome: '20k',
  carOpt: {
    displacement: '2.0',
    color: '红色',
    brand: 'Benz'
  }
});
may.selectCar(); //may挑选了一辆排量为2.0的红色Benz