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=name
    animal.age=age
    animal.action=action
    animal.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=name
    this.age=age
    this.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=a
        a2.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=name
    this.age=age
    this.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=name
    this.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=name
    this.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=name
  this.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=name
    this.age=age
    this.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=5
       let 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>

 

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

17.Nacos与Eureka区别

17.Nacos与Eureka区别

Nacos会将服务的提供者分为临时实例和非临时实例。默认为临时实例。 临时实例跟eureka一样&#xff0c;会向注册中心报告心跳监测自己是否还活着。如果不正常了nacos会剔除临时实例。&#xff08;捡来的孩子&#xff09; 非临时实例&#xff0c;nacos会主动询问服务提供者是否…
阅读更多...
【YOLOv8改进[注意力]】YOLOv8添加DAT(Vision Transformer with Deformable Attention)助力涨点

【YOLOv8改进[注意力]】YOLOv8添加DAT(Vision Transformer with Deformable Attention)助力涨点

目录 一 DAT 二 YOLOv8添加DAT助力涨点 1 总体修改 2 配置文件 3 训练 其他 一 DAT 官方论文地址&#xff1a;https://openaccess.thecvf.com/content/CVPR2022/papers/Xia_Vision_Transformer_With_Deformable_Attention_CVPR_2022_paper.pdf Transformers最近在各种视…
阅读更多...
BBS前后端混合项目--01

BBS前后端混合项目--01

总路由 # urls.py """BBS1 URL ConfigurationThe urlpatterns list routes URLs to views. For more information please see:https://docs.djangoproject.com/en/3.2/topics/http/urls/ Examples: Function views1. Add an import: from my_app import views2…
阅读更多...
上网行为管理软件有哪些？三款常用上网行为管理软件评测

上网行为管理软件有哪些？三款常用上网行为管理软件评测

互联网的普及&#xff0c;企业和个人对于网络安全和信息保护的需求越来越高。为了确保网络环境的安全和稳定&#xff0c;上网行为管理软件应运而生。本文将对三款常用的上网行为管理软件进行评测&#xff0c;分别是域智盾、Splunk Enterprise Security和安企神。 1、域智盾 域…
阅读更多...
什么是正向代理和反向代理

什么是正向代理和反向代理

正向代理和反向代理是两种不同的代理服务器配置方式&#xff0c;它们在代理的方向和作用上有所不同。 一、正向代理&#xff08;Forward Proxy&#xff09; 代表客户端发送请求到其他服务器的代理服务器。客户端将请求发送给正向代理服务器&#xff0c;然后由正向代理服务器代…
阅读更多...
Facebook的区块链应用深度分析

Facebook的区块链应用深度分析

去中心化身份验证的意义 在当今数字化社会中&#xff0c;身份验证的重要性不言而喻。对于Facebook这样的大型社交媒体平台来说&#xff0c;确保用户的身份真实性和数据的安全性是至关重要的。传统的中心化身份验证方式存在一定的安全风险和可信性问题&#xff0c;而去中心化身…
阅读更多...
Midjourney是什么？Midjourney怎么用？怎么注册Midjourney账号？国内怎么使用Midjourney？多人合租Midjourney拼车

Midjourney是什么？Midjourney怎么用？怎么注册Midjourney账号？国内怎么使用Midjourney？多人合租Midjourney拼车

Midjourney是什么 OpenAI发布的ChatGPT4引领了聊天机器人的竞争浪潮&#xff0c;随后谷歌推出了自己的AI聊天机器人Bard&#xff0c;紧接着微软推出了Bing Chat&#xff0c;百度也推出了文心一言&#xff0c;这些聊天机器人的推出&#xff0c;标志着对话式AI技术已经达到了一个…
阅读更多...
windows系统下python解释器安装

windows系统下python解释器安装

一. 简介 本文简单学习一下python开发学习中&#xff0c;所使用到的 python解释器的下载安装。后面再学习下载安装python的 IDE开发工具&#xff0c;这里要安装的python的 IDE开发工具为 PyCharm。 二. Windows系统下python解释器与IDE开发工具下载安装 1. python解释器下载…
阅读更多...
大型集团企业 怎么实现多区域文件交换？

大型集团企业 怎么实现多区域文件交换？

很多大型集团企业&#xff0c;都会在全国各地&#xff0c;甚至海外&#xff0c;都设立分支机构&#xff0c;还有银行、邮政这类机构&#xff0c;都会在全国各地设立多个支行和网点&#xff0c;所以在日常经营过程中&#xff0c;都会存在多区域文件交换的场景。 大型集团企业在进…
阅读更多...
嵌入式Linux八股（三）——计算机基础

嵌入式Linux八股（三）——计算机基础

三、计算机基础 01.操作系统 01.进程几种状态 02.锁 互斥锁&#xff1a;互斥锁是一种用于线程同步的工具&#xff0c;能够保证同一时刻只有一个线程可以访问共享资源。如果一个线程已经取得了互斥锁&#xff0c;其他尝试获得该锁的线程将会被阻塞&#xff0c;直到第一个线程…
阅读更多...
Spring与SpringBoot在配置读取方式上的区别

