Web前端 JavaScript笔记7

最新推荐文章于 2024-06-27 07:56:26 发布
最新推荐文章于 2024-06-27 07:56:26 发布
阅读量1k 收藏 21
点赞数 8
文章标签： 前端 javascript 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cycyzh/article/details/137978558
版权

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>

 

...:...:...
关注
  • 8
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web前端javascript笔记——（15）定时器
JLY19970726的博客
01-24 1008
【代码】web前端javascript笔记——（15）定时器。
Web前端学习笔记
jusw123456的博客
10-19 2319
html css分别是指：1、超文本标记语言，html是一种标记语言，它包括一系列标签；2、层叠样式表，css是一种用来表现HTML或XML等文件样式的计算机语言，CSS能够对网页中元素位置的排版进行像素级精确控制。即为浏览器把代码解析后的样子就是我们看到的网站。HTML：结构CSS：样式一个网站是由N多个网页组成的。
web前端开发JavaScript笔记整理
weixin_64559564的博客
04-05 1349
JavaScript笔记 javascript笔记大全***JavaScript笔记***JavaScript如何使用？JS语法常见的关键字常见的数组API函数： JavaScript如何使用？ JavaScript如何使用？ 1:直接嵌入在元素事件中；如< div οnclick=“js部分代码”> 2：写在< script>< /script >标签中；在本标签中是不允许出现任何内容的； 3：写在外部的脚本文件中； 语法规范： 使用分号来结束；大小写敏感，英文标点符
Web前端开发学习笔记
qq_41622776的博客
02-02 1682
自学笔记，仅供参考
Web前端学习笔记（1）
maxiaoxiaohaohao的博客
10-19 3592
Web前端学习笔记（1）
Web前端JavaScript基础学习笔记
07-25
这个学习笔记是我基于B站视频Mosh的JavaScript基础篇学习记录的一些笔记和代码。 内容不多，也就作为一个大家学习的参考。 免费的笔记，如果你喜欢，请和大家分享这个资源，谢谢。 视频链接：...
Web前端JavaScript面向对象编程
09-27
这个笔记是我在B站根据Mosh的JavaScript面向对象编程教学视频中学习并记录的，里面有我记录的知识点，自己写的代码，还有小部分的截图。大家可以在学习这个内容的时候看一下我的笔记进行参考一下。 视频链接：...
前端JavaScript笔记整理
04-18
Web API：DOM操作、定时器、事件、回调函数、日期对象、节点操作、移动端事件、Windows对象、本地存储、正则表达式 JavaScript高级：作用域、函数进阶、解构赋值、构造函数、编程思想、原型、深浅拷贝、异常处理、...
（web前端学习笔记）JavaScript基础
01-08
JavaScript基础一、JS简介1、什么是JavaScript2、JavaScript的组成3、JavaScript的能力4、JavaScript的优点二、JS使用与输出1、JS使用1.1、 标签1.2、 或 中的 JavaScript1.3、外部脚本1.4、外部引用2、JS输出2.1、...
Web前端学习笔记：HTML5+CSS3+JavaScript.pdf
03-19
Web 前端学习笔记：HTML5+CSS3+JavaScript.pdf 本书资源摘要信息为 Web 前端学习笔记：HTML5+CSS3+JavaScript.pdf，是一本涵盖了 Web 前端开发所需的知识的书籍。本书共 3 篇，涵盖了 HTML5、CSS3 及 JavaScript 等...
日常工作记录目录
与海
06-21 682
EasyExcel实现二维码下载与展示
前端 CSS 经典：文字描边
weixin_64684095的博客
06-24 339
文字描边有两种实现方式。
SPECweb2009调优指南
developersupport的博客
06-25 791
 SPECweb2009 是衡量 Web 服务器性能和能效的标准化基准，可以对 Web 服务器的并发数进行性能测试，评测 Web 服务器能够支持的最大同时连接数的客户端/服务器（每秒能够响应的最大请求数）。为充分利用服务器性能，提升SPECweb2009测试结果，可通过增大系统进程数、优化服务器软件参数、绑核以及优化参数等。
风水研究会官网源码系统-可展示自己的领域内容-商品售卖等
haojiehero123的博客
06-23 387
整洁大气，非常漂亮，前端内容均可通过后台修改。
新交友盲盒+付费进群二合一源码+视频教程
最新发布
12年全栈程序开发
06-27 265
包括项目前端和后端的讲解、宝塔面板的安装教程，以及盲盒交友和付费进群二合一的搭建教程。无论你是技术小白还是有一定技术基础，都能轻松搭建出属于自己的盲盒交友平台。
Vue-列表渲染指令
Kevin7_35Durant的博客
06-23 533
比如我想再添加一个叫‘moli’的人，你会发现多选框自己给勾上了，并且‘zhangsan’没有被勾上了 ，这是因为vue默认li标签里的元素内容没有变化，只是添加了一个元素。语法：v-for="(参数1,可选参数1,可选参数2) in 数组名"这个时候key的作用就体现出来了，key的值必须要是唯一的关键字。这里面有一个小问题，就是当我勾选这个多选框时，再添加一个人。因为数组里面的id是唯一的，不重复，所以用这个值给key。此时，我们再添加‘moli’，就不会出现这个bug。
前端 JS 经典：变量交换
weixin_64684095的博客
06-27 316
let a = 5;let b = 6;b = a;a = temp;// 6 5。
vue3 Elementplus 动态路由菜单不跳转问题
qq_51355375的博客
06-23 515
vue3 Elementplus 使用component: () => import(`@/views/${item.componentPath}.vue`)加载动态路由菜单不跳转, 报错 Unknown variable dynamic import: ../views/system/user/index.vue at dynamic-import-
【项目实训】falsk后端连接数据库以及与前端vue进行通信
m0_63711281的博客
06-23 390
综上，我们实现了vue+flask+mysql的整体框架。根据不同的前端展示需求，编写不同的后端代码及sql查询即可。
web前端开发笔记vscode
10-26
Web前端开发笔记是一款VS Code插件，它提供了一些常用的Web前端开发知识点和技巧的笔记，包括HTML、CSS、JavaScript、React等。这个插件可以帮助开发者快速查找和学习Web前端开发的知识点，提高开发效率。 该插件的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值