Web前端 JavaScript笔记7

js的执行机制

  js是单线程

        同步:前面一个任务执行结束之后,执行后一个

        异步:异步任务,引擎放在一边,不进入主线程,而进入任务队列的任务

        js通过浏览器解析,浏览器靠引擎解析

        `回调函数`同步任务执行完之后,再回到任务队列里查看异步任务

        常见的异步任务是:settimeout 、setInterval 、事件等等

<script>setTimeout(()=>{console.log("世界那么拥挤吗,多我一个聪明的人怎么了55555")},1000)console.log("11111")setTimeout(()=>{console.log("好想睡觉")},0)console.log("22222")console.log("33333")
</script>

可以看到,拥有定时器的输出语句即使定了0秒,也是后面执行 


对象

1、定义(字面量)

对象的定义通过{}来实现,{}里有函数与变量,但在对象里他们叫属性与方法

对象的成员以键值对的形式出现,多个成员之间用逗号隔开。如下

let cat={"name":"Tom","age":0,"eat":()=>{console.log("猫喜欢吃鱼")}}
console.log(cat)

2、 访问对象成员

对象名.成员

console.log("猫猫的名字"+cat.name)
console.log("猫猫的年龄"+cat.age)
cat.eat()

3、 对象成员遍历

使用 for ....in.....可以遍历对象成员

  for(let i in cat){console.log(i+":"+cat[i])}


构造函数

构建对象是创造对象的另一种方式

构造函数可以创造出一组具有相同特征的对象

可以通过动物函数构造出小猫,小狗,小鸟对象。这些对象基于构造函数这一个模板创造,同时又各有自己的特征。

定义1、 

function 函数名(参数){

        let 对象名={}        //创建一个空对象

        对象名.属性=参数

        对象名.方法名=()=>{方法内容}

        return 对象名

}

 <script>function a(name,age,action){let animal={}animal.name=nameanimal.age=ageanimal.action=actionanimal.happy=()=>{console.log("冬暖夏凉,吃好睡好")}return animal}let cat=a("小猫",9,"喵喵叫")let dog=a("小狗",5,"汪汪叫")console.log(cat)          console.log(dog)         
</script>

定义2 

function 对象名(参数){

this.参数=参数值

this.方法=function(){

        方法内容

}}

function animal(name,age,action){this.name=namethis.age=agethis.happy = function() {console.log("睡个12个小时")}this.hobby=()=>{console.log("吃吃吃,好吃爱吃")}
}
let cat =new animal("猫咪",2,"喵喵喵")   
let dog =new animal("狗狗",2,"汪汪汪")
console.log(cat)          
console.log(dog)  
cat.hobby() 


深拷贝与浅拷贝

 浅拷贝 : 指两个js 对象指向同一个内存地址,其中一个改变会影响另一个;

  <script>let a=[1,2,3,4]let a2=aa2.push("kaka")console.log(a)console.log(a2)
</script>

将数组a赋值与于a 2,a2发生改变,a也随之发生改变,是因为数组a将地址赋给了a2

深拷贝 :真正创建一个对象的副本,就是复制一个对象,复制后的新对象重新指向一个新的内存地址,两个对象改变互不影响。

<script>let a=[1,2,3,4]let a2=[...a]a2.push("kaka")console.log(a)</script>

但是,复制的对象里面有元素是个数组,拆开对象复制元素的时候,并没有拆开元素里的数组,等同于浅拷贝的地址赋值。 

    <script>let a=[1,2,3,4,["哈哈"]]let a2=[...a]a2[4].push("kaka")console.log(a)console.log(a2)</script>

解决方法:让被复制的相对应的数组元素 ,另外赋值为拆开的原数组元素

    <script>let a=[1,2,3,4,["哈哈"]]let a2=[...a]a2[4]=[...a[4]]a2.push("kaka")console.log(a)console.log(a2)</script>


原型

假如,由构造函数创建的多个对象里,都有个一模一样的属性或方法,那么有相同属性方法的不同对象创建,会浪费内存。于是就有原型的出现。

原型是一个对象,包括构造函数共同的属性方法。原型对象是通过构造函数的prototype属性创建的。

下面这个例子两个对象之间有相同的函数,用关系运算符就知道他们连地址都不一样。 

function animal(name,age,action){this.name=namethis.age=agethis.hobby=()=>{console.log("吃吃吃,好吃爱吃")}
}let cat =new animal("猫咪",2,"喵喵喵") 
let dog =new animal("狗狗",2,"汪汪汪")
console.log(cat.hobby===dog.hobby )

 

