2023年web前端开发之JavaScript进阶(一)详细 |
您所在的位置：网站首页 › js重点是什么 › 2023年web前端开发之JavaScript进阶(一)详细 |
2023年web前端开发之JavaScript进阶(一)详细
|
接上篇博客进行学习,通俗易懂,详细 博客地址: 2023年web前端开发之JavaScript基础(五)基础完结_努力的小周同学的博客-CSDN博客 学习内容 学习作用域、变量提升、闭包等语言特征，加深对 JavaScript 的理解，掌握变量赋值、函数声明的简洁语法，降低代码的冗余度。 理解作用域对程序执行的影响能够分析程序执行的作用域范围理解闭包本质，利用闭包创建隔离作用域 (重要)了解什么变量提升及函数提升掌握箭头函数、解析剩余参数等简洁语法 ( 重点 ) 一.作用域 了解作用域对程序执行的影响及作用域链的查找机制，使用闭包函数创建隔离作用域避免全局变量污染。作用域(scope) 规定了变量能够被访问的"范围" 离开这个"范围" 变量便不能被访问 作用域分为 全局作用域 和 局部作用域. 1.1局部作用域局部作用域分为函数作用域和块作用域. 1.2函数作用域在函数内部声明的变量只能在函数内部被访问,外部无法直接访问 Document //声明conunter 函数 function conunter(x,y){ //函数内部声明的变量 const s = x + y console.log(s) // 输出18 } //调用counter 函数 conunter(10,8) // 传入实参 //直接在外部访问 函数内部的变量s console.log(s) // 报错总结： 函数内部声明的变量，在函数外部无法被访问函数的参数也是函数内部的局部变量不同函数内部声明的变量无法互相访问函数执行完毕后，函数内部的变量实际被清空了 1.3 块作用域在 JavaScript 中使用 {} 包裹的代码称为代码块，代码块内部声明的变量外部将【有可能】无法被访问。 代码实现效果如下: Document //代码块 { //内部声明变量 let age = 12 console.log(age) //12 } //代码块外部使用 变量age console.log(age) // 报错 let flag = true if(flag){ //str 只能在该代码块中被访问 let str = "代码块内部" console.log(str) // 正常输出 代码块内部 } //外部访问str 变量 console.log(str) //报错 for(let t = 1; t { // console.log(123) // } // fn() // const fn = (x) => { // console.log(x) // } // fn(1) // 2. 只有一个形参的时候，可以省略小括号 // const fn = x => { // console.log(x) // } // fn(1) // // 3. 只有一行代码的时候，我们可以省略大括号 // const fn = x => console.log(x) // fn(1) // 4. 只有一行代码的时候，可以省略return // const fn = x => x + x // console.log(fn(1)) // 5. 箭头函数可以直接返回一个对象 // const fn = (uname) => ({ uname: uname }) // console.log(fn('刘德华'))总结: 箭头函数属于表达式函数,因此不存在函数提升箭头函数只有一个参数时可以省略圆括号 ( )
代码如下: // const fn = function () { // console.log(123) // } // 1. 箭头函数 基本语法 // const fn = () => { // console.log(123) // } // fn() // const fn = (x) => { // console.log(x) // } // fn(1) // 2. 只有一个形参的时候，可以省略小括号 // const fn = x => { // console.log(x) // } // fn(1) // // 3. 只有一行代码的时候，我们可以省略大括号 // const fn = x => console.log(x) // fn(1) // 4. 只有一行代码的时候，可以省略return // const fn = x => x + x // console.log(fn(1)) // 5. 箭头函数可以直接返回一个对象 // const fn = (uname) => ({ uname: uname }) // console.log(fn('刘德华'))3.2箭头函数参数 箭头函数中没有 arguments，只能使用 ... 动态获取实参 // 1. 利用箭头函数来求和 const getSum = (...arr) => { let sum = 0 for (let i = 0; i < arr.length; i++) { sum += arr[i] } return sum } const result = getSum(2, 3, 4) console.log(result) // 93.3箭头函数 this 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。 // 以前this的指向： 谁调用的这个函数，this 就指向谁 // console.log(this) // window // // 普通函数 // function fn() { // console.log(this) // window // } // window.fn() // // 对象方法里面的this // const obj = { // name: 'andy', // sayHi: function () { // console.log(this) // obj // } // } // obj.sayHi() // 2. 箭头函数的this 是上一层作用域的this 指向 // const fn = () => { // console.log(this) // window // } // fn() // 对象方法箭头函数 this // const obj = { // uname: 'pink老师', // sayHi: () => { // console.log(this) // this 指向谁？ window // } // } // obj.sayHi() const obj = { uname: 'pink老师', sayHi: function () { console.log(this) // obj let i = 10 const count = () => { console.log(this) // obj } count() } } obj.sayHi()
箭头函数不会创建自己的this ,他只会从自己的作用域链的上一层沿用this |
【本文地址】