目录

一、面向对象初识

1、面向过程：

 2、面向对象：

（一）对象

（二）自定义对象创建

1、通过字变量方式创建

2、通过构造函数创建对象

3、自定义构造函数创建对象

4、通过构造方法来创建对象的过程描述

（三）原型对象

原型定义：

（四）原型链

1、原型链定义

2、常见的原型链

（五）、函数原型方法

（六）、查看对象原型的API方法

二、面向对象的三大特性

（一）封装

1、定义

2、注意

3、优点

4、其他

（二）继承

1、继承性：

2、优点：

3、继承

（三）多态

1、定义：

2、目的：

三、箭头函数、this指向及this丢失

（一）箭头函数

 1、this指向特性：

2、简洁性：

3、应用场景：

 4、案例

（二）this指向及丢失

2.1、this指向

 2.2、this丢失

四、设计模式

1、定义：

（一）工厂模式

1、定义：

（二）单例模式

1、定义：

2、应用场景

（三）代理模式

1、核心思想：

2、优点：

（四）策略模式

1、定义：

（五）订阅发布者模式

1、定义

---

一、面向对象初识

1、面向过程：

​    以**业务流**为中心，按照业务的执行过程进行编程，通常是一步一步去完成业务功能需求，在业务的实现过程中实现功能；

 2、面向对象：

​    以业务的功能模块为中心重点，首先提取业务中的独立功能模块，实现这些功能模块，各个模块或互相独立或互相关联。实现这些功能能模块后，在按照实际的业务流，一步一步完成业务要求。

（一）对象

1、对象定义：对象是一种键值对集合数据；

2、对象键值对分类：

​    (1)数值键值对（对象属性）

​    (2)函数键值对（对象方法）

3、常见对象：

正则表达式、日期对象、Math对象、Array对象、document、window，节点对象、Bom、函数(除了undefined以外都是对象)

（二）自定义对象创建

注：json字符串和普通对象的区别：json字符串会直接忽略function

1、通过字变量方式创建

var obj={
    name:'zzz',
    eate:function (food){
        console.log("吃"+food)
    }
}
            
obj.eate("米饭")//this指向obj==对象中方法内部this一般指向对象本身

2、通过构造函数创建对象

var obj=new Object()
obj.name='111dm';
obj.sleep=function(){
    console.log(this.name+'去睡觉')
}

3、自定义构造函数创建对象

(本质函数，有new关键字介入改变this指向)

function Cat(){
    this.name='zzz';
    this.say=function(){
        console.log("猫")
    }
}
var cat=new Cat();
console.log(cat)

4、通过构造方法来创建对象的过程描述

new 函数名()
1、拷贝（照着样子创建一个）函数名.prototype属性，创建出一个新的对象
2、让函数名构造方法内部的this指向该新对象
3、依次执行函数内部的代码流
    执行：
        this.属性
        this.方法=function(){}
4、所有内部代码执行完成后，将该新对象强制返回

（三）原型对象

原型定义：

​    js的对象，都是由另一个对象，拷贝自身生成的，我们将另一个对象，称为该对象的原型对象，简称该对象的“原型”

    1、通过构造方法，所创建的对象其原型是：够构造方法.prototype
    2、原型对象上的属性和方法可以直接被新创建的对象使用，而不再额外占据内存空间

（四）原型链

除了undefined，js其他都是对象，均有原型，原型对象也有自己的原型

1、原型链定义

​    js的对象都是由原型对象拷贝而来，原型对象也由自己的原型拷贝而来，这样就形成一条拷贝链，将这条拷贝链称为原型链

当一个对象，去调用某个方法，或者属性，该对象先在自己的属性和方法中找，如果没找到就在原型上找，如果原型也没有，就在原型的原型上继续寻找，找到后直接调用。

2、常见的原型链

（1）由构造函数创建的

function Cat(){}
var car=new Cat()
Cat.prototype==>Object.prototype==>null