将同样的方法变成原型的共享方法 ,使其只占一块内存地址

构造函数名.prototype.属性/方法

function animal(name,age,action){this.name=namethis.age=age
}
let cat =new animal("猫咪",2,"喵喵喵")   
let dog =new animal("狗狗",2,"汪汪汪")
animal.prototype.hobby=function (){console.log("吃吃吃,好吃爱吃")}
console.log(cat.hobby===dog.hobby )

 

原型链 

  • 原型链:每个构造函数的原型对象都有一个指向另一个构造函数的原型对象的原型链。
  • 当我们试图访问一个对象的属性时,如果该对象本身没有这个属性,会去查找创造这个对象的构造函数的原型对象。
  • 若该原型对象本身没有这个属性,JS引擎会沿着原型链向上查找,直到找到该属性或者到达原型链的末端。
  • 继承:通过原型链,JS实现了对象之间的继承。子级原型对象可以通过原型链访问父级原型对象的属性和方法,实现了属性和方法的共享。
  • Object对象是js的内置对象,所有的 JS对象都继承自 Object的原型对象 Object.prototype,因为Object的原型对象是原型链的顶端。
  • 原型链的终点是 null,在原型链的最顶端找不到属性或方法时会返回 null。

这是一个有原型的构造函数,所有对象有个共享方法happy。 

function animal(name,age,action){this.name=namethis.age=age
}
let cat =new animal("猫咪",2,"喵喵喵")   
let dog =new animal("狗狗",2,"汪汪汪")
animal.prototype.hobby=function (){console.log("吃吃吃,好吃爱吃")}  
  • console.log(cat.constructor)
  • console.log(cat.__proto__.constructor)
  • console.log(animal.prototype.constructor)  

这三段语句都是下图结果,是构造函数本身

 

  • console.log(cat.__proto__)
  • console.log(animal.prototype)  

 这两句话指向同样的地方:构造函数原型对象

 

 

function animal(name,age) {this.name=namethis.age=age;
}
const cat = new animal('猫咪', 10);console.log(cat instanceof animal);
console.log(cat instanceof Object);

 


 

this

1、在全局作用域中
this -> window

<script>console.log(this); //this->window
</script>


2、箭头函数中的this
箭头函数没有自己的this,引用的是距离自己最近的作用域中的this

3、事件绑定中的this
this -> 事件源

<button>点击</button>
document.querySelector("button").addEventListener("click",function(){console.log(this)})


4、定时器中的this
this->window

   setTimeout(()=>{console.log(this)})


5、构造函数中的this
this->实例化对象

function animal(name,age){this.name=namethis.age=agethis.hobby=function (){console.log(this)console.log(this.name)console.log(this.age)} 
}
let cat =new animal("猫咪",2,"喵喵喵")   
cat.hobby()


 

更改this指向

this的指向是可以改变的

call() 、 apply() 这2个函数的第一个参数都是 this 的指向对象

bind()

call()

  <script>
let a={name:"zhangsan"
}
let b={name:"lisi",ha:function(c,d){console.log(this.name+c+d)}
}
b.ha.call(a,"1","2")</script>

 

apply() 

<script>
let a={name:"zhangsan"
}
let b={name:"lisi",ha:function(c,d){console.log(this.name+c+d)}
}
b.ha.apply(a,[1,2])</script>

 

bind()

<!-- 不会调用函数,返回的是新函数 --><script>function t(){console.log(this)}const o={"nan":"dfgh"}newa=t.bind(o)newa()</script>

 

 综合

 let name="lisi",age=5let a={name:"kawu",aage:this.age,p:function(n,aa){console.log(this.name+","+this.aage+"岁"+"来自"+n+"去往"+aa)}}let b={aage:22,name:"zhangsan"}function bb(ag){console.log(this.nname+ag)}let nname="xiaoming"let B=bb.bind({nname:"xiaohua"},2)
a.p.call(b,'成都','上海') 
a.p.apply(b,['成都','上海']);  
B()  


异常处理:

final:不管有没有异常都会执行

下面这个例子故意没有写盒子标签

<body><script>try{const b=document.querySelector("div")box.style.backgroundColor="red"}catch(error){console.log(error.message)console.log("kakakakakak")}finally{console.log("sdfghjkwertyuio")}</script>
</body>

 

