JavaScript面向对象

JavaScript面向对象编程学习笔记，详细记录JS面向对象知识点

一、面向对象概述

(一)、面向过程与面向对象

面向过程的解决办法：
注重的是具体的步骤，只有按照步骤一步一步的执行，才能够完成这件事情。
面向对象的解决办法：
注重的是一个个的对象，这些对象各司其职，我们只要发号施令，即可指挥这些对象帮助我们完成任务。

总结：

1. 对于面向过程思想，我们扮演的是执行者，凡是都要考自己完成。
2. 对于面向对象思想，我们扮演的是指挥官，只要找到相应的对象，让他们帮我们做具体的事情即可！

   (二)、面向对象的特征

   

封装性：

1. 封装: 指的是隐藏内部的实现细节，只对外开放操作接口。
2. 接口: 就是对象的方法，无论对象的内部方法多么复杂，用户只需要知道这些接口怎么使用即可。
3. 封装的优势: 无论一个对象内部的代码经过多少次的修改，只要不改变接口，就不会影响到使用这个对象时编写代码。

继承性:

1. 继承：继承就是子类继承父类的特征和行为，使得子类对象（实例）具有父类的属性和方法，或子类从父类继承方法，使得子类具有父类相同的行为。
2. 优势: 可在保持接口兼容的前提下对功能进行扩展。增强了代码的复用性，为程序的修改和补充提供便利。

多态性:

1. 多态: 指的是同一个操作作用于不同的对象，会产生不同的执行结果。
2. 理解: 实际上JavaScript被设计成一种弱类型语言（即一个变量可以存储任意类型的数据），就是多态性的体现。
3. 例如：数字、数组、函数都具有toString()方法，当使用不同的对象调用该方法时，执行结果不同。

   1 2 3 4 5 6

   var obj = 123; console.log(obj.toString()); // 输出结果：123 obj = [1, 2, 3]; console.log(obj.toString()); // 输出结果：1,2,3 obj = function() {}; console.log(obj.toString()); // 输出结果：function () {}

注意：
在面向对象中，多态性的实现往往离不开继承，这是因为当多个对象继承了同一个对象后，就获得了相同的方法，然后根据每个对象的不同来改变同名方法的执行结果。

二、自定义对象

1、基本语法

1
2
3
4
5
6
7
8
9

//   学生
var student = {
	Sid: '001',
	name: '张三',
	age: '男'，
	sayHello: function(){
		console.log('大家好！我叫张三！');
	}
}

“{ }”语法又称为对象的字面量语法，所谓字面量是指在源代码中直接书写的一个表示数据和类型的量，如123（数值型）、’123’（字符型）、[123]（数组）都是字面量。
2、JSON数据格式

• JSON： JavaScript Object Notation，JavaScript对象符号。
• 用途：应用于数据存储和交互。
• 语法： JSON是一个字符串，使用双引号包裹对象的成员名和字符串型的值。

  1 2 3

  {"name":"Tom","age":24,"work":true,"arr":[1,2]} 或 [{"name":"Tom","age":24},{"name":"Jim","age":25}]

3、JSON与对象的区别

• JSON是一个字符串。
• JSON不仅可以用来保存对象，还可以保存数字、字符串、数组等其他类型的数据。

  1 2 3

  {"name":"Tom","age":24,"work":true,"arr":[1,2]} 或 [{"name":"Tom","age":24},{"name":"Jim","age":25}]

4、访问成员对象

1
2
3
4
5
6
7
8

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

可变成员语法：对象[变量名]=值;

1
2
3

var o6 = {};		// 创建一个空对象
var key = 'id';		// 通过变量保存要操作的属性名
o6[key] = 123;		// 相当于“o6['id'] = 123”或“o6.id = 123”

5、对象成员遍历

1
2
3
4
5

 // 语法：语法：for…in
 var obj = {name: 'Tom', age: 16};
for (var k in obj) {
  console.log(k + '-' + obj[k]);
}

• 变量k保存了每个对象成员的名称。
• obj[k]访问成员属性的值。
• objk调用成员方法。

判断对象成员是否存在:

• 当需要判断一个对象中的某个成员是否存在时，可以使用in运算符。
• 当对象的成员存在时返回true，不存在时返回false。

  1 2 3

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

  三、构造函数

  public
  ~~