技术标签: JavaScript 前端 面向对象编程 javascript 开发语言
目录
以**业务流**为中心,按照业务的执行过程进行编程,通常是一步一步去完成业务功能需求,在业务的实现过程中实现功能;
以业务的功能模块为中心重点,首先提取业务中的独立功能模块,实现这些功能模块,各个模块或互相独立或互相关联。实现这些功能能模块后,在按照实际的业务流,一步一步完成业务要求。
1、对象定义:对象是一种键值对集合数据;
2、对象键值对分类:
(1)数值键值对(对象属性)
(2)函数键值对(对象方法)
3、常见对象:
正则表达式、日期对象、Math对象、Array对象、document、window,节点对象、Bom、函数(除了undefined以外都是对象)
注:json字符串和普通对象的区别:json字符串会直接忽略function
var obj={
name:'zzz',
eate:function (food){
console.log("吃"+food)
}
}
obj.eate("米饭")//this指向obj==对象中方法内部this一般指向对象本身
var obj=new Object()
obj.name='111dm';
obj.sleep=function(){
console.log(this.name+'去睡觉')
}
(本质函数,有new关键字介入改变this指向)
function Cat(){
this.name='zzz';
this.say=function(){
console.log("猫")
}
}
var cat=new Cat();
console.log(cat)
new 函数名()
1、拷贝(照着样子创建一个)函数名.prototype属性,创建出一个新的对象
2、让函数名构造方法内部的this指向该新对象
3、依次执行函数内部的代码流
执行:
this.属性
this.方法=function(){}
4、所有内部代码执行完成后,将该新对象强制返回
js的对象,都是由另一个对象,拷贝自身生成的,我们将另一个对象,称为该对象的原型对象,简称该对象的“原型”
1、通过构造方法,所创建的对象其原型是:够构造方法.prototype
2、原型对象上的属性和方法可以直接被新创建的对象使用,而不再额外占据内存空间
除了undefined,js其他都是对象,均有原型,原型对象也有自己的原型
js的对象都是由原型对象拷贝而来,原型对象也由自己的原型拷贝而来,这样就形成一条拷贝链,将这条拷贝链称为原型链
当一个对象,去调用某个方法,或者属性,该对象先在自己的属性和方法中找,如果没找到就在原型上找,如果原型也没有,就在原型的原型上继续寻找,找到后直接调用。
(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(): 区别在于后面的参数列表是函数类型数据
Object.getPorototypeOf(对象)
本质上在js中就是指我们要封装一个创建对象的构造函数,抽象出两类事务,对象的属性和方法
属性设置成为对象本身的属性
方法设置成为原型对象
公有方法:可以通过对象.调用的方法 直接调用的
私有方法:写在构造函数中,局部子函数。
一般只在构造中使用,不对外开放,常常封装一些内部使用的核心算法,工具方法等
公有属性:可以通过 对象.属性 直接读写的属性
私有属性:写在构造方法中,通过局部变量来实现,如果该私有属性需要对外进行数据交互,需要提供一对公用方法。来对该私有变量进行读写
(1)私有方法的读写,本质上是利用了函数的闭包特性,因此用来访问属性的公共方法,因此用来访问私有属性公共方法,要写在构造方法内部,不能写在原型上
(2)当公共方法内部,调用私有方法时,一般为了保证私有方法内部的this指向,能够指向当前对象,调用方式通常借用call()和apply()
(3)构造方法的命名一般采用首字母大写的形式,用于与普通函数区分
(4)如果私有属性需要对外进行数据交互,提供公共的set和get方法
(1)可复用性强,方便代码的移植
(2)安全性强
(1)函数的价值:数据过滤(敏感属性,从直接访问变成通过间接访问,在执行真实的业务代码之前做一些安全性的操作)
核心底层思想是,提取各个封装对象中的公共属性和方法,将这写内容,与各个对象进行分离
降低代码冗余,扩展性和维护性
- 属性的继承:通过构造方法
- 方法的继承:通过原型继承
同一个操作或者同一个方法,接收不同第项时,其执行的结果特性各不相同
使用多态的最终目标是相处代码中的分支语句,方便代码的扩展和维护(全等比较分支 switch...case)
有箭头函数定义的方法,其内部的this永远指向函数在定义时this关键字的指向单位,与该函数的调用对象无关。
(1)当有且仅有一个参数的时候,()可以省略;
var f1 = item => {
console.log(item)
}
(2)当函数体中,只有一行return语句时:{}和return可以省略
var f2 = item => console.log(item)
f2('简洁性2')
一般用在回调函数中,回调函数一般使用箭头函数
// 遍历数组
var arr = [1, 2, 3, 4, 5]
arr.map((item, index) => {
console.log(item + '---' + index)
})
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()
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)
}
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()
是指一类特定代码编写的组织形式,可以方便代码功能扩展、修改、使用,让代码复用性更强
常用设计模式:
- 工厂模式
- 单例模式
- 代理模式
- 策略模式
- 订阅发布者模式
工厂模式集中化管理对象的创建,开发中,我们根据业务需求会封装出很多功能各异对象构造方法,为了在调用这些构造方法时能够方便实用,设计了一个统一的方法来创建不同的对象
//各种构造方法
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)利用单例模式进行传参(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
将对象方法中的核心算法和辅助功能代码分离。让一个对象方法内部,功能更纯粹更单一。将辅助性的代码功能分离给一个代理对象方法实现。
在实际业务中进行组合调用以提高代码的可维护性、可扩展性,降低代码耦合性
//运算类
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()
策略模式是将一对需要分支解决的逻辑代码,抽象成不同的对象功能,讲这些对象设置一个工厂方法的属性。将该工厂对象,称为策略组,每一个属性对象就是一个策略。
除此之外,侧率模式还需要一个驱动组(工厂方法)内部可以根据传入的不同‘标识(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))
发布/订阅模式,订阅者把自己想订阅的事件注册到调度中心,当该事件触发时候,发布者发布该事件到调度中心(顺带上下文),由调度中心统一调度订阅者注册到调度中心的处理代码。
// 绑定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)
}
文章浏览阅读2w次,点赞7次,收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加 外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案,在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建:添加Visual C++ , Win32 项目这......_c#调用lib
文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体,挺好看的。注重颜值的网站都会使用,例如知乎:font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang
文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--action,当提交表单时,向何处发送表单中的数据,地址可以是相对地址也可以是绝对地址--><!--method将表单中的数据传送给服务器处理,get方式直接显示在url地址中,数据可以被缓存,且长度有限制;而post方式数据隐藏传输,_html表单的处理程序有那些
文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证(即Google Authenticator服务)后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器
文章浏览阅读4.3k次,点赞5次,收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距
文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节,实现了多层数据的堆叠,为用户 提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制(CoW)策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的,不建议用于生成环境。_docker 保存容器
文章浏览阅读834次,点赞27次,收藏13次。网络拓扑结构是指计算机网络中各组件(如计算机、服务器、打印机、路由器、交换机等设备)及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式,也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn
文章浏览阅读1.8k次,点赞5次,收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时,通常的做法是:new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的,而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠,也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑,需要做一些额外的特殊处理,笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数,一劳永逸,避免每次ne_date.prototype 将所有 ios
文章浏览阅读5.3k次。方法一:用PLSQL Developer工具。 1 在PLSQL Developer的sql window里输入select * from test for update; 2 按F8执行 3 打开锁, 再按一下加号. 鼠标点到第一列的列头,使全列成选中状态,然后粘贴,最后commit提交即可。(前提..._excel导入pl/sql
文章浏览阅读83次。Git常用命令速查手册1、初始化仓库git init2、将文件添加到仓库git add 文件名 # 将工作区的某个文件添加到暂存区 git add -u # 添加所有被tracked文件中被修改或删除的文件信息到暂存区,不处理untracked的文件git add -A # 添加所有被tracked文件中被修改或删除的文件信息到暂存区,包括untracked的文件...
文章浏览阅读202次。分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120
文章浏览阅读1.8k次。版权声明:转载请注明出处 http://blog.csdn.net/irean_lau。目录(?)[+]1、缺省构造函数。2、缺省拷贝构造函数。3、 缺省析构函数。4、缺省赋值运算符。5、缺省取址运算符。6、 缺省取址运算符 const。[cpp] view plain copy_空类默认产生哪些类成员函数