技术标签: 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)
}
文章浏览阅读1.6k次。安装配置gi、安装数据库软件、dbca建库见下:http://blog.csdn.net/kadwf123/article/details/784299611、检查集群节点及状态:[root@rac2 ~]# olsnodes -srac1 Activerac2 Activerac3 Activerac4 Active[root@rac2 ~]_12c查看crs状态
文章浏览阅读1.3w次,点赞45次,收藏99次。我个人用的是anaconda3的一个python集成环境,自带jupyter notebook,但在我打开jupyter notebook界面后,却找不到对应的虚拟环境,原来是jupyter notebook只是通用于下载anaconda时自带的环境,其他环境要想使用必须手动下载一些库:1.首先进入到自己创建的虚拟环境(pytorch是虚拟环境的名字)activate pytorch2.在该环境下下载这个库conda install ipykernelconda install nb__jupyter没有pytorch环境
文章浏览阅读5.2k次,点赞19次,收藏28次。选择scoop纯属意外,也是无奈,因为电脑用户被锁了管理员权限,所有exe安装程序都无法安装,只可以用绿色软件,最后被我发现scoop,省去了到处下载XXX绿色版的烦恼,当然scoop里需要管理员权限的软件也跟我无缘了(譬如everything)。推荐添加dorado这个bucket镜像,里面很多中文软件,但是部分国外的软件下载地址在github,可能无法下载。以上两个是官方bucket的国内镜像,所有软件建议优先从这里下载。上面可以看到很多bucket以及软件数。如果官网登陆不了可以试一下以下方式。_scoop-cn
文章浏览阅读4.5k次,点赞2次,收藏3次。首先要有一个color-picker组件 <el-color-picker v-model="headcolor"></el-color-picker>在data里面data() { return {headcolor: ’ #278add ’ //这里可以选择一个默认的颜色} }然后在你想要改变颜色的地方用v-bind绑定就好了,例如:这里的:sty..._vue el-color-picker
文章浏览阅读640次。基于芯片日益增长的问题,所以内核开发者们引入了新的方法,就是在内核中只保留函数,而数据则不包含,由用户(应用程序员)自己把数据按照规定的格式编写,并放在约定的地方,为了不占用过多的内存,还要求数据以根精简的方式编写。boot启动时,传参给内核,告诉内核设备树文件和kernel的位置,内核启动时根据地址去找到设备树文件,再利用专用的编译器去反编译dtb文件,将dtb还原成数据结构,以供驱动的函数去调用。firmware是三星的一个固件的设备信息,因为找不到固件,所以内核启动不成功。_exynos 4412 刷机
文章浏览阅读2w次,点赞24次,收藏42次。Linux系统配置jdkLinux学习教程,Linux入门教程(超详细)_linux配置jdk
文章浏览阅读3.3k次,点赞5次,收藏19次。xlabel('\delta');ylabel('AUC');具体符号的对照表参照下图:_matlab微米怎么输入
文章浏览阅读119次。顺序读写指的是按照文件中数据的顺序进行读取或写入。对于文本文件,可以使用fgets、fputs、fscanf、fprintf等函数进行顺序读写。在C语言中,对文件的操作通常涉及文件的打开、读写以及关闭。文件的打开使用fopen函数,而关闭则使用fclose函数。在C语言中,可以使用fread和fwrite函数进行二进制读写。 Biaoge 于2024-03-09 23:51发布 阅读量:7 ️文章类型:【 C语言程序设计 】在C语言中,用于打开文件的函数是____,用于关闭文件的函数是____。
文章浏览阅读3.4k次,点赞2次,收藏13次。跟随鼠标移动的粒子以grid(SOP)为partical(SOP)的资源模板,调整后连接【Geo组合+point spirit(MAT)】,在连接【feedback组合】适当调整。影响粒子动态的节点【metaball(SOP)+force(SOP)】添加mouse in(CHOP)鼠标位置到metaball的坐标,实现鼠标影响。..._touchdesigner怎么让一个模型跟着鼠标移动
文章浏览阅读178次。项目运行环境配置:Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。项目技术:Springboot + mybatis + Maven +mysql5.7或8.0+html+css+js等等组成,B/S模式 + Maven管理等等。环境需要1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。_基于java技术的停车场管理系统实现与设计
文章浏览阅读3.5k次。前言对于MediaPlayer播放器的源码分析内容相对来说比较多,会从Java-&amp;gt;Jni-&amp;gt;C/C++慢慢分析,后面会慢慢更新。另外,博客只作为自己学习记录的一种方式,对于其他的不过多的评论。MediaPlayerDemopublic class MainActivity extends AppCompatActivity implements SurfaceHolder.Cal..._android多媒体播放源码分析 时序图
文章浏览阅读2.4k次,点赞41次,收藏13次。java 数据结构与算法 ——快速排序法_快速排序法