function t(n1,n2){if(n1!=n2){throw new Error("nonononon");}}
t(3,4)


 Jquery

  •     $是顶级对象,同时是jquary的别称
  •     jquary无法使用原生对象的方法
  •     $(dom对象)===转换为jQuary对象
  • 要下载引入Jquery官网的js文件,其中压缩了大量属性与方法                                 <script src="./jquery-3.7.1.min.js"> </script>
  • 引入js文件的标签里面就不要再写东西了,重新再写script标签去编写属性方法
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><script src="./jquery-3.7.1.min.js"></script><style>div{height: 100px;width: 200px;border: 3px solid blue;}</style>
</head>
<body><div>好的佳人们</div><script>$("div").css({"color": "aqua","backgroundColor" :"blue"})</script>
</body>
</html>

入口函数 

 隐式迭代

选择器

练习 

引入CSS样式:

<!DOCTYPE html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.7.1.min.js"></script><style>div{height: 100px;width: 200px;border: 3px solid blue;}.new{height: 150px;width: 150px;border-radius: 50%;background-color: chartreuse;}</style>
</head>
<body><div>好的佳人们</div><script>$("div").addClass("new")// $("div").removeClass("new")// $("div").toggleClass("new")</script>
</body>
</html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/739.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微服务与Web服务:定义、优势、挑战与实践指南20240416

引言 在当前的软件开发领域&#xff0c;微服务和Web服务是两个频繁被讨论的术语。随着企业应用的复杂性和规模的增加&#xff0c;深入理解这两种服务架构的优势和挑战变得极为关键。本文将探讨微服务和Web服务的核心概念、优缺点&#xff0c;并通过Go语言示例展示它们的实现。…

LabVIEW卡尔曼滤波技术

LabVIEW卡尔曼滤波技术 在现代航空导航中&#xff0c;高精度和快速响应的方位解算对于航空安全至关重要。通过LabVIEW平台实现一种卡尔曼滤波方位解算修正技术&#xff0c;以改善传统导航设备在方位解算中的噪声干扰问题&#xff0c;从而提高其解算精度和效率。通过LabVIEW的强…

新媒体短视频运营之抖音的19种流量变现模式

本文中谈的有带货类、广告推广类、团购类、任务推广类等多种抖音变现方式,包括图文带货、视频带货、抖店带货、直播带货等,适合个人博主、商家和企业等不同用户群体。 同时,还介绍了中视频计划、剪映创作人、看见音乐计划等变现路径。 1、图文带货 开通要求:0粉即可开通…

Java基础之JVM基础调优与常见问题

常见命令 以下命令的介绍&#xff0c;全部在jdk8环境下运行的&#xff1b; jps ☆☆☆☆☆ 查看当前运行的进程号&#xff1b; jmap ☆☆☆ jmap命令可以查看jvm的内存信息&#xff0c;class对应的实例个数以及占用的内存大小 jmap -histo 查看当前java进程 [rdVM-8-12-c…

Ugee手写板Ex08 S设置流程

手写笔的结构 笔尖 鼠标左键 上面第一个键&#xff1a;鼠标右键&#xff08;效果有时候也不完全等同&#xff09; 上面第二个键&#xff1a;鼠标中键 WPS ①打开pdf ②批注->随意画->画曲线 效果如下&#xff1a;

定时执行专家 - 高级功能详解 - 关联任务设置

◆ 需求场景 AB两个任务&#xff0c;A任务每隔 10分钟执行一次&#xff1b;A任务执行完1分钟&#xff08;60秒&#xff09;之后&#xff0c;再执行B任务。这种情况就需要用到“关联任务”功能。 此处以“日程提醒”、“执行Nircmd命令”举例。A任务设置&#xff1a;日程提醒&…

小程序中使用HTTPS调用自带文本安全内容检测接口(msg_sec_check)的实现方法

在小程序中调用自带的文本安全内容检测接口&#xff0c;你需要使用小程序提供的wx.request方法。以下是一个示例代码&#xff1a; javascript代码: // 假设你已经获取了access_token,如果不知道如何获取&#xff0c;可以参考我上一篇文章 const access_token 你的access_tok…

