小程序编程第16课

拼搏现实的明天。 2023-02-28 04:22 74阅读 0赞

# 教程 #

战友们好，这节课我们讲作用域这个概念。

这个概念有点像能力圈，能力圈是我们每个人的能力范围。在能力圈内我们干任何事情都比较容易，但是在能力圈外我们就没辙了。

作用域的意思就是，在某个位置能够访问的变量集合。

我画了个图![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWw5OQ_size_16_color_FFFFFF_t_70]  
上面的A,B,C,D代表4个变量，在绿色圈内我们能访问的变量集合为：A,B,C,D

在红色圈内，我们能访问的变量为：B,C,D

在黄色圈内，我们能访问的变量为：C,D

D的位置不在任何圈内，D是全局变量，A,B,C都是局部变量

在JavaScript中，这些圈是什么呢？

这些圈可以由很多东西充当，可以是函数，for语句，while语句，if,else语句，甚至只是一对大括号

比如用函数充当

let D = 'D'
    function yellowFun(){ 
    	let C = 'C'
    	function redFun(){ 
    		let B = 'B'
    		function greenFun(){ 
    			let A = 'A'
    			console.log(A,B,C,D)
    		}
    		greenFun()
    		console.log(A,B,C,D)
    	}
    	redFun()
    	console.log(A,B,C,D)
    }
    yellowFun()
    console.log(A,B,C,D)

执行上面的代码会报错，错误的原因是第17行没有访问了没有定义的变量。

因为在第17行这个位置只能访问到D，就相当于在黄圈外只能访问到D

那第17行怎么改呢？

改成

console.log(D)

实际上这里不仅是17行错了，11行错了，14行也错了

你能试着改一下吗？

比如用for语句充当

for(let i = 0; i<5;i++){ 
    	for(let j = 0; j<5;j++){ 
    		console.log(i,j)
    	}
    	console.log(i) // 在这里只能访问i，不能访问j 你可以试试访问j，会报错
    }

我们还可以用一对大括号区分作用域

let a  = 'a'
    
    { 
    	let b = 'b'
    	console.log(a,b)
    }
    console.log(a,b)  // 这里会报错，因为不能访问b

还有一个值得注意的点是

在不同作用域内，可以定义相同变量名

if(3<10){ 
    	let a = 1
    	if(5 > 1){ 
    		let a = 2
    		console.log(a)  // 打印出2
    	}
    	console.log(a)  // 打印出1
    }

# 作业 #

作用域的概念就介绍到这，把之前做过的作业拿出来看看，标注一下有哪些圈，然后再试试，把变量放到不同的作用域里面，程序是否还正确

比如拿第11课的作业来看

calculate: function () { 
        let count = 0   
        for (let i = 1; i < 101; i++) { 
    	  // 这里能访问count变量和i变量
          if (i > 20 && i < 30 || i === 70 || i === 80) { 
          	// 这里也能访问count变量和i变量
            continue
          }
          count = i + count
          if (i === 90) { 
          	// 这里也能访问count变量和i变量
            break
          }
        }
        // 这里只能访问到count变量
        wx.showModal({ 
          title: count + '',
          showCancel: false
        })
      }
    // 如何检测能否访问某变量，打印出来即可，比如console.log(count)，如果不报错且打印出来的值，那么就是能访问

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWw5OQ_size_16_color_FFFFFF_t_70]: /images/20230209/16422362c40745d2a77dc959ac986440.png