朋友你好，这里是小毅的前端日记， 分享代码日常 !
本文目标：JavaScript对象详解
卑微的大三前端仔持续输出前端知识，欢迎批评指正 !
愿你永远青春激昂，风华永驻 ！

文章目录

• 一、初识对象
• • 1、什么是对象
  • 2、我的第一个对象
  • 3、如何调用对象
• 二、创建对象的5种方式及其利弊
• • 第一种: 对象字面量模式
  • 第二种: 利用new Object 创建对象
  • 第三种: 工厂模式
  • 第四种：自定义构造函数模式
  • 第五种：构造函数+原型的组合模式
• 三、结尾

一、初识对象

1、什么是对象

​ 对象：
     现实生活中：现实具体的一个东西，比如 moyi 、Tom 是一个对象，但是 人 就不是一个对象。

     ​ 程序中： 在JavaScript中，对象是一组无序的相关属性和方法的集合，所有事物都是对象，例如字符串，数组 函数 数值等等。

​ 对象属性：事务的特征，常用名词来表达，如手机的大小 颜色 尺寸

​ 对象方法：事务的行为，常用动词来表达，如手机可以打电话 发短信

2、我的第一个对象

利用字面量大括号 {}创建我的第一个对象（突然，没对象的竖起了中指，哈哈哈）

    var obj = {}  //创建一个空对象    var obj = { // 三个属性 name: '莫子', sex: 'man', height: 170, // 一个方法sayHi sayHi: function () {     console.log('我是一个对象的方法hello world');    }}

3、如何调用对象

现在我们已经有一个自己的对象啦，那么该如何调用它呢？

通常调用对象的属性有两种方法：

​ a. 调用属性

​         对象名.属性名，例如obj.name

​         对象名[‘属性名’], 例如obj[‘sex’]

​ b. 调用方法 对象名.方法名（）

但是，在调用属性的时候，我们具体该选择哪一种方法呢？像我这么良心的博主，肯定会为大家找好解决办法滴。

接下来请看以下三点：

​ 1.点【 . 】方法后面跟的必须是一个指定的属性名称，而中括号【[ ]】方法里面可以是变量，即用中括号的是属性名不确定的，例如下列程序只能用中括号

 var a = 'aaa'; var b = 'bbb'; obj[a] = b; console.log(obj[a]);

​ 2.中括号【[ ]】方法里面的属性名可以包含特殊字符 如 - 空格，而点【 . 】方法后面的属性名不可以是特殊字符

 // 利用[ ]添加一个set-age属性    obj['set-age'] = 22;    console.log(obj['set-age']);

​ 3.当动态为对象添加属性时，必须使用 中括号【[ ]】，如obj[shuxing]，不可用 点【 . 】方法

二、创建对象的5种方式及其利弊

第一种: 对象字面量模式

步骤: 使用{}创建对象, 同时指定属性/方法

适用场景: 起始时对象内部数据是确定的,适用于只创建一个对象的场景

问题: 如果创建多个对象, 有重复代码

创建一个对象p, 包含属性name, age, 方法setName

    var p = {      name: 'momo',      age: 15,      setName: function (name) { this.name = name; console.log('我是函数的名字：' + name)      }    }    p.setName('DJ')    console.log(p.age, p.name);

创建一个对象p2, 包含属性name, age, 方法setName

  var p2 = {      name: 'yiyi',      age: 33,      setName: function (name) { this.name = name; console.log('我是函数的名字：' + name)      }    }    p2.setName('莫莫3号')    console.log(p2);    console.log(p2.age, p2.name);

第二种: 利用new Object 创建对象

步骤: 先创建空Object对象, 再动态添加属性/方法

适用场景: 起始时不确定对象内部数据

问题: 语句太多，有点繁杂

    var obj = new Object();    obj.age = 14;    obj.name = 'momo';    obj.setAge = function (age) {      this.age = age;      console.log('我是函数的年龄：' + age)    }    obj.setAge(12)    console.log(obj, obj.age, obj.name);

第三种: 工厂模式

步骤: 通过工厂函数动态创建对象并返回

适用场景: 需要创建多个对象

问题: 对象没有一个具体的类型, 都是Object类型

    // 工厂函数：返回一个对象的函数    function creatPerson(name, age) {      var obj = { name: name, age: age, setName: function (name) {   this.name = name; }, setAge: function (age) {   this.age = age; }      }      return obj;    }    //然后就可以创建多个对象了    var p1 = creatPerson('momo', 18);    var p2 = creatPerson('yiyi',19);    console.log(p1, p2, p1.age)

第四种：自定义构造函数模式

​ 可以增加代码的复用性

​ 构造函数里面封装的不是普通代码，而是对象

​ 构造函数语法规范如下：

  1. 构造函数名首字母大写  2.构造函数不需要return就可以返回结果 function 构造函数名() {      this.属性 = 值;      this.属性 = 值;      this.方法 = function () {     }   }

​ 调用构造函数,即对象的实例化，即：new 构造函数名()，也就是我们平时说的new一个对象，没有对象，咱就new一个，想有多少就有多少，哈哈哈

步骤: 自定义构造函数, 通过new创建对象

适用场景: 需要创建多个类型确定的对象

问题: 每个对象都有相同的数据, 浪费内存，所以可以考虑把函数放在原型里面，即第五种方法

  function Person(name, age) {      this.name = name;      this.age = age;      this.setName = function (name) { this.name = name;      };      this.setAge = function (age) { this.age = age;      }    }    var p1 = new Person('momo', 14);//实例化一个Person对象    console.log(p1);    console.log(p1 instanceof Person);// true，p1是Person类型

在下面的程序中，定义了一个Student构造函数，在最后两行，我们分别判断p1, s1的类型，可知p1不是Student类型，而s1是student类型

 function Student(name, age) {      this.name = name;      this.age = age;      this.setName = function (name) { this.name = name;      };      this.setAge = function (age) { this.age = age;      }    }    var s1 = new Student('yiyi', 22);    console.log(s1);    console.log(s1 instanceof Student);//true, s1是student类型的对象    console.log(p1 instanceof Student);//false，代表p1不是Student类型对象

第五种：构造函数+原型的组合模式

步骤: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上

适用场景: 需要创建多个类型确定的对象

这个跟构造函数差不多，只不过是把构造函数里面的原来的方法添加到了对象的原型上面去

    function Person(name, age) {      this.name = name;      this.age = age;    }    Person.prototype.setName = function (name) {      this.name = name;    };    Person.prototype.setAge = function (age) {      this.age = age;    }    var p1 = new Person('momo', 14);    var p2 = new Person('sdf', 678);    console.log(p1, p2);    console.log(p1 instanceof Person);//p1是Person类型

三、结尾

​ 今天的分享到这里就结束了，如果觉得有收获，左下角有个大拇指哦，关于本文有什么好滴建议也可以分享到评论区哦，博主才疏学浅，还请各位读者老爷们批评指正