Matlab 最小二乘法拟合直线(过指定点)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 基于之前博客中的思路:点云最小二乘法拟合空间直线,我们只需要将其中的去均值化的操作,转换为我们要指定点的坐标,并计算出相应的协方差矩阵,就可以很容易的求解出经过我们指定点的直线(当然它仍然保证了所有…

Python 基于docker部署的Mysql备份查询脚本

前言 此环境是基于docker部署的mysql&#xff0c;docker部署mysql可以参考如下链接&#xff1a; docker 部署服务案例-CSDN博客 颜色块文件 rootbogon:~ 2024-04-18 16:34:23# cat DefaultColor.py ######################################################################…

java音乐播放器系统设计与实现springboot-vue

后端技术 SpinrgBoot的主要优点有&#xff1a; 1、为所有spring开发提供了一个更快、更广泛的入门体验&#xff1b; 2、零配置&#xff1b; 3、集成了大量常用的第三方库的配置&#xff1b; Maven: 项目管理和构建自动化工具&#xff0c;用于java项目。 java: 广泛使用的编程语…

阿里云服务器连接数详细说明

阿里云服务器“连接数”是什么意思&#xff1f;连接又称网络会话&#xff0c;是客户端与服务器建立连接并传输数据的过程。网络五元组&#xff08;包括源IP、目的IP、源端口、目的端口、协议&#xff09;唯一确定一个连接&#xff0c;ECS实例的连接数包括通过TCP、UDP、ICMP协议…

Vue之事件绑定(初识Vue事件)

目录 一、Vue事件绑定-介绍 1.概念 2.特点 3.好处 4.功能 5.应用 二、Vue事件绑定-使用 1.v-on 2.绑定事件的基本使用 3.绑定事件参数传递 4.绑定事件的修饰符 三、实例 1.增加计数器 2.删除列表项 四、总结 一、Vue事件绑定-介绍 Vue 的事件绑定是指通过 Vue …

python使用tkinter和ttkbootstrap制作UI界面(二)

这次讲解UI界面常用的主键&#xff0c;延续上文的框架进行编写&#xff0c;原界面如下&#xff1a; Combobox组件应用&#xff08;下拉框&#xff09; """Combobox组件"""global comvalue_operatorcomvalue_operator tk.StringVar()value_ope…

【论文阅读】用于遥感弱监督语义分割的对比标记和标签激活

【论文阅读】用于遥感弱监督语义分割的对比标记和标签激活 文章目录 【论文阅读】用于遥感弱监督语义分割的对比标记和标签激活一、介绍二、联系工作三、方法3.1 对比token学习模块&#xff08;CTLM&#xff09;3.2 Class token对比学习3.3 标签前景激活模块 四、实验结果 Cont…

【云计算】云数据中心网络(七):负载均衡

《云网络》系列&#xff0c;共包含以下文章&#xff1a; 云网络是未来的网络基础设施云网络产品体系概述云数据中心网络&#xff08;一&#xff09;&#xff1a;VPC云数据中心网络&#xff08;二&#xff09;&#xff1a;弹性公网 IP云数据中心网络&#xff08;三&#xff09;…

日常小bug

1.mybatis-config.xml中记载sql的映射文件的方式 <mappers><!-- 方法一&#xff1a;使用xml文件进行注册,注意&#xff1a;这里是斜线--><mapper resource"com/dao/UserMapper.xml"/><!-- 方法二&#xff1a;使用class进行注册&#xff0c;注…

C语言-单片机:STM32程序烧录的几种方法

STM32微控制器提供了多种程序烧录&#xff08;也称为编程或固件更新&#xff09;方式&#xff0c;这些方法允许用户将编译后的程序代码&#xff08;通常为HEX或BIN格式&#xff09;下载到MCU的闪存中。以下是几种常见的STM32程序烧录方式&#xff1a; ST-LINK&#xff1a; ST-L…

在Ubuntu 22.04上安装配置VNC实现可视化

前面安装的部分可以看我这篇文章 在Ubuntu 18.04上安装配置VNC实现Spinach测试可视化_ubuntu18开vnc-CSDN博客 命令差不多一样&#xff1a; sudo apt update sudo apt install xfce4 xfce4-goodies sudo apt install tightvncserver这个时候就可以启动server了 启动server&…

Linux RHCE练习之远程连接服务实战

Linux RHCE练习之远程连接服务实战 要求 主机一 主机名&#xff1a;server.example.comip: 172.25.254.100建立用户timinglee&#xff0c;其密码为timinglee 主机二 主机名&#xff1a;client.example.comip: 172.25.254.200 实现 主机一实现 [rootserver100 ~]# hostn…

C++:map和set的使用

一、关联式容器介绍 在学习map和set之前&#xff0c;我们接触到的容器有&#xff1a;vector、list、stack、queue、priority_queue、array&#xff0c;这些容器统称为序列式容器&#xff0c;因为其底层为线性序列的数据结构&#xff0c;里面存储的是元素本身。 关联式容器也是用…