Spring与SpringBoot在配置读取方式上的区别

1. 问题说明 将Springboot项目中自定义的一个扩展工具类移植到Spring框架项目中的时候发现一个问题。在springboot中application.yml中的配置内容可以从Environment中获取&#xff0c;但是在spring中context:placeholder对应的配置文件中的配置却无法从Environment中获取。为了…
阅读更多...
Power BI 如何创建页面导航器？（添加目录按钮/切换页面按钮）

Power BI 如何创建页面导航器？（添加目录按钮/切换页面按钮）

Power BI 中页导航是什么&#xff1f; 在Power BI中&#xff0c;页导航&#xff08;Page Navigation&#xff09;是指在报告中创建多个页面&#xff08;页&#xff09;&#xff0c;然后允许用户在这些页面之间进行导航的功能。 如下图所示&#xff0c;页导航的选项和报告中的…
阅读更多...
每日两题 / 438. 找到字符串中所有字母异位词 238. 除自身以外数组的乘积（LeetCode热题100）

每日两题 / 438. 找到字符串中所有字母异位词 238. 除自身以外数组的乘积（LeetCode热题100）

438. 找到字符串中所有字母异位词 - 力扣&#xff08;LeetCode&#xff09; 记录p串每个字符出现次数 维护与p串等长的滑动窗口&#xff0c;记录其中每个字符的出现次数 每次滑动后将当前次数与p串的次数比较即可 class Solution { public:vector<int> findAnagrams(s…
阅读更多...
软件项目经理需要具备这 11 个能力

软件项目经理需要具备这 11 个能力

当前软件开发技术更新换代越来越快&#xff0c;各种项目实施管理思想也日新月异&#xff0c;作为一个软件项目经理&#xff0c;需要具备这 11 种能力&#xff1a; 1. 项目管理能力 了解项目管理的基本原则和方法&#xff0c;包括制定项目计划、资源分配、风险管理、问题解决和…
阅读更多...
JAVA：Kettle 强大的开源ETL工具

JAVA：Kettle 强大的开源ETL工具

请关注微信公众号&#xff1a;拾荒的小海螺 1、简述 Kettle&#xff08;Pentaho Data Integration&#xff09;&#xff1a;强大的开源ETL工具Kettle&#xff0c;又称作Pentaho Data Integration&#xff0c;是一款流行的开源ETL&#xff08;Extract, Transform, Load&#x…
阅读更多...
【Unity实战】值得关注的Addressable新特性

【Unity实战】值得关注的Addressable新特性

如果您是最近起的Unity项目且有用到Addressable作为内容管理&#xff0c;你可能需要注意一下1.21.15版本的变化&#xff1a; [1.21.15] - 2023-08-03 Fixed an issue where using binary catalogs causes a crash on Android with ARM7.DownloadDepedenciesAsync no longer l…
阅读更多...
基于RT-Thread的智能家居助手

基于RT-Thread的智能家居助手

一、项目简介 智能家居助手主要基于RT-Thread开发的&#xff0c;该系统主要分为语音子系统&#xff0c;环境监测子系统&#xff0c;智能控制子系统&#xff0c;智能网关子系统&#xff0c;音乐播放器&#xff0c;云端以及应用软件七大部分。语音子系统可通过语音进行人机交互来…
阅读更多...
Spring是如何解决循环依赖的

Spring是如何解决循环依赖的

简介 所谓循环依赖指的是&#xff1a;BeanA对象的创建依赖于BeanB&#xff0c;BeanB对象的创建也依赖于BeanA&#xff0c;这就造成了死循环&#xff0c;如果不做处理的话势必会造成栈溢出。Spring通过提前曝光机制&#xff0c;利用三级缓存解决循环依赖问题。 变量描述single…
阅读更多...
[lesson49]多态的概念和意义

[lesson49]多态的概念和意义

多态的概念和意义 函数重写回顾 父类中被重写的函数依然会继承给子类 子类中重写的函数将覆盖父类中的函数 通过作用域分辨符(::)访问父类中的同名成员 多态的概念和意义 面向对象中期望的行为 根据实际的对象类型判断如何调用重写函数父类指针(引用)指向 父类对象则调用…
阅读更多...
CentOS配置JDK8环境并安装配置neo4j

CentOS配置JDK8环境并安装配置neo4j

1. 工具安装 1. 安装wget yum install -y wget2. 安装vim yum install -y vim-enhanced2. 配置JDK 1. 安装JDK 先到官网下载jdk8的压缩包&#xff0c;点我传送&#xff0c;并将压缩包上传到虚拟机的/usr/local目录下。 cd /usr/local # 进入 /usr/local目录 tar -zxvf jdk-…
阅读更多...
最新文章

Copyright @ 2022~2023