颠覆认知的『JavaScript』篇——08 对象、构造函数、实例化

一、对象

1. 对象的创建以及属性的基础操作

// 字面量
var teacher = {
  name: '张三',
  age: 32,
  sex: 'male',
  height: 176,
  weight: 130,
  teach: function () {
    console.log('I am teaching JavaScript');
  },
  smoke: function () {
    console.log('I am smoking');
  },
  eat: function () {
    console.log('I am having a dinner');
  }
}

// 增加属性/方法
teacher.email = '1234567@qq.com';
teacher.drink = function () {
  console.log('I am drinking');
}

// 修改属性/方法
teacher.age = '25';
teacher.teach = function () {
  console.log('I am teaching HTML');
}

// 删除属性/方法   注意删除方法不用（）；执行符号
delete teacher.name;
delete teacher.eat;

console.log(teacher);
//--------------------------------------------------------------------------
var attendance = {
  students: [],
  total: 6,
  join: function(name) {
    this.students.push(name);  //push方法是向数组添加一个值
    if (this.students.length === this.total) {
      console.log(name + '到课，学生已到齐');
    } else {
      console.log(name + '到课，学生未到齐');
    }
  },
  leave: function(name) {
    var idx = this.students.indexOf(name);  //indexOf()是返回数组这个值的下标，没有会返回-1
    if (idx !== -1) {
      this.students.splice(idx, 1);
    }
    console.log(name + '早退');
    console.log(this.students);
  },
  classOver: function() {
    this.students = [];
    console.log('已下课');
  }
}

attendance.join('张三');
attendance.join('李四');
attendance.join('王五');
attendance.leave('王五');

attendance.classOver();

二、构造函数

1. 系统定义的构造函数

var obj = new Object();
//这个是系统自带的构造函数，与字面量的对象无差

2. 自定义构造函数

function Teacher(){
    this.name='张三';
    this.sex='male';
    this.smoke=function(){
        console.log('i am smoking')
    }
}
var teacher=new Teacher();

注意：

 1．自定义构造函数–大驼峰命名

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

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

4. this指向实例化对象

三、实例化

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

t2.name = '李四';
t1.smoke(); // 129
t1.smoke(); // 128
t2.smoke(); // 129

//实例化出来的两个对象是互不影响的

//--------------------------------------------------------
//初始化构造函数
function Teacher(name, sex, weight, course) {
  this.name = name;
  this.sex = sex;
  this.weight = weight;
  this.course = course;
}

var t1 = new Teacher('李四', '女', 150, 'HTML');
console.log(t1);
//-----------------------------------------------------------



function Teacher(opt) {
  this.name = opt.name;
  this.sex = opt.sex;
  this.weight = opt.weight;
  this.course = opt.course;
  this.smoke = function () {
    this.weight--;
    console.log(this.weight);
  }
  this.eat = function () {
    this.weight++;
    console.log(this.weight);
  }
}

var t1 = new Teacher({
  name: '张三',
  sex: '男',
  weight: 145,
  course: 'JS'
})

//总结：实例化函数是可以传入参数的，可以传入简单的参数，也可以传入一个对象
//传入一个对象更加简单明了知道参数所对应的值，更好维护

四、作业

写一个构造函数，接收数字类型的参数，参数数量不定，完成参数相加和相乘的功能
 

function Compute() {
  var length = arguments.length;
  var sum = 0;
  var mul = 1;
  for (var i = 0; i < length; i++) {
    sum += arguments[i];
    mul *= arguments[i];
  }
  this.add = function () {
    console.log(sum);
  }
  this.mul = function () {
    console.log(mul);
  }
}

var c1 = new Compute(1, 2, 3, 4);
c1.add();
c1.mul();

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

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.caropt = opt.caropt;
  this.select = function (caropt) {
    return new Car(caropt)
  }
  this.mycar = this.select(this.caropt);
}

var p1 = new Person({
  name: '张三',
  age: 25,
  income: '15K',
  caropt: {
    brand: '奔驰',
    color: 'red',
    displacement: 100
  }
});

console.log(p1.mycar);