JavaScript 面向对象编程
一、JavaScript 面向对象编程
1.1.、什么是面向对象编程
面向对象是一种解决问题的思路,一种编程思想。
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)中常会涉及到的概念,大致可以包括:
- 类:定义对象的特征。它是对象的属性和方法的模板定义。
- 对象(或称实例):类的一个实例。
- 属性:对象的特征,比如颜色、尺寸等。
- 方法:对象的行为,比如行走、说话等。
- 构造函数:对象初始化的瞬间被调用的方法。
- 继承:子类可以继承父类的特征。例如,猫继承了动物的一般特性。
- 封装:一种把数据和相关的方法绑定在一起使用的方法。
抽象:结合复杂的继承、方法、属性的对象能够模拟现实的模型。 - 多态:不同的类可以定义相同的方法或属性。
在 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 个步骤:
- 创建一个新对象(实例)
- 将构造函数的作用域赋给新对象(也就是重设了 this 的指向,this 就指向了这个新对象)
- 执行构造函数中的代码(为这个新对象添加属性)
- 返回新对象
3.1、封装性
对象是将数据与功能组合到一起, 即封装
- js 对象就是键值对的集合键值如果是数据( 基本数据, 复合数据, 空数据 ), 就称为属性如果键值是函数, 那么就称为方法
- 对象就是将属性与方法封装起来
- 方法是将过程封装起来
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"]