对象、构造函数、实例化

对象的基本写法

var teacher = {
  name: "张三",
  age: 32,
  sex: "male",
  teache: function () {
    // 外部的函数称为函数
    // 对象内称呼函数为方法
    console.log("教书");
  },
};
// 增
teacher.address = "北京";
teacher.eat = function(){
  console.log("吃饭");
};
// 删
delete teacher.age(); // 这样是无法删除的，切记！！！
delete teacher.age;
console.log(teacher.age); // undefind
// 改
teacher.name = "李四";
console.log(teacher.name); // 李四
// 查
console.log(teacher.sex); // male
console.log(teacher.eat); // function

this

下面定义了一个对象，里面有smoke和eat方法，当我们执行smoke的时候就让张三的体重减少，eat的时候就让张三的体重增加。

var teacher = {
  name: "张三",
  age: 32,
  sex: "male",
  weigtht: 130,
  smoke: function () {
    teacher.weigtht--;
    console.log(teacher.weigtht); // 129
  },
  eat: function () {
    teacher.weigtht++;
    console.log(teacher.weigtht); // 130
  },
};
teacher.smoke();
teacher.smoke();
teacher.eat();

以上代码在调用smoke和eat方法的时候，需要先teacher.weigh，然后增加或者减少，
就好像我们平时说话的时候：张三的weight减少，张三的weight增加，这样总觉得很别扭，而我就是张三，那为什么我不直接说我的.weight呢？我执行方法的时候就找我自己的属性，该怎么办呢？
这里我们可以用this。

var teacher = {
  name: "张三",
  age: 32,
  sex: "male",
  weigtht: 130,
  smoke: function () {
    // this 表示对象自己本身
    this.weigtht--;
    console.log(teacher.weigtht);
  },
  eat: function () {
    // this 表示对象自己本身
    this.weigtht++;
    console.log(teacher.weigtht);
  },
};
teacher.smoke();
teacher.smoke();
teacher.eat();

创建对象的方式

1. 对象字面量（或者对象直接量）

var obj = {
  name: "张三",
  age: 30,
};
obj.name = "李四";

2. 构造函数

:::info 💡 对象和构造函数是两个概念 ::: :::success 「实例对象」是通过实例化「构造函数」实例出的「对象」。 :::

2.1 使用系统自带的构造函数

// 和对象字面量是相等的，增删改查的用法也是一样的
var obj = new Object(); 
obj.name = "张三";
obj.age = 30;
console.log(obj)

2.2 使用自定义的构造函数

自定义构造函数和普通的函数的写法除了自定义构造函数的函数名要大驼峰外没有任何区别。

function Teacher() {
  // 构造函数没执行之前 this 指向 window
  // 构造函数执行之后 this 指向实例化的对象，也就是 teacher1 和 teacher2
  this.name = "张三";
  this.age = 30;
  this.smoke = function () {
    console.log("抽烟");
  };
}
var teacher1 = new Teacher();
var teacher2 = new Teacher();

多个实例对象更改属性名互不影响。 :::info 构造函数实例化对象的好处：通过一个构造函数实例化多个对象更改数据互不影响。 :::

function Teacher() {
  this.name = "张三";
  this.age = 30;
  this.smoke = function () {
    console.log("抽烟");
  };
}
var teacher1 = new Teacher();
var teacher2 = new Teacher();
teacher1.name = "李四";
console.log(teacher1.name); // 李四
console.log(teacher2.name); // 张三

function Teacher() {
  this.name = "张三";
  this.age = 30;
  this.smoke = function () {
    this.age--;
    console.log(this.age);
  };
  this.eat = function () {
    this.age++;
    console.log(this.age);
  };
}
var teacher1 = new Teacher();
var teacher2 = new Teacher();
teacher1.smoke(); // 29
teacher1.smoke(); // 28
teacher2.eat(); // 31
console.log(teacher1);
console.log(teacher2);

老师不可能是同一个名字，年龄也不一样，那这样的话我们可以给构造函数传参数。

function Teacher(name, age) {
  this.name = name;
  this.age = age;
  this.smoke = function () {
    this.age--;
    console.log(this.age);
  };
  this.eat = function () {
    this.age++;
    console.log(this.age);
  };
}
var teacher1 = new Teacher("张三", 25);
var teacher2 = new Teacher("李四", 30);
console.log(teacher1);
console.log(teacher2);

如果在构造函数需要很多参数的情况下最好是通过对象来给构造函数传参：

function Teacher(data) {
  this.name = data.name;
  this.age = data.age;
  this.smoke = function () {
    this.age--;
    console.log(this.age);
  };
  this.eat = function () {
    this.age++;
    console.log(this.age);
  };
}
var teacher1 = new Teacher({
  name: "张三",
  age: 25,
});
var teacher2 = new Teacher({
  name: "李四",
  age: 30,
});
console.log(teacher1);
console.log(teacher2);

我们在使用一些「框架」或者「工具库」的时候都会看见是通过「对象」的方式给构造函数传参数，那这样做有什么好处呢？

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

以上代码是 Vue.js2.x 版本的时候实例化 Vue构造函数。

好处就是：当一个构造函数需要很多参数的时候我们可以通过对象的属性去传入参数，这样就不用一个一个去对应构造函数某个参数的位置，这样就避免了因位置不对传错参数的尴尬场面。