技术标签: 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)
}
文章浏览阅读645次。这个肯定是末尾的IDAT了,因为IDAT必须要满了才会开始一下个IDAT,这个明显就是末尾的IDAT了。,对应下面的create_head()代码。,对应下面的create_tail()代码。不要考虑爆破,我已经试了一下,太多情况了。题目来源:UNCTF。_攻防世界困难模式攻略图文
文章浏览阅读2.9k次,点赞3次,收藏10次。偶尔会用到,记录、分享。1. 数据库导出1.1 切换到dmdba用户su - dmdba1.2 进入达梦数据库安装路径的bin目录,执行导库操作 导出语句:./dexp cwy_init/[email protected]:5236 file=cwy_init.dmp log=cwy_init_exp.log 注释: cwy_init/init_123..._达梦数据库导入导出
文章浏览阅读1.9k次。1. 在官网上下载KindEditor文件,可以删掉不需要要到的jsp,asp,asp.net和php文件夹。接着把文件夹放到项目文件目录下。2. 修改html文件,在页面引入js文件:<script type="text/javascript" src="./kindeditor/kindeditor-all.js"></script><script type="text/javascript" src="./kindeditor/lang/zh-CN.js"_kindeditor.js
文章浏览阅读2.3k次,点赞6次,收藏14次。SPI的详情简介不必赘述。假设我们通过SPI发送0xAA,我们的数据线就会变为10101010,通过修改不同的内容,即可修改SPI中0和1的持续时间。比如0xF0即为前半周期为高电平,后半周期为低电平的状态。在SPI的通信模式中,CPHA配置会影响该实验,下图展示了不同采样位置的SPI时序图[1]。CPOL = 0,CPHA = 1:CLK空闲状态 = 低电平,数据在下降沿采样,并在上升沿移出CPOL = 0,CPHA = 0:CLK空闲状态 = 低电平,数据在上升沿采样,并在下降沿移出。_stm32g431cbu6
文章浏览阅读1.2k次,点赞2次,收藏8次。数据链路层习题自测问题1.数据链路(即逻辑链路)与链路(即物理链路)有何区别?“电路接通了”与”数据链路接通了”的区别何在?2.数据链路层中的链路控制包括哪些功能?试讨论数据链路层做成可靠的链路层有哪些优点和缺点。3.网络适配器的作用是什么?网络适配器工作在哪一层?4.数据链路层的三个基本问题(帧定界、透明传输和差错检测)为什么都必须加以解决?5.如果在数据链路层不进行帧定界,会发生什么问题?6.PPP协议的主要特点是什么?为什么PPP不使用帧的编号?PPP适用于什么情况?为什么PPP协议不_接收方收到链路层数据后,使用crc检验后,余数为0,说明链路层的传输时可靠传输
文章浏览阅读587次。软件测试工程师移民加拿大 无证移民,未受过软件工程师的教育(第1部分) (Undocumented Immigrant With No Education to Software Engineer(Part 1))Before I start, I want you to please bear with me on the way I write, I have very little gen...
文章浏览阅读304次。Thinkpad X250笔记本电脑,装的是FreeBSD,进入BIOS修改虚拟化配置(其后可能是误设置了安全开机),保存退出后系统无法启动,显示:secure boot failed ,把自己惊出一身冷汗,因为这台笔记本刚好还没开始做备份.....根据错误提示,到bios里面去找相关配置,在Security里面找到了Secure Boot选项,发现果然被设置为Enabled,将其修改为Disabled ,再开机,终于正常启动了。_安装完系统提示secureboot failure
文章浏览阅读10w+次,点赞93次,收藏352次。1、用strtok函数进行字符串分割原型: char *strtok(char *str, const char *delim);功能:分解字符串为一组字符串。参数说明:str为要分解的字符串,delim为分隔符字符串。返回值:从str开头开始的一个个被分割的串。当没有被分割的串时则返回NULL。其它:strtok函数线程不安全,可以使用strtok_r替代。示例://借助strtok实现split#include <string.h>#include <stdio.h&_c++ 字符串分割
文章浏览阅读2.3k次。1 .高斯日记 大数学家高斯有个好习惯:无论如何都要记日记。他的日记有个与众不同的地方,他从不注明年月日,而是用一个整数代替,比如:4210后来人们知道,那个整数就是日期,它表示那一天是高斯出生后的第几天。这或许也是个好习惯,它时时刻刻提醒着主人:日子又过去一天,还有多少时光可以用于浪费呢?高斯出生于:1777年4月30日。在高斯发现的一个重要定理的日记_2013年第四届c a组蓝桥杯省赛真题解答
文章浏览阅读851次,点赞17次,收藏22次。摘要:本文利用供需算法对核极限学习机(KELM)进行优化,并用于分类。
文章浏览阅读1.1k次。一、系统弱密码登录1、在kali上执行命令行telnet 192.168.26.1292、Login和password都输入msfadmin3、登录成功,进入系统4、测试如下:二、MySQL弱密码登录:1、在kali上执行mysql –h 192.168.26.129 –u root2、登录成功,进入MySQL系统3、测试效果:三、PostgreSQL弱密码登录1、在Kali上执行psql -h 192.168.26.129 –U post..._metasploitable2怎么进入
文章浏览阅读257次。本文将为初学者提供Python学习的详细指南,从Python的历史、基础语法和数据类型到面向对象编程、模块和库的使用。通过本文,您将能够掌握Python编程的核心概念,为今后的编程学习和实践打下坚实基础。_python人工智能开发从入门到精通pdf