📌 对象Object

对象的定义 无序的数据集合，键值对的集合

**

通过对象字面量（对象直接量），创建新对象【常用】

  1. var obj = {}                   //空对象
  3. var obj = {   
  4.     键1: '字符串'， 
  5.     键2: number，
  6.     键3: function() {}，
  7.     ··· 
  8.     '键4': true,
  9.     'say-hi': function() {}，
  10.           }                   //非空对象
  • 键名是字符串，不是标识符，可以包含任意字符，包括空字符串、空格字符串
  • 引号可省略，省略之后只能写标识符
  • 键名使用横杠（js命名规范不允许），但加引号可以使用

通过构造函数，创建新对象 系统内置的 Object()构造函数

  1. var obj = new Object()  //空对象
  3. obj.name = '张三';
  4. obj.sex = '男';
  • 对象是通过实例化构造函数而生成的实例化对象

★**自定义构造函数** 模块化，插件开发必会使用到

  • 自定义构造函数名称要使用大驼峰命名法

  • 自定义构造函数中不要定义对象和定义return，new关键字会隐式执行 ```javascript // 企业模块化开发，插件自定义构造函数以对象形式进行传参 function CrtObj(opt){

    1.  // 在构造函数中使用this来指代对象，这个对象就是我们使用构造函数生成的实例化对象
    3.  // 定义属性
    4.  // 给实例化对象添加name属性，属性值是输入的name参数
    5.  this.name = opt.name;
    6.  this.age = opt.age;
    7.  this.sex = opt.sex;
    8.    this.addr = opt.addr;
    10.  // 定义方法
    11.  this.funAll = function(){
    12.      console.log(this.name,this.age,this.sex,this.addr )
    13.  }
    14.  this.funNameAge = function(){
    15.      console.log(this.name,this.age)
    16.  }
    17.  this.funSexAddr = function(){
    18.      console.log(this.sex,this.addr )
    19.  }

    }

// 通过自定义构造函数来生对象，实例化对象 // 调用执行构造函数时，都必须要和new关键词一起使用 const obj1 = new CrtObj({ name: ‘张三’, age: 18, sex: ‘男’, addr: ‘北京’ }); console.log(obj1);

// 调用 对象/实例化对象 中的方法 obj1.funAll(); obj1.funNameAge(); obj1.funSexAddr();

  2. > **构造函数与普通函数的区别？**
  4. - 构造函数一定要和关键字new一起使用
  5.    - new关键字会隐式给构造函数中创建一个空对象
  6.    - 同时，会将this指向这个空对象，使用this为这个对象添加成员
  7.    - 最后，会隐式通过return返回这个对象
  8. - 构造函数语法规定函数名首字母大写，使用大驼峰命名法
  9. - 构造函数给对象定义属性和方法的语法使用 **this.属性名 = 值** 添加属性和方法
  11. <br />
  12. > **不同的方法和函数会占用过多的内存空间，使同一个构造函数生成的实例化对象可调用相同的方法？
  14. - **产生原因**：每次创建对象都会在对象上定义一个新的方法，即新函数
  15.    - 函数存储时会生成一个独立的存储空间
  16.    - 不同函数存储的空间不同
  17. - **解决方式：**将构造函数需要定义给实例化对象的方法定义在函数的prototype属性中
  18. ```javascript
  19. function CrtObj(opt){
  20.        // 在构造函数中使用this来指代对象，这个对象就是我们使用构造函数生成的实例化对象
  22.        // 定义属性
  23.        // 给实例化对象添加name属性，属性值是输入的name参数
  24.        this.name = opt.name;
  25.        this.age = opt.age;
  26.        this.sex = opt.sex;
  27.          this.addr = opt.addr;
  28. }
  30. // 在构造函数的 prototype 属性中来定义实例化对象的方法
  31. CrtObj.prototype.fun = function(){
  32.           console.log(this.name,this.age,this.sex,this.addr )
  33. }
  35. const obj2 = new CrtObj({
  36.         name: '张三',
  37.     age: 18,
  38.     sex: '男',
  39.     addr: '北京'
  40. });
  42. const obj3 = new CrtObj({
  43.         name: '李四',
  44.     age: 17,
  45.     sex: '女',
  46.     addr: '上海'
  47. });
  49. obj2.fun()  //张三 18 男 北京
  50. obj3.fun()  //李四 17 女 上海
  51. console.log(obj2.fun === obj3.fun); //true

📋 课后作业

1、写一个构造函数，接收数字类型的参数，参数数量不定，完成参数相加和相乘的功能？ 2、写一个构造车的函数，可设置车的品牌、颜色、排量；再写一个构造消费者的函数，设置消费者名字，年龄收入；通过选择的方法实例化该用户喜欢的车，再设置车的属性？

  1. //1、写一个构造函数，接收数字类型的参数，参数数量不定，完成参数相加和相乘的功能？ 
  2. function Calcul() {
  3.                         //初始化
  4.             this.sumRes = 0;
  5.             this.mulRes = 1;
  7.                        //定义实参累加和方法
  8.             this.cumulSum = function () {
  9.                 for (var i = 0; i < arguments.length; i++) {
  10.                     this.sumRes += arguments[i]
  11.                 }
  12.                 console.log(this.sumRes);
  14.             };
  15.                        //定义实参相乘的方法
  16.             this.cumulMul = function () {
  17.                 for (var i = 0; i < arguments.length; i++) {
  18.                     this.mulRes *= arguments[i]
  19.                 }
  20.                 console.log(this.mulRes);
  21.             }
  22. }
  24. //实例化对象
  25. var comput = new Calcul()
  27. comput.cumulSum(1, 9)；  //10
  28. comput.cumulMul(1, 2, 3) // 6
  30. ---------------------------------------------------------------------------------------------
  31. /*2、写一个构造车的函数，可设置车的品牌、颜色、排量；
  32.  *     再写一个构造消费者的函数，设置消费者名字，年龄收入；
  33.  *   通过选择的方法实例化该用户喜欢的车，再设置车的属性？
  34.  */
  36. // 车的构造函数
  37. function Car (opt) {
  38.      this.brand = opt.brand;
  39.      this.color = opt.color;
  40.      this.displacement = opt.displacement
  41. }
  42. // 人的构造函数  
  43. function Person(opt) {
  44.   this.name = opt.name
  45.   this.age = opt.age
  46.   this.income = opt.income
  47.   this.select = function () {
  48.     var myCar = new Car(opt.myCar)
  49.     console.log(`${this.name}今年${this.age}岁，月收入${this.income}，购买了一辆${myCar.color}，排量是${myCar.displacement}的${myCar.brand}车`)
  50.   }
  51. }
  52. // 创建人的实例对象  
  53. var Jack = new Person({
  54.    name: "杰克",
  55.    age: 30,
  56.    income: "10K",
  57.    myCar: {
  58.       brand: 'Benz',
  59.       color: '红色',
  60.       displacement: '2.0'
  61.    }
  62. })
  64. // 调用构造函数的方法  
  65. Jack.select()
  66. // 杰克今年30岁，月收入10K，购买了一辆红色，排量是2.0的Benz车