(2)构造方法对象形成的原型链：

Object、Array、RegExp===>Function.prototype==>Object.prototype==>null

 (3)DOM某一个标签节点
div.prototype===>HTMLDivELement.prototype===>HTMLElement===>Element===>Node===>EventTarget==>Object.prototype==>null

（五）、函数原型方法

1、call()：该方法是函数对象的原型方法，有任何一个函数对象调用

（1）代码执行时，
              1、首先，fn函数中的this关键字指向传入的obj对象
              2、参数列表进行赋值
              3、fn函数被整体调用

（2）用途：
              1、回调函数中保持this的指向
              2、对象方法之间的相互借用

 2、apply()：该方法call()功能一致，区别在于后面的参数列表是数组类型数据

 3、bind(): 区别在于后面的参数列表是函数类型数据

（六）、查看对象原型的API方法

        Object.getPorototypeOf(对象)

二、面向对象的三大特性

（一）封装

1、定义

​    本质上在js中就是指我们要封装一个创建对象的构造函数，抽象出两类事务，对象的属性和方法

属性设置成为对象本身的属性
方法设置成为原型对象
公有方法：可以通过对象.调用的方法   直接调用的
私有方法：写在构造函数中，局部子函数。
             一般只在构造中使用，不对外开放，常常封装一些内部使用的核心算法，工具方法等
公有属性：可以通过 对象.属性 直接读写的属性
私有属性：写在构造方法中，通过局部变量来实现，如果该私有属性需要对外进行数据交互，需要提供一对公用方法。来对该私有变量进行读写

2、注意

（1）私有方法的读写，本质上是利用了函数的闭包特性，因此用来访问属性的公共方法，因此用来访问私有属性公共方法，要写在构造方法内部，不能写在原型上

（2）当公共方法内部，调用私有方法时，一般为了保证私有方法内部的this指向，能够指向当前对象，调用方式通常借用call()和apply()

（3）构造方法的命名一般采用首字母大写的形式，用于与普通函数区分

（4）如果私有属性需要对外进行数据交互，提供公共的set和get方法

3、优点

（1）可复用性强,方便代码的移植
（2）安全性强

4、其他

（1）函数的价值：数据过滤(敏感属性，从直接访问变成通过间接访问，在执行真实的业务代码之前做一些安全性的操作)

（二）继承

1、继承性：

​    核心底层思想是，提取各个封装对象中的公共属性和方法，将这写内容，与各个对象进行分离

2、优点：

​    降低代码冗余，扩展性和维护性

3、继承

- 属性的继承：通过构造方法
- 方法的继承：通过原型继承

（三）多态

1、定义：

​    同一个操作或者同一个方法，接收不同第项时，其执行的结果特性各不相同

2、目的：

​    使用多态的最终目标是相处代码中的分支语句，方便代码的扩展和维护(全等比较分支 switch...case)

三、箭头函数、this指向及this丢失

（一）箭头函数

 1、this指向特性：

​    有箭头函数定义的方法，其内部的this永远指向函数在定义时this关键字的指向单位，与该函数的调用对象无关。

2、简洁性：

（1）当有且仅有一个参数的时候，（）可以省略；

var f1 = item => {
    console.log(item)
}

（2）当函数体中，只有一行return语句时：{}和return可以省略

var f2 = item => console.log(item)
f2('简洁性2')

3、应用场景：

一般用在回调函数中，回调函数一般使用箭头函数

// 遍历数组
var arr = [1, 2, 3, 4, 5]
arr.map((item, index) => {
    console.log(item + '---' + index)
})

 4、案例

function Dog(age){
    this.age=age
}
Dog.prototype.fn1=function(){
    console.log(this.age)//this永远指向调用方
}
Dog.prototype.fn2=()=>{
    console.log(this.age)//this指向运行时定义方，与调用无关
}
var aD=new Dog('zz')
aD.fn1()
aD.fn2()

