五、JavaScript对象 - JavaScript+jQuery 笔记

目录

前言

一、什么是对象

二、利用字面量创建对象

三、访问对象的属性和方法

四、利用 new Object 创建对象

五、利用构建函数创建对象

六、遍历对象的属性和方法

总结

尾注

---

前言

在Javascript中，对象是非常重要的知识点，可以看作是无序的集合数据类型，有若干的键值对来组成。对象可以用来统一管理多个数据哦。

本节将围绕对象的概念和创建方法进行介绍。

一、什么是对象

在JavaScript中，对象是一种数据类型，它是由属性和方法组成的一个集合。属性是指事物的特征，使用“ 对象.属性名 ”访问；方法是指事物的行为，使用“ 对象.方法名() ”进行访问。

例如：在JavaScript中描述一个手机对象，则手机拥有的属性和方法：

例如：在JavaScript中描述一个手机对象，则手机拥有的属性和方法：

• 手机的属性：颜色、重量、屏幕尺寸等
• 手机的方法：打电话、发短信、看电视、听音乐等

假设有一个手机对象p1，则可以用以下代码来访问p1的属性或者调用p1的方法。

示例代码：

<script>
      // 假设现在有一个手机对象p1，通过代码创建出来
      var p1 = {
        color: '黑色',
        weight: '188g',
        screenSize: '6.5',
        call: function (num) {
          console.log('打电话给' + num);
        },
        sendMessage: function (num, message) {
          console.log('给' + num + '发短信，内容为：' + message);
        },
        playVideo: function () {
          console.log('播放视频');
        },
        playMusic: function () {
          console.log('播放音乐');
        }
      };
      // 访问p1的属性
      console.log(p1.color);		// 输出结果：“黑色”，表示手机的颜色为黑色
      console.log(p1.weight);		// 输出结果：“188g”，表示手机的重量为188克
      console.log(p1.screenSize);	// 输出结果：“6.5”，表示手机的屏幕尺寸为6.5英寸
      // 调用p1的方法
      p1.call('123');						// 调用手机的拨打电话方法，拨打号码为123
      p1.sendMessage('123', 'hello');		// 给电话号码123发短信，内容为hello
      p1.playVideo();						// 调用手机的播放视频方法
      p1.playMusic();						// 调用手机的播放音乐方法
</script>

 通过上面的代码可以看出，对象的属性和变量的使用方法类似，对象的方法和函数的使用方法类似。

二、利用字面量创建对象

对象的字面量就是用花括号“ { } ”来包裹对象中的成员，每个成员使用“key: value”的形式来保存，key表示属性名或方法名，value表示对应的值。多个对象成员之间用“ , ”隔开。

示例代码：

<script>
    // 创建一个空对象
    var obj = {};

    // 创建一个学生对象
    var stu1 = {
        name: '小明',			  // name属性
        age: 18,				  // age属性
        sex: '男',				  // sex属性
        sayHello: function () {	  // sayHello方法
          console.log('Hello');
        }
      };
</script>

在上述代码中，obj是一个空对象，它没有成员。stu1对象中包含4个成员（name、age、sex、sayHello），其中name、age、sex是属性成员，而sayHello是方法成员。

三、访问对象的属性和方法

将对象创建好后，就可以访问对象的属性和方法了。

示例代码：

<script>
      // 访问对象的属性（语法1）
      console.log(stu1.name);		// 输出结果：小明
      // 访问对象的属性（语法2）
      console.log(stu1['age']);	    // 输出结果：18
      // 调用对象的方法（语法1 ）
      stu1.sayHello();			    // 输出结果：Hello
      // 调用对象的方法（语法2）
      stu1['sayHello']();	    	// 输出结果：Hello 
</script>

如果对象的成员名中包含特殊字符，则可以用字符串来表示 。

示例代码：

<script>
      var obj = {
        'name-age': '小明-18'
      };
      console.log(obj['name-age']);	  // 输出结果：“小明-18”
</script>

在JavaScript中的对象具有动态特征。如果一个对象没有成员，用户可以手动赋值属性或者方法来添加成员。

示例代码：

<script>
      var stu2 = {};				        // 创建一个空对象
      stu2.name = 'Jack';				    // 为对象增加name属性
      stu2.introduce = function () {		// 为对象增加introduce方法
        alert('My name is ' + this.name);	// 在方法中使用this代表当前对象
      };
      alert(stu2.name);		      // 访问name属性，输出结果：Jack
      stu2.introduce();		      // 调用introduce()方法，输出结果：My name is Jack
</script>

在对象的方法中可以用this来表示对象自身，因此，使用this.name就可以访问对象的name属性。

