技术标签: 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)
}
文章浏览阅读258次。多线程基础之设计模式Future模式_线程 future
文章浏览阅读1w次,点赞17次,收藏60次。本文档仅对ccs编程过程中所出现的error#5、error#10008-D、error#10010做简要讲解在使用ccs对dsp编程过程中,用户可能会参考一些例程或在维护优化时阅读他人程序,而在导入程序时会出现各种各样的错误或警告,下面对编者在修改程序时遇到的error#5、error#10008-D和error#10010做简要讲解。1.error#5的错误更正讲解在ccs中导入其..._cannot find file "libc.a
文章浏览阅读359次。题意:给定m(m思路:暴力找出第一个串的所有长度大于等于3的子串,用KMP算法求其是否为剩下m-1个串的子串。为了复用next数组,枚举子串时先固定起点(求一遍next数组即可),然后由长到短枚举子串(剪枝)。#include #include using namespace std;#define N 60char s[12][N+5],t[N+5],res[N+5];int
文章浏览阅读1.4k次。reshape把指定的矩阵改变形状,但是元素个数不变,例如,行向量:a = [1 2 3 4 5 6]执行下面语句把它变成3行2列:b = reshape(a,3,2)执行结果:b =1 42 53 6若a=[1 2 34 5 67 8 9]使用reshpe后想得到b=[1 2 3 4 5 6 7 8 9]只需要将a转置一下就可以了:b=reshape(a',1,9)---------------..._matlab中reshape的含义
文章浏览阅读1k次。运算符在数学和C语言中的区别刚开始学C语言的人,一般都认为C语言中的运算符跟数学中的运算符完全相同,没必要去考虑和研究,从而在利用过程中经常出错而把学习C语言越来越难或神秘化,其实学C语言并不是很难的事,要把握有些重要技巧,很容易学会.著名计算机科学家沃思(Nikiklaus Wirth)说“程序=算法+数据类型”,要好好学会程序,首先要深入了解算法,而了解算法事实上指的是就是正确地了解和利用运算..._c语言中的加减乘除和数学中的加减乘除有什么不同【
文章浏览阅读3.9k次。一、三大框架基本结构1.为什么需要框架说明: 如果生产环境下的项目,都是从头(从底层写起)开发,难度太大了,并且开发的效率极其低下. 所以为了让项目快速的上线部署. 将某些特定的功能.进行了高级的封装. 那么我们如果需要使用封装后的API.,则必须按照人家的要求编码2.框架的分类:1.Spring框架:整个框架中负责“宏观调控”的(主导),负责整合其它的第三方的框架2.SpringMVC框架:主要负责实现前后端数据的交互3.Mybatis框架/MybatisPlus框架:持久层框.._后端框架三大框架
文章浏览阅读2次。 堆栈原理: 数组模拟堆栈: //数组模拟栈class ArrayStack{ //栈顶 private int top = -1; private int maxSize; private int[] arrayStack; public ArrayStack(int maxSize){ this.maxSi...
文章浏览阅读742次,点赞16次,收藏17次。不选: Enforce portability rules to share this project with others。勾选: Configure Advanced Settings after project creation。保存类型(T):Understand projects (*.udb)勾选:Include subdirectories (包含子文件夹)Additional Filters: (空)单击 文件夹 lab1。文件名(N):lab1。双击 文件夹 boot。_understand 6.5.1176
文章浏览阅读969次。在从零开始带你成为MySQL实战优化高手学习笔记(一)中学习到一条语句到底是怎么执行的,从链接获取数据到通过查询解析器解析SQL语句表达的什么意思,解析之后由查询优化器生成查询路径树,选出一条最优查询路径调用存储引擎接口..._mysql_global_status_innodb_buffer_pool_reads
文章浏览阅读8.8k次,点赞6次,收藏12次。传统的表单控件十分简陋,可以说是很难看,那怎么办?方法:我们自己做一个好看的样式出来,用各种标签啊,css啊,是可以做到的。如图:做出这样一个样子应该是很简单的,但是怎么让他具有上传的功能的呢?那就使用代理的方法,点击上传就等于点击(上传文件表单控件)废话不多说,直接上代码:html:测试插件body{font_文件上传框很丑
文章浏览阅读4.8k次,点赞3次,收藏18次。js简单表格操作,对表格进行增删改,效果图:全部代码:<!DOCTYPE html><html><head> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery.2.1.4.min.js" ></sc_"var str = '序号名字
文章浏览阅读1.1w次,点赞8次,收藏99次。今天通过一份销售数据,聊聊Power BI数据分析。一、分析数据数据源总的有四个表,店铺资料,销售目标,销售数据_本期,销售数据_去年同期。各表表头如下:1店铺资料表:2销售目标:3销售数据_本期:4销售数据_去年同期:数据中包含多个城市、督导、店铺的数据,我希望经过分析后能得到各个城市/店铺的销售情况,即业绩、业绩完成率、业绩贡献度、业绩增长率、各销售人员的销售能力等。此次..._powerbi汇总销售人员业绩包括无销售记录的人