JavaScript 对象

最新推荐文章于 2022-08-10 19:21:53 发布

原创最新推荐文章于 2022-08-10 19:21:53 发布 · 212 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #前端

前端JavaScript 专栏收录该内容

28 篇文章

订阅专栏

JavaScript 对象

目标

能够说出为什么需要对象
能够使用字面量创建对象
能够使用构造函数创建对象
能够说出 new 的执行过程
能够遍历对象

对象里面的属性调用：对象 . 属性名，这个小点，就理解为 “的”
对象里面属性的另一种调用方式：对象[‘属性名’] ，注意方括号里面的属性必须加引号，我们后面会将
对象里面的方法调用：对象 . 方法名( ) ,注意这个方法名字后面一定加括号

    <script>
      // 利用对象字面量创建对象 {}
      // var obj = {}; // 创建了一个空的对象
      var obj = {
        uname: "张三疯",
        age: 18,
        sex: "男",
        sayHi: function () {
          console.log("hi~");
        },
      };
      // (1) 里面的属性或者方法我们采取键值对的形式  键 属性名： 值  属性值
      // (2) 多个属性或者方法中间用逗号隔开的
      // (3) 方法冒号后面跟的是一个匿名函数
      // 2. 使用对象
      // (1) 调用对象的属性 我们采取 对象名.属性名 . 我们理解为 的
      console.log(obj.uname); // 张三疯
      // (2) 调用属性还有一种方法  对象名['属性名']
      console.log(obj["age"]); // 18
      // (3) 调用对象的方法 sayHi 对象名.方法名 千万不能忘记添加小括号
      obj.sayHi(); // hi~
    </script>

练习：请按照要求写出对象

请用对象字面量的形式创建一个名字为可可的狗对象。

具体信息如下：

姓名：可可
类型（type）：阿拉斯加犬
年龄：5 岁
颜色：棕红色
技能：汪汪汪（bark），演电影（showFilm）

    <script>
      var obj = {
        uname: "可可",
        type: "阿拉斯加犬",
        age: 5,
        color: "棕红色",
        skills: "汪汪汪、演电影",
      };
    </script>

2.2 变量、属性、函数、方法总结

变量：单独声明赋值，单独存在
属性：对象里面的变量称为属性，不需要声明，用来描述对象的特征
函数：单独存在，通过 “函数名()” 的方式就可以调用
方法：对象里面的函数称为方法，方法不需要声明，使用 “对象.方法名()” 的方式就可以调用，方法用来描述该对象的行为和功能。

    <script>
      // 1. 变量和属性的相同点 它们都是用来存储数据的
      var num = 10;
      var obj = {
        age: 18,
        fn: function () {},
      };
      function fn() {}
      console.log(obj.age);
      // 变量 单独声明并赋值  使用的时候直接写变量名 单独存在
      // 属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性
      // 2. 函数和方法的相同点 都是实现某种功能 做某件事
      // 函数是单独声明 并且调用的 函数名() 单独存在的
      // 方法 在对象里面 调用的时候  对象.方法()
    </script>

2.3 利用 new Object 创建对象

跟我们前面学的 new Array() 原理一致

    <script>
      var obj = new Object(); // 创建了一个空的对象
      obj.uname = "张三疯";
      obj.age = 18;
      obj.sex = "男";
      obj.sayHi = function () {
        console.log("hi~"); // hi~
      };
      // (1) 我们是利用 等号 = 赋值的方法 添加对象的属性和方法
      // (2) 每个属性和方法之间 分号隔开
      console.log(obj.uname); // 张三疯
      console.log(obj["sex"]); // 男
      obj.sayHi();
    </script>

2.4 利用构造函数创建对象

构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

    <script>
      // 我们为什么需要使用构造函数
      // 就是因为我们前面两种创建对象的方式一次只能创建一个对象
      var ldh = {
        uname: "刘德华",
        age: 55,
        sing: function () {
          console.log("冰雨");
        },
      };
      var zxy = {
        uname: "张学友",
        age: 58,
        sing: function () {
          console.log("李香兰");
        },
      };
      // 因为我们一次创建一个对象 里面很多的属性和方法是大量相同的 我们只能复制
      // 因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为构造函数
      // 又因为这个函数不一样  里面封装的不是普通代码 而是对象
      // 构造函数 就是把对象里面的相同的属性和方法抽象出来封装到函数里面
    </script>

    <script>
      // 利用构造函数创建对象
      // 我们需要创建四大天王的对象 相同的属性：姓名 年龄 性别 相同的方法：唱歌
      // 构造函数的语法格式
      function 构造函数名() {
        this.属性 = 值;
        this.方法 = function () {};
      }
      new 构造函数名();

      // 代码展示
      function Star(uname, age, sex) {
        this.name = uname;
        this.age = age;
        this.sex = sex;
        this.sing = function (sang) {
          console.log(sang);
        };
      }
      var ldh = new Star("刘德华", 18, "男"); // 调用函数返回的是一个对象
      console.log(typeof ldh); // Object
      console.log(ldh.name); // 刘德华
      console.log(ldh["sex"]); // 男
      ldh.sing("冰雨");

      var zxy = new Star("张学友", 19, "男");
      console.log(zxy.name); // 张学友
      console.log(zxy["sex"]); // 男

      // 1. 构造函数的名字首字母要大写
      // 2. 我们构造函数不需要 return 就可以返回结果
      // 3. 我们调用构造函数必须使用 new
      // 4. 我们只要 new Star() 调用函数就创建一个对象
      // 5. 我们的属性和方法前面必须添加 this
    </script>

2.5 构造函数和对象

构造函数，如 Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）
创建对象，如 new Stars()，特指某一个，通过 new 关键字创建对象的过程我们也称为对象实例化

    <script>
      // 1. 构造函数 泛指的某一大类
      function Star(uname, age, sex) {
        this.name = uname;
        this.age = age;
        this.sex = sex;
        this.sing = function (sang) {
          console.log(sang);
        };
      }
      // 2. 对象 是一个具体的事物
      var ldh = new Star("刘德华", 18, "男"); // 调用函数返回的是一个对象
      // 3. 我们利用构造函数创建对象的过程我们也称为对象的实例化
    </script>

3. new 关键字

在内存中创建一个新的空对象
让 this 指向这个新的对象
执行构造函数里面的代码，给这个新对象添加属性和方法
返回这个新对象（所以构造函数里面不需要 return）

    <script>
      // new 关键字执行过程
      // 1. new 构造函数可以在内存中创建一个空的对象
      // 2. this 就会指向刚才创建的空对象
      // 3. 执行构造函数里面的代码 给这个空对象添加属性和方法
      // 4. new 返回这个对象
      function Star(uname, age, sex) {
        this.name = uname;
        this.age = age;
        this.sex = sex;
        this.sing = function (sang) {
          console.log(sang);
        };
      }
      var ldh = new Star("刘德华", 18, "男");
    </script>

4. 遍历对象属性

for … in 语句用于对数组或者对象的属性进行循环操作。

    <script>
      // 遍历对象
      var obj = {
        name: "pink老师",
        age: 18,
        sex: "男",
        fn: function () {},
      };

      // for in 遍历我们的对象
      // for (变量 in 对象) {
      // }

      for (var k in obj) {
        console.log(k); // 变量 name age sex 得到的是属性名
        console.log(obj[k]); // 得到的是里面的属性值
      }
      // 我们使用这个 for in 里面的变量 我们喜欢写 k 或者 key
    </script>