如果访问对象中不存在的属性时，会返回undefined。

四、利用 new Object 创建对象

在学数组时，我们知道可以使用 new Array 创建数组对象，而数组对象是一种特殊的对象，如果要创建一个普通的对象，则要使用 new Object 进行创建。

示例代码：

<script>
      var obj = new Object();		// 创建了一个空对象
      obj.name = '小明';		  	// 创建对象后，为对象添加成员
      obj.age = 18;
      obj.sex = '男';
      obj.sayHello = function () {
        console.log('Hello');
      };
</script>

五、利用构建函数创建对象

  在前面的字面量创建对象的方式只适合创建一个对象，而当需要创建多个对象时，还要将对象的每一个成员都要写一遍，比较麻烦，因此，可以用构建函数来创建对象。

  使用构造函数创建对象的语法为“ new 构造函数名() ”，在小括号中可以传递参数给构造函数，如果没有参数，小括号可以省略。

基本语法代码：

<script>
      // 编写构造函数
      function 构造函数名() {
        this.属性 = 属性;
        this.方法 = function () {
          // 方法体
        };
      }
      // 使用构造函数创建对象
      var obj = new 构造函数名();
</script>

在语法中，构造函数中的 this 表示新创建出来的对象，在构造函数中可以通过 this 来为新创建出来的对象添加成员。但是要注意：构造函数的名称建议首字母大写。

示例代码：

<script>
      // 编写一个Student构造函数
      function Student(name, age) {
        this.name = name;
        this.age = age;
        this.sayHello = function () {
          console.log('你好，我叫' + this.name);
        };
      }
      // 使用Student构造函数创建对象
      var stu1 = new Student('小明', 18);
      console.log(stu1.name);				  // 输出结果：小明
      console.log(stu1.sayHello());		      // 输出结果：你好，我叫小明
      var stu2 = new Student('小红', 17);
      console.log(stu2.name);			      // 输出结果：小红
      console.log(stu2.sayHello());		      // 输出结果：你好，我叫小红
</script>

利用构造函数可以方便的创建同一类对象，在创建时，只需要将不同对象的属性值通过参数传进去即可。

JavaScript 中的构造函数类似于传统面向对象语言（如 Java）中的类（class），所以在JavaScript 中也有一些面向对象编程的术语，具体如下。

• 抽象：将一类对象的共同特征提取出来，编写成一个构造函数（类）的过程。
• 实例化：利用构造函数（类）创建对象的过程。
• 实例：如果 stu1 对象是由 Student 构造函数创建出来的，则stu1 对象称为 Student 构造函数的实例（或 实例对象）。

在一些文件中，常把对象中的方法也称作函数，或把构造函数称为构造器或构造法。

静态成员：

  在面向对象编程中有静态（static），而在 JavaScript 中也有。JavaScript中的静态成员是指构造函数本身就有的属性和方法，不需要创建实例对象就可以使用。

示例代码：

<script>
      function Student() {
      }
      Student.school = 'X大学';			       // 添加静态属性school
      Student.sayHello = function () {		   // 添加静态方法sayHello
        console.log('Hello');
      };
      console.log(Student.school);		       // 输出结果：X大学
      Student.sayHello();					   // 输出结果：Hello
</script>

六、遍历对象的属性和方法

使用 for…in语法 可以遍历对象中的所有属性和方法

示例代码：

<script>
      // 准备一个待遍历的对象
      var obj = { name: '小明', age: 18, sex: '男' };
      // 遍历obj对象
      for (var k in obj) {
        // 通过k可以获取遍历过程中的属性名或方法名
        console.log(k);		    // 依次输出：name、age、sex
        console.log(obj[k]);	// 依次输出：小明、18、男
      }
</script>

 代码中中的 k 时一个可变的变量名，可以自定义，习惯上名命为 k 或 key ，表示键名。当遍历到每一个成员时，使用 k 来获取当前成员的名称，使用 obj[k] 获取对应值。如果对象中包含方法，则可以通过 obj[k]() 进行调用。

判断对象成员是否存在：

当我们需要判断一个对象中的某个成员是否存在时，可以通过 in 运算符进行判断。

示例代码：

<script>
      var obj = { name: 'Tom', age: 16 };
      console.log('age' in obj);		// 输出结果：true
      console.log('gender' in obj);	    // 输出结果：false
</script>

从代码中可以看出，当对象的成员存在时，返回 true ，不存在时，返回 false 。

总结

以上就是今天要讲的内容，本文仅仅简单介绍了JavaScript 对象的基本概念以及如何自定义对象。

---

尾注

希望这篇文章对你有所帮助，记得转载、点赞、收藏，支持一下，小编将会持续更新哦