var obj={
    age:'zz',
    f1:function(){console.log(this.age)},//this==>obj
    f2:()=>{console.log(this.age)
    console.log(this)//this===>window
    }
}
obj.f1()
obj.f2()

（二）this指向及丢失

2.1、this指向

1、普通函数调用，this====>window

function fn(){console.log('11111111')}
fn();//this====>window

2、通过new关键字调用的函数 this===>新创建出来的对象

function Fnn(){this.name='aa';console.log(this)}
var of=new Fnn()//this=====>of

3、通过call，apply，bind调用函数，this--->方法的第一个参数对象

function  fn2(){console.log(this)}
fn2.call(document)//this--->document

4、回调函数，一般this指向window，箭头函数特例

function fn3(fn){fn()}
fn3(function(){
    console.log(this);//this-->window
})

 5、对象内部的方法 this--->当前对象

var obj={
    name:'zz',
    say:function(){
        console.log(this.name)
    }
}
obj.say()//this--->当前对象 obj

6、有箭头函数定义的方法，其内部的this永远指向函数在定义时this关键字的指向单位，与该函数的调用对象无关。

btn1.onclick = function() {
    var count = 0;
    setInterval(()=> {
        count++
    this.innerHTML=count
        console.log(this) //this--->btn
                     
    }, 1000)
             
}

 2.2、this丢失

1、函数嵌套调用，回调函数会导致this指向丢失

解决：将this暂存，然后函数内部用that

btn.onclick=function(){
    var count=0;
    // 解决办法：将this暂存，然后函数内部用that
    var that=this
    setInterval(function(){
        this
        that
        count++
        console.log(this)//this--->window
        console.log(that)//this--->btn
    },1000)
    fn2.call(this)//通过call保持this指向
    fn3()
    function fn3(){
        console.log(this)//window
    }
    var obj={
        name:this,//this---->btn
        bb:function(){
            console.log(this)//this--->window
        }
    }
    console.log(obj.name)
    obj.bb()
                 
}
function fn2(){
    console.log(this)
}

2、方法赋值,导致this丢失

var obj1={
    fn1:function(){
        console.log(this)
    }
}
obj1.fn1()//this====>obj1
var fn=obj1.fn1///this===>window
fn()

四、设计模式

1、定义：

​    是指一类特定代码编写的组织形式，可以方便代码功能扩展、修改、使用，让代码复用性更强

常用设计模式：

- 工厂模式
- 单例模式
- 代理模式
- 策略模式
- 订阅发布者模式

（一）工厂模式

1、定义：

​    工厂模式集中化管理对象的创建，开发中，我们根据业务需求会封装出很多功能各异对象构造方法，为了在调用这些构造方法时能够方便实用，设计了一个统一的方法来创建不同的对象

//各种构造方法
function Dog(){}
function People(){}
function Ball(){}
function Grades(){}

//工厂模式
function Factory(type,option){
    retrun new Factory[type](option)
}

//注册
Factory.Dog=Dog;
Factory.People=People;
Factory.Ball=Ball;
Factory.Grades=Grades;
//调用
var dog=Factory('Dog')
var p=Factory('Dog')

（二）单例模式

1、定义：

重复调用同一个方法，返回的都是同一个对象，或者说唯一一个对象。

2、应用场景

（1）创建唯一的弹出层，或者唯一的组件时使用

（2）利用单例模式进行传参(VUE阶段讲解)

//JS的闭包实现单例的创建
//返回一个单例函数
function getSingleObj(callback){
    var obj=null;
    return function(){
    return obj||(obj new callback(option))
    }
}
//构建对象构造方法
function Fn1(){}
//获取fn1单例创建方法
var f1Create=getSingleObj(Fn1);//创建第一个单例
var fn1=f1Create();
var fn2=f1Create();
fn1==fn2//true

