目录
一、面向对象初识
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)
}