1. 面向过程：
注重于流程顺序
1.分析解决问题都需要哪些步骤
2.将这些步骤一步一步封装成方法
3.根据业务逻辑，将方法依次调用
2. 面向对象：oop
Object Oriented Programming
对象 面向 编程
核心思想：关注的是 以事务为中心 提取顺序流程中的参与者（对象） 将各个流程顺序进行划分。
编写到各个参与者的方法里面，各自按照约定好的顺序，执行各自的流程顺序，来共同完成一个业务逻辑
对象的范畴：万物万事皆对象
对象的特征： 属性
对象的行为：方法
在程序上，对象是一组行为和特征的数据集和
常见对象：标签对象 BOM对象 系统内置对象
window history localStorage 系统内置对象函数 本身也是一个对象
人为定义的对象
// 系统内置 new Object（）创建空对象
var obj = new Object();
console.log(obj);
// 字面量的形式创建对象
var obj1 = {};
console.log(obj1);
console.log([obj1]);
// 对象是属性和方法的集合
// 给对象动态添加方法
obj.name = '文文' //添加属性
obj['say'] = function () { //添加方法
console.log('hello world');
}
obj1['name'] = '刘';
obj1['say'] = function () {
console.log('000');
}
console.log(obj);
// 系统对象
var arr = new Array();
var str = new String();
var num = new Number();
var bool = new Boolean();
3. 构造方法创建对象
// 通过构造函数来写一个人的类
function Person(name, age) {
this.name = name || '小';
this.age = age || 0;
this.say = function() {
console.log(this.age);
console.log('hello world');
}
// 如果构造函数里面返回this，则这个this代表window对象
// return this;
}
// 创建对象
var p1 = new Person('小明', '3')
console.log(p1);
4. js对象的产生
对象抽象成类，类实例化成对象
直观上来说：通过new产生的 类的实例化
JS中所有的对象，都是由一个原型对象拷贝自己产生的
获取当前对象的原型对象：Object.getPrototype(要检查的对象)
// 原型的属性和方法的访问
function Animal() {
this.name = '小明';
}
// 实例化对象
var a1 = new Animal();
console.log(a1.name);
console.log(a1);
Animal.prototype.type = 'dog';
Animal.prototype.name = '大明';
var a2 = new Animal()
console.log(a2);
console.log(a2.type);
a2.type = 'cat'
console.log(a2);
console.log(Animal.prototype.type);
对象在访问属性和调用方法时，首先会在自己的属性和方法上面查找
如果能找到，直接调用，未找到，就去原型对象上找，找到后执行
对象对于原型对象的属性和方法是只读操作，无法修改原型对象的属性和方法
如果给对象设置跟原型对象一样的属性名和方法
相当于给对象本身设置了一个新的属性和方法，并且与原型的属性和方法重名
之后访问这个重名的属性和方法，就只能访问到自身，而不能直接访问到原型
5. 多态
多态：利用面向对象解决switch case
执行同一个方法，传入的对象不一样，输出的结果不一样
分离的思想：
将程序中变化的部分和不变的部分分离
将变化的部分当做参数传入函数
在函数内部将相同部分的对象方法调用
根据不同的对象自动输出不同的结果
尽可能的消除了分支语句，方便系统的扩展
function Dog() {
this.say = function() {
console.log('汪汪');
}
}
function Cat() {
this.say = function() {
console.log('喵喵');
}
}
function Cattle() {
this.say = function() {
console.log('哞哞');
}
}
function Sheep() {
this.say = function() {
console.log('咩咩');
}
}
// 调用方法
function makeSound(obj) {
obj.say()
}
var d1 = new Dog();
makeSound(d1)
var d2 = new Cat();
makeSound(d2)
6. 继承
// 继承
function Person() {
this.type = '人';
this.name = '123';
this.age = 18;
this.say = function() {
console.log('hi');
}
}
function Man() {
this.sex = 1;
}
// 相当于Person实例化一个对象，覆盖掉Man的原型对象
// 未覆盖前，Man的原型对象构造函数指向Man
// 覆盖后，Man.prototype.constructor指向Person
// 所以需要将其改写回来，重新指向Man
Man.prototype = new Person(); //指向person
Man.prototype.constructor = Man //改写回来指向自己
var m1 = new Man()
console.log(m1);
console.log(Man.prototype.constructor);
console.log(m1.name); //可使用person的属性
function Kids() {
this.age = 3;
}
Kids.prototype = new Man()
Kids.prototype.constructor = Kids
var k1 = new Kids()
console.log(k1.type); //可使用person、man的属性
console.log(k1.age);
// 构造函数式继承
function Person(name, age) {
this.name = name;
this.age = age;
console.log('111');
}
// 使用apply和call功能几乎一样，区别参数的形式不同
// call可以有多个参数，第一个参数是指向的对象，其余参数为实参
// apply只有两个参数，第一个参数是指向的对象，第二个参数是实参数组
function Man(name, age) {
// Person.call(this, name, age)
Person.apply(this, [name, age]) //改变this指向person
this.sex = 1;
}
var m1 = new Man(2, 3)
console.log(m1);
m1.age = 0
console.log(m1.age);
7. 封装
面向对象封装的特性
js面向对象 封装方法是通过构造函数来实现的
封装优点：1.数据隐藏 可以将代码中敏感的算法、变量、常量，隐藏在对象的私有变量中，仅供内部使用
2.安全性 强制通过自定义的方法 来实现内部和外部的数据交互 达到数据过滤的效果
一般来说，设置通常用 ...+setter+...来命名方法
获取通常用 ...+getter+...来命名方法
// 定义一个构造函数
function Home() {
// 私有属性
var money;
// 公共属性
this.name = 'qwqq'
// 公共方法
this.Asetter = function() {
var num = rand(500, 5000)
money = num;
}
this.Agetter = function() {
return money - 500;
}
// 私有方法
function rand(min, max) {
return Math.round(Math.random() * (max - min) + min)
}
// 数据隐藏
this.age = 0;
this.ageChange = function(n) {
this.age = n;
}
}
var h1 = new Home()
h1.Asetter();
console.log(h1.Agetter());
console.log(h1.money);
// 数据隐藏
console.log(h1.ageChange(20));
// 封装初始化传参
function Person(options) {
options = options || {}
this.name = options.name
this.age = options.age
this.say = options.say
}
var p1 = new Person({
name: '123',
age: 4,
say: function() {
console.log('hi');
}
})
console.log(p1);