var f2Create=getSingleObj(Fn1);//创建第二个单例
var fn3=f2Create();
var fn4=f2Create();
fn3==fn4//true

（三）代理模式

1、核心思想：

将对象方法中的核心算法和辅助功能代码分离。让一个对象方法内部，功能更纯粹更单一。将辅助性的代码功能分离给一个代理对象方法实现。

2、优点：

在实际业务中进行组合调用以提高代码的可维护性、可扩展性，降低代码耦合性

//运算类
function Operate(num1,num2){
    this.num1=num1;
    this.num2=num2;
}
Operate.prototype.add=function(){
 //原本该方法在执行核心代码this.num1+this,num2之前要先做数据的验证
 //需要写一段验证代码，但由于该种验证坑你会随着业务的更改而发生变化。为了当业务发生变化时不用重新修改，或者页面需要复用时，我们将这里的验证代从运算类的核心代码中提取分离出来，设置成一个代理对象方法，来实现解耦合
    return this.num1+this.num2
}

//代理1
function Prox_1(opObj,num1,num2){
    this.num1=num1;//保存传入参数
    this.num2=num2;//保存传入参数
    this.opObj=opObj;//保存代理对象
}
Prox_1.prototype.add=function(){
    //数据验证，数据处理，代码写在这个位置
    this.opObj.num1=this.num1;
    this.opObj.num2=this.num2;
    return this.opObj.add();
}
var pro_x1=new Pro_1(new Operate(),1,2);
pro_x1.add()

（四）策略模式

1、定义：

     策略模式是将一对需要分支解决的逻辑代码，抽象成不同的对象功能，讲这些对象设置一个工厂方法的属性。将该工厂对象，称为策略组，每一个属性对象就是一个策略。
     除此之外，侧率模式还需要一个驱动组（工厂方法）内部可以根据传入的不同‘标识（type）’来创建出不同的策略对象，调用对象的方法和属性来完成业务

 var list={};
    list.base=function(price,zk){
     this.price=price;
     this.zk=zk;
     this.getRes=function(){
       return this.price*this.zk;
     }
    }
    
    list.s=function(price){
     list.base.call(this,price,0.99);
    }
    list.ss=function(price){
     list.base.call(this,price,0.95);
    }
    list.sss=function(price){
     list.base.call(this,price,0.85)
    }
// 计算价格 （策略组的驱动组：通过该函数可以选择要用哪一组策略对象）
function culatorPriceByType(type,price){
    // 获取对应类型的策略对象
    var sObj=new list[type](price)
    // 返回折后的价钱
    return sObj.getRes()
}
var print=console.log
print(culatorPriceByType('s',123))

（五）订阅发布者模式

1、定义

​    发布/订阅模式，订阅者把自己想订阅的事件注册到调度中心，当该事件触发时候，发布者发布该事件到调度中心（顺带上下文），由调度中心统一调度订阅者注册到调度中心的处理代码。

// 绑定obj.prototype上，定时订阅方法
            Object.EventList={}//定义事件注册表
            var E={}
            E.on=function(type,callback){
                if(Object.EventList[type]){
                    Object.EventList[type].push(callback)
                }else{
                    Object.EventList[type]=[callback]
                }
                
            }
            // 触发方法
            E.$emit=function(type,data){
                // 获取事件处理函数列表
                var fnList=Object.EventList[type]
                if(!Array.isArray(fnList))return;
                // 遍历数组
                fnList.map(fn=>{
                    fn.call(this,data);//确定this指向
                })
                
            }
            // 事件删除
            // 不能传匿名函数
            E.remove=function(type,data){
                if(!fn){
                    delete  Object.EventList[type]
                    return;
                }
                // 找到type类型事件数组
                var fnList=Object.EventList[type]
                // 找到fn在fnList中的下标
                var index =fnList.indexOf(fn)
                // fn从fnList中删除
                fnList.splice(index,1)
            }