8-对象、构造函数、实例化

(一)、对象

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

(1)增加属性和方法

teacher.address = '北京';
teacher.drink = function(){
           console.log('I am drinking bear');
}

(2)删除属性和方法

删除属性
delete teacher.address;
删除方法
delete teacher.teach;     //注意：笔试题 不能加()  加括号就变成执行了
													//删除键名就可以了

   var teacher = {
           name: '张三',
           age: 32,
           sex: 'male',
           height: 176,
           weight: 130,
           teacher: function(){
               console.log('I am teaching JavaScript');
           },
           smoke: function(){
               teacher.weight--;
               console.log(teacher.weight);
           },
           eat: function(){
               teacher.weight++;
               console.log(teacher.weight);
           }
 }

teacher.smoke();
teacher.smoke();
teacher.eat();

如何让teacher变成我，这样就变成了我的体重要加一斤，我的体重要减一斤，而不是老师的体重要加一斤，老师的体重要减一斤。

(3)、this

记住：this代表的是对象本身

smoke: function(){
  this.weight++;
  console.log(this.weight);
}

(4)、array.splice(index, howmany, item1, …, itemX)

splice() 方法向/从数组添加/删除项目，并返回删除的项目。

**注释：**splice() 方法会改变原始数组。

参数	描述
index	必需。整数，指定在什么位置添加/删除项目，使用负值指定从数组末尾开始的位置。
howmany	可选。要删除的项目数。如果设置为 0，则不会删除任何项目。
item1, …, itemX	可选。要添加到数组中的新项目。

var num = 3;
var arr = [1,2,3,4];

for(var i = 0; i < arr.length; i++){
  if(arr[i] === num){
    arr.splice(i,1); //第一个参数，数组下标，第二个参数要删除几个
  }
}
console.log(arr); //[1,2,4]

(5)、indexOf()

array.indexOf(item,start)

stringObject.indexOf(searchvalue,fromindex)
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

参数	描述
item	必须。查找的元素。
start	可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

var num = 3;
var arr = [1,2,3,4];
console.log(arr.indexOf(num));// 2   返回元素所在的下标，如果不存在就返回-1

(6)、案例

attendence 出勤

var attendance = {
  students: [],
  total: 6,
  join: function(name){
    this.students.push(name);
    if(this.students.length === this.total){
      console.log(name + '到课，学生已到齐');
    }else{
      console.log(name + '到课，学生未到齐');
    }
  },
  leave:function(name){
    var idx = this.students.indexOf(name);
    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.join('赵六');
attendance.join('吴七');
attendance.join('孙八');
attendance.leave('李四');
attendance.classOver();
//这个案例学到了splice indexOf 方法内部是可以传递参数的，在调用的时候可以传递相应的实参

(二)、构造函数

(1)、对象字面量

声明了一个变量，将一个对象赋值给这个变量，这种方式叫对象字面量或对象直接量
这只是一种在javascript中创建对象的方式

var obj = {
   name:'张三',
   sex: 'male'
}

(2)、构造函数

构造函数写出来以后可以通过new关键字实例化一个对象
系统自带的构造函数，用系统内置的new Object()来创建一个对象
O大写

对象和构造函数是两码事，对象是通过实例化构造函数而创建的一个对象实例

var obj = new Object();//这种方式跟对象字面量是完全相等的，没有任何区别，没有优势之说，用的也不是特别多
obj.name = '张三';
obj.sex  = '男士';

(3)、自定义构造函数

自定义构造函数 在写项目中会大量使用，因为只要你写模块化，插件化，组件化，必须使用自定义构造函数

自定义构造函数和普通函数没什么区别

大驼峰。不是硬性要求，这只是和普通函数相区别的一种写法。
在对象中，使用: 和 , 而在构造函数中写的是语句，用;隔开

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);
  }
}
//自定义构造函数也是函数，在没执行之前this根本就不存在，Teacher在GO里面，不执行的时候不看{}里面的
//this根本就没生成,更谈不上指代的是Teacher，Teacher是构造函数，就相当于一个工厂，构造工厂
var teacher = new Teacher(); //这个时候this才生成  要让this存在必须要实例化它
                           //this指向的是谁，this指向的是对象本身。

通过构造函数new出来是不同的对象，对象与对象之间互不影响

var teacher1 = new Teacher();
var teacher2 = new Teacher();

teacher1.name = '李四';

console.log(teacher1, teacher2);

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

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

option选项 配置项这种方法易于维护。

这样传参可以不按照顺序，也知道传递的是什么参数

//option选项 设置项
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:'javascript'
});
console.log(t1);

//teacher.js
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);
  }
}

//index.html
<script type="text/javascript" src="teacher.js"></script>
<script type="text/javascript">
   var t1 = new Teacher({
   name: '张三',
   sex:  '男',
   weight:145,
   course:'javascript'
  });
console.log(t1);
</script>