JavaScript学习笔记14

已于 2022-09-03 13:18:53 修改
阅读量241 收藏
点赞数
文章标签： javascript 学习 前端
于 2022-09-02 23:40:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/amy_cx/article/details/126670969
版权

一、改变this指向

        我们复习一下：

  • 全局定义的函数直接调用this，this指向window
  • 对象内部的方法调用，this指向调用者
  • 定时器的处理函数调用，this指向window
  • 事件处理函数，指向事件源
  • 自调用函数，指向window

        函数内部的 this 只和函数的调用方式有关系，和函数的定义方式没有关系。上面说的都是函数的基本调用方式里面的this指向，我们还有三个可以忽略函数本身的this指向转而指向别的地方，强行改变this指向的方法 -- call、apply、bind。

        1.call：附加在函数调用后面使用，可以忽略函数本身的this指向

  语法：函数名.call(this指向的新对象,参数1,参数2...)

             对象方法.call(this指向的新对象,参数1,参数2...)

        使用call方法时会立即执行函数，第一个参数是你要改变的函数内部的this指向，第二个参数开始，依次是向函数传递参数。

         2.apply：附加在函数调用后面使用，可以忽略函数本身的this指向

  语法：函数名.apply(this指向新对象,[参数])

             对象方法.apply(this指向新对象,[参数1,参数2...])

         使用apply方法时会立即执行函数，第一个参数是你要改变的函数内部的this指向，第二个参数是一个数组，数组里面的每一项依次是向函数传递参数。

         3.bind：附加在函数调用后面使用，可以忽略函数本身的this指向。和前两个有些不一样，就是不会立即执行函数，而是返回一个已经改变了this指向的新的函数。

  语法：var 新函数 = 函数名.bind(this指向新对象)

             var 新函数 = 对象方法.bind(this指向新对象)

             新函数(参数1,参数2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>改变this指向</title>
</head>
<body>
    <button>按钮</button>

    <script>
        var obj = {
            name:'jack'
        }

        var btn = document.querySelector('button')

        btn.addEventListener('click',function(){
            console.log('this -> ',this)
        })

        function fun(m,n){
            console.log('m ',m, ' n ',n);
            console.log('this -> ',this) // window -> obj
        }
        fun()
        fun.call(obj,10,20)
        fun.apply(obj,[10,20])
        var newFun = fun.bind(obj)
        newFun(10,20)
    </script>
</body>
</html>

        示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>充电宝</title>
</head>
<body>
    <script>
        var jackObj = {
            name:'jack', 
            phoneBattery:70, //手机电池电量
            //给手机充电
            change:function(batteryNum){
                this.phoneBattery = batteryNum
            },
        }
        var roseObj = {
            name:'rose',
            phoneBattery:10,
        }
        //rose想借用Jack的充电宝充电
        jackObj.change.call(roseObj,80)
        console.log('充电后电量',roseObj.phoneBattery)
    </script>
</body>
</html>

 二、ES6新特性

        JavaScript的标准——ECMAScript在不断发展，最新版ECMAScript 6标准（简称ES6）已经在2015年6月正式发布，ES6可以统称2015年后javascript所有最新版本。

1.let和const关键字

         我们以前都是使用 var 关键字来声明变量的，在 ES6 的时候，多了两个关键字 let 和 const，也是用来声明变量的。

        区别：

  • let 和 const 不允许重复声明变量，const声明的变量称为常量，必须赋值，且只能赋值一次
  • 没有变量提升（预解析）

  • let具有块作用域

 

         应用场景：

        1.考虑兼容问题，使用var

        2. 变量可以多次改变值，使用let

        3. 变量只赋值一次后，不再改变，使用const

2.箭头函数

        作用:简化函数(匿名函数)的书写

语法:

        ()=>{}

        function(){ }

        简写:

                1. 形参只有一个， 括号可以省略

                        (m)=>{} 可以写成 m => {}

                2. 函数体只有一行代码 大括号省略

                        () => {console.log('>>>')}

                        () => console.log('>>>')

                        ()=> {return 100}

                3.只有一行代码，并且代码是return语句，大括号和return都可省略

                        () => 100

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>箭头函数</title>
</head>
<body>
    <button>按钮</button>
    <script>
        const f1 = () => console.log('f1>>>>>')

        const f2 = () => 100

        let v = f2()
        console.log('v ', v)

        const getMax = m => {
            let n = 45
            var max = m
            if (n > max) {
                max = n
            }
            return max
        }
        let m = getMax(23)
        console.log('m ', m)

        const fun = function () {
            console.log('fun>>>>')
        }

        const fun1 = () => {
            //函数体
            console.log('fun111>>>>')
        }
        // fun1()

        const btn = document.querySelector('button')
        btn.addEventListener('click', () => {
            console.log('函数体代码')
        })

        const obj = {
            name: 'jack',
            say: () => {
                console.log('say>>>>')
            },
        }
        obj.say()
    </script>
</body>
</html>

         箭头函数this指向问题：

                1.在事件处理函数中this->事件源

                2.箭头函数中this指向 应用上下文中this对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>箭头函数this指向问题</title>
</head>
<body>
    <button>按钮</button>
    <script>
        const btn = document.querySelector('button')
        console.log('this -> ', this) // 应用上下文this对象

        function test1() {
            btn.addEventListener('click', () => {
                console.log('this -> ', this)
            })

            const obj = {
                name: 'jack',
                say: () => {
                    console.log('obj this -> ', this)
                },
            }
            obj.say()
        }

        btn.addEventListener('click', function () {
            console.log('this -> ', this) // 事件源btn

            // 对象方法中this所在的上下文环境 是 事件处理函数中
            const obj = {
                name: 'jack',
                say: () => {
                    console.log('obj this -> ', this) // 对象方法中this->当前对象
                },
            }
            obj.say()

        })
    </script>
</body>
</html>

        函数传递参数时的默认值：

                ES5--> m || m=100

                ES6--> function fun(m = 100){ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>默认值</title>
</head>
<body>
    <script>
        function fn(m) {
            m = m || 100
            console.log('m ', m)
        }
        // fn(200)

        function fun(m = 100) { // m = 200
            console.log('m :', m)
        }
        fun(200)
    </script>
</body>
</html>

3.解构赋值

        解构赋值就是快速从对象或者数组中取出成员的一个语法方式。

let {name,age} = obj

let [a,b,c] = arr

注：大括号中变量名必须与对象属性名相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>解构赋值</title>
</head>
<body>
    <script>
        function test2() {
            const arr = [1, 2, 3]

            // let a = arr[0]
            // let b = arr[1]
            // let c = arr[2]

            let [a, b, c] = arr // 数组解构赋值

            console.log('a :', a, ' b :', b, ' c :', c)
        }
        test2()
        function test1() {
            const obj = {
                name: 'jack',
                age: 18,
                score: 98,
                num: 1001,
            }

            // let name = obj.name // jack
            // let age = obj.age // age

            let { name, age, score, num } = obj // 解构对象赋值 给大括号中变量name和age

            console.log('name :', name, ' age :', age)
        }
    </script>
</body>
</html>

4.模板字符串

格式： `${}`

例：

        let str = `helloworld-${变量}`

5.展开运算符

        作用: 数组合并。

        运用：...需展开的名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>展开运算符</title>
</head>
<body>
    <script>
        function test1(){
            let arr = [1,2,3]
            console.log(...arr)
            let arr2 = [4,5]
            let arr3 = [...arr,...arr2]
            console.log(arr3) //Array(5) [ 1, 2, 3, 4, 5 ]
        }
        // test1()
        function test2(){
            let obj1 = {
                name:'jack',
                age:18
            }

            let obj2 = {
                ...obj1,
                gender:'女'
            }
            console.log('obj2 ',obj2) // {name: 'jack', age: 18, gender: '女'}
        }
        test2()
    </script>
</body>
</html>

6.对象字面量简写

        对象属性名和值变量名相同的，只写一个.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字面量简写</title>
</head>
<body>
    <script>
        let name = 'Jane'
        let age = 28

        // let obj = {
        //     name:name,
        //     age:age
        // }
        let obj = { name, age }

        console.log(obj) // {name: 'jane', age: 18}
    </script>    
</body>
</html>

三、购物车案例实现思路

        购物车2.0目标：数据操作 -  实现数据和界面分离

        + 商品列表 showProductList()

        + 添加商品

                - 添加商品表单界面  --> 动态获取商品数据

                - 构造商品对象

                - 添加商品对象到商品数组

Amy_cx
关注
javascript学习笔记
11-24
学习JavaScript时，了解这些基础知识是至关重要的。随着深入学习，你将接触到更高级的概念，如闭包、异步编程（回调函数、Promise、async/await）、模块系统以及现代框架如React、Vue和Angular的使用。JavaScript的...
JavaScript学习笔记
08-16
### JavaScript学习笔记精要 #### 一、JavaScript概述 JavaScript是一种重要的编程语言，在现代Web开发中扮演着不可或缺的角色。它最初由Netscape公司的Brendan Eich在1995年开发完成，并且最初的名字叫做...
使用addEventListener绑定事件并传参
longtengg1的博客
03-28 6753
1、问题的由来 使用addEventListener 绑定事件时，如果同时想传参，一般可使用匿名函数绑定事件。但是这样做的问题时，匿名函数将不能解绑事件。 所以如何做到又能传参，又能解绑事件呢？ 2、使用bind解决 var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); function fa(e) { console.log('传递参数',e)
前端 伪类元素如何添加点击事件
Kerwin__li的博客
02-20 3517
当我给盒子添加 点击事件的时候 他会事件冒泡到父元素上，所以 给父元素点击事件，那么红色的方块也会触发事件。这样就可以达到 让伪元素添加事件的效果了。思考：如何让 红色方块点击后会有事件？也可以避免组件冗余，添加类名即可。
使用addEventListener方法，监听按钮点击并弹窗
长风破浪会有时的博客
03-14 1222
使用addEventListener方法，监听按钮点击并弹窗
有趣的HTML实例（十五） 注册登录界面（css+js）
好好读书
03-01 1759
有趣的HTML实例（十五） 注册登录界面（css+js） 一款简单的 HTML+CSS+JS 咖啡选择（css+js） 实例 1、HTML 2、CSS 3、JS 4、舒适的画面感 5、注册登录界面
WEB API DOM-事件监听 事件类型 事件对象
weixin_68531033的博客
04-20 485
事件监听 用户做的动作为事件, 事件是在编程时系统内发生的动作或者发生的事情 事件源.addEventListener('事件类型', 要执行的函数) 事件监听三要素 事件源:事件在哪个元素身上,要获取dom元素 事件类型;用什么方式触发,比如click等 事件处理程序:要做什么事 <!DOCTYPE html> <html lang="en"> <head> <meta charset="...
【JS】addEventListener方法介绍
红尘道，红尘练心
09-07 6208
第三个参数useCapture：设置传递的类型，默认值为false，即冒泡传递（可省略）；使用 attachEvent 方法有个缺点，this 的值会变成 window 对象的引用而不是触发事件的元素。addEventListener()，事件监听，用于向指定的元素添加事件监听。在捕获中，外部元素的事件会被先触发，然后才会触发内部元素的事件。在冒泡中，内部元素的事件会先被触发，然后再触发外部元素；(它允许给一个事件注册多个监听器，且不会覆盖已存在的事件)事件的传递有两种方式：冒泡与捕获。
web前端学习（四十一）——JavaScript DOM EventListener（添加与移除监听事件）
★★光亭★★
02-22 1万+
web前端学习（四十一）——JavaScript DOM EventListener（添加与移除监听事件）
addEventListener( )-事件监听
chengyu12138的博客
10-01 1453
()方法，即为；且同一元素目标可重复添加，不会覆盖之前相同事件；可以使用removeEventListener()方法来移除事件的监听。对象.addEventListener('事件', 函数)例如当我点击按钮时：事件类型：1.鼠标事件：click 鼠标点击 mouseenter 鼠标经过 mouseleave 鼠标离开2.焦点事件 focus获得焦点 blur 失去焦点3.键盘触发：keydown 键盘按下触发 keyup键盘松开触发文本事件： input 用户输入事件。
JS中addEventListener的使用
u013773608的博客
11-20 881
触发事件,在子元素事件触发的时候,父元素的事件会在子元素事件触发完成之后触发,这便是事件冒泡
addEventListener方法
qq_65537235的博客
03-31 138
addEventListener（“事件类型例如click”，函数方法例如声明一个匿名函数）
addEventListener()方法中的参数，以及作用
最新发布
zhang20040217的博客
04-26 1134
方法还可以接收第三个参数，即一个布尔值，表示是否在捕获阶段处理事件。然而，大多数情况下，这个参数被设置为。方法是 JavaScript 中用于向指定元素添加事件监听器的方法。然而，这在实际开发中并不常见，因为大多数情况下，我们更关心冒泡阶段的事件处理。这个函数在按钮被点击时会被调用，并弹出一个警告框。在这个例子中，我们首先获取了一个按钮元素，然后定义了一个处理函数。如果你想在捕获阶段处理事件，你可以将第三个参数设置为。函数添加到按钮的 'click' 事件上。，表示在冒泡阶段处理事件。
addEventListener事件监听方式
CLhen的博客
06-30 1076
addEventListener事件监听方式
javaScript中addEventListener()用法
weixin_47464657的博客
09-12 1052
addEventListener() 方法用于向指定元素添加事件 测试 ``` document.querySelector('#test').addEventListener('click',()=>{ console.log('test click') },false) ``` document.addEventListener(event, function, useCapture) 第一个参数参数event 必须。字符串，指定事件名。 注意:  不要使用 “on” 前缀。 例如，使用 “
js按钮的click事件，给Input（submit）按钮添加事件监听addEventListener存在问题
weixin_45881103的博客
06-26 3595
一、提交按钮的点击事件 目的：html中表单按钮，想给提交按钮添加一个点击事件，当点击时实现相应函数功能。 存在问题：点击页面函数执行很快，结果不正确。如图： （1）、HTML部分代码 <form> <input type="submit" class="logbtn" value="Login" id="test"> </form> （2）、JavaScript部分代码 let test=document.getElementById('te
【js】addEventListener() 用法
热门推荐
kkkkkkkk的博客
06-24 1万+
  addEventListener() 方法用于向指定元素添加事件句柄。 addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。 你可以向一个元素添加多个事件句柄。 你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。 你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。 addEventLis...
JavaScript 的addEventListener() 事件监听详解！
一亩地的专栏
12-19 5819
JavaScript 的addEventListener() 事件监听详解！ addEventListener() 用于向指定元素添加事件。  可以向一个元素添加多次事件或者多次不同事件，后面的事件是不会覆盖前面的。 语法：  element.addEventListener(event,fn,useCaption );  参数说明：tr件，比如 click mouseenter mouselea...
addEventListener( ) 方法 -- 事件监听
m0_52545254的博客
07-11 6602
事件监听/捕获/冒泡
JavaScript学习笔记：从基础到DOM编程
"这是一份全面的JavaScript学习笔记，涵盖了从CSS样式表基础到JavaScript语法、DOM编程等多个方面，旨在帮助读者深入理解并掌握JavaScript语言。" 在这份笔记中，作者首先介绍了CSS样式表的基本概念，包括什么是CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值