JS（四）--JavaScript 面向对象编程

一、JavaScript 面向对象编程

1.1.、什么是面向对象编程

面向对象是一种解决问题的思路，一种编程思想。

1.2、面向过程和面向对象的对比

例如：洗衣服

面向过程的思维方式：

1. 收拾脏衣服
2. 打开洗衣机盖
3. 将脏衣服放进去
4. 设定洗衣程序
5. 开始洗衣服
6. 打开洗衣机盖子
7. 晒衣服

面向对象的思维方式：

洗衣机需要什么对象？

1. 女朋友
2. 洗衣机
   在面向对象的思维方式中：我们只关心要完成事情需要的对象。

总结：面向对象是一种解决问题的思路，一种编程思想。

1.3、JavaScript 中的对象?

万事万物都是对象

在 JavaScript 中，所谓的对象，就是键值对的集合。

1.3.1、属性和方法是什么?

比如要描述一个人，这个人有 name,age,job,体现在代码中：

{ name:"张三", age:18, job:"Programe" }

比如要做一个学生管理系统，那学生就是要设计的对象，学生拥有

name,age,gender,address,phone,体现在代码中：
{ name:"刘亦菲", age:18, gender:"female", address:"上海", phone:"110" }

总结:
面向过程关注的实现功能的步骤，是如何把功能拆解后一步步的实现
面向对象则是关注的实现功能的一系列的对象

二、面向对象编程案例

例如：
设置页面中的 div 和 p 的边框为 1px solid red

传统的处理办法 ：

// 任务需求:
// 1> 获取 div 标签
var divs = document.getElementsByTagName( 'div' );
// 2> 遍历获取到的 div 标签
for(var i = 0; i < divs.length; i++) {
 //3> 获取到每一个 div 元素,设置 div 的样式
 divs[i].style.border = "1px dotted black";
}
// 4> 获取 p 标签
var ps = document.getElementsByTagName("p");
// 5> 遍历获取到的 p 标签
for(var j = 0; j < ps.length; j++) { 
 // 获取到每一个 div 元素 设置 p 标签的样式
 ps[j].style.border = "1px dotted black"; 
}
使用函数进行封装优化 
// 通过标签名字来获取页面中的元素
function tag(tagName) { 
 // var dvs = document.getElementsByTagName(tagName); 
 // return dvs; 
 return document.getElementsByTagName(tagName); 
}
// 封装一个设置样式的函数
function setStyle(arr) { 
 for(var i = 0; i < arr.length; i++) { 
 // 获取到每一个 div 元素
 arr[i].style.border = "1px solid #abc"; 
 } 
}
var dvs = tag("div");
var ps = tag("p");
setStyle(dvs); 
setStyle(ps);

使用面向对象的方式

// 更好的做法：是将功能相近的代码放到一起
var inlett= { 
 getEle: { 
 tag: function (tagName) { 
 return document.getElementsByTagName(tagName); 
 }, 
 id: function (idName) { 
 return document.getElementById(idName); 
 } 
 }, 
 setCss: { 
 setStyle: function (arr) { 
 for(var i = 0; i < arr.length; i++) { 
 arr[i].style.border = "1px solid #abc"; 
 } 
 }, 
 css: function() {}, 
 addClass: function() {}, 
 removeClass: function() {} 
 // ... 
 }
 // 属性操作模块
 // 动画模块
 // 事件模块
 // ... 
};
var divs = inlett.getEle.tag();
inlett.setCss.setStyle(divs);
基于 Object 对象 
var person = new Object();
person.name = 'My Name';
person.age = 18;
person.getName = function(){
 return this.name;
}
对象字面量方式（比较清楚的查找对象包含的属性及方法） 
var person = {
 name : 'My name',
 age : 18,
 getName : function(){
 return this.name;
 }
  }

三、JS面向对象的特征

在进入正题前，先了解传统的面向对象编程（例如 Java）中常会涉及到的概念，大致可以包括：

1. 类：定义对象的特征。它是对象的属性和方法的模板定义。
2. 对象（或称实例）：类的一个实例。
3. 属性：对象的特征，比如颜色、尺寸等。
4. 方法：对象的行为，比如行走、说话等。
5. 构造函数：对象初始化的瞬间被调用的方法。
6. 继承：子类可以继承父类的特征。例如，猫继承了动物的一般特性。
7. 封装：一种把数据和相关的方法绑定在一起使用的方法。
   抽象：结合复杂的继承、方法、属性的对象能够模拟现实的模型。
8. 多态：不同的类可以定义相同的方法或属性。

在 JavaScript 的面向对象编程中大体也包括这些。不过在称呼上可能稍有不同，例如，JavaScript 中没有原生的“类”的概念，而只有对象的概念。因此，随着你认识的深入，我们会混用对象、实例、构造函数等概念。对象（类）的创建 在 JavaScript 中，我们通常可以使用构造函数来创建特定类型的对象。诸如 Object 和 Array 这样的原生构造函数，在运行时会自动出现在执行环境中。此外，我们也可以创建自定义的构造函数。
例如：
在下面的例子中，我们创建了 Person 的两个实例 person1 和 person2 。

function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
}
var person1 = new Person('Weiwei', 27, 'Student');
var person2 = new Person('Lily', 25, 'Doctor');

按照惯例，构造函数始终都应该以一个大写字母开头（和 Java 中定义的类一样），普通函数则小写字母开头。要创建Person 的新实例，必须使用 new 操作符。

以这种方式调用构造函数实际上会经历以下 4 个步骤：

1. 创建一个新对象（实例）
2. 将构造函数的作用域赋给新对象（也就是重设了 this 的指向，this 就指向了这个新对象）
3. 执行构造函数中的代码（为这个新对象添加属性）
4. 返回新对象

3.1、封装性

对象是将数据与功能组合到一起, 即封装

1. js 对象就是键值对的集合键值如果是数据( 基本数据, 复合数据, 空数据 ), 就称为属性如果键值是函数, 那么就称为方法
2. 对象就是将属性与方法封装起来
3. 方法是将过程封装起来

3.2、继承性

所谓继承就是自己没有, 别人有,拿过来为自己所用, 并成为自己的东西传统继承基于模板 子类可以使用从父类继承的属性和方法。

class Person {
string name;
int age;
}
class Student : Person {
}
var stu = new Student();
stu.name
即：让某个类型的对象获得另一个类型的对象的属性的方法
js 继承基于对象 在 JavaScript 中，继承就是当前对象可以使用其他对象的方法和属性。
//声明父类
 var SuperClass = function () {
 var id = 1;
 this.name = ['javascript'];
 this.superValue = function () {
 console.log('superValue is true');
 console.log(id)
 }
 };
 //为父类添加共有方法
 SuperClass.prototype.getSuperValue = function () {
 return this.superValue();
 };
 //声明子类
 var SubClass = function () {
 this.subValue = function () {
 console.log('this is subValue ')
 }
 };
 //继承父类
 SubClass.prototype = new SuperClass() ;
 //为子类添加共有方法
 SubClass.prototype.getSubValue= function () {
 return this.subValue()
 };
 var sub = new SubClass();
 var sub2 = new SubClass();
 sub.getSuperValue(); //superValue is true
 sub.getSubValue(); //this is subValue
 console.log(sub.id); //undefined
 console.log(sub.name); //javascript
 sub.name.push('java'); //["javascript"]
 console.log(sub2.name) //["javascript", "java"]