- 面向过程：
注重于流程顺序
1.分析解决问题都需要哪些步骤
2.将这些步骤一步一步封装成方法
3.根据业务逻辑，将方法依次调用
- 面向对象：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();
- 构造方法创建对象
// 通过构造函数来写一个人的类
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);
- 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);
对象在访问属性和调用方法时，首先会在自己的属性和方法上面查找
如果能找到，直接调用，未找到，就去原型对象上找，找到后执行
对象对于原型对象的属性和方法是只读操作，无法修改原型对象的属性和方法
如果给对象设置跟原型对象一样的属性名和方法
相当于给对象本身设置了一个新的属性和方法，并且与原型的属性和方法重名
之后访问这个重名的属性和方法，就只能访问到自身，而不能直接访问到原型
- 多态
多态：利用面向对象解决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)
- 继承
// 继承
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);
- 封装
面向对象封装的特性
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);
