JavaScript学习笔记（八）——作用域

最新推荐文章于 2024-08-22 14:32:34 发布
最新推荐文章于 2024-08-22 14:32:34 发布
阅读量83 收藏
点赞数 1
分类专栏： 笔记 文章标签： javascript 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56607109/article/details/125299559
版权

作用域

1.概述

作用域：标识符（变量和函数名）在哪些地方（函数的代码块内部和外部）能够被访问，哪些地方就是这个标识符的作用。

规则：函数内部的代码可以访问函数内部的标识符，也可以访问函数外部的标识符，但是反过来不行，也就是说外部不能访问函数内部的标识符。

//案例:
    var a = 200;
    function fn(a) {
    	//var a=90//210
    	function fm() {
    		console.log(a, 122)//210
    		a = 90
    		console.log(a, 123)//90
    	}
    	fm(a)//fm(210)
    	console.log(a, 124)//90
    }		
    fn(a+10)//fn(210)
    console.log(a, 125)//200

 //案例
    var total=0;
    function  increment () {
     var total=0
    	  total=total+2
    }
    function  decrease() {
    	  total=total-2
    }
    increment()
    increment()
    decrease()	  
    console.log(total)//0

//案例: 函数的调用是运行一次代码:每一次调用都会重新执行所有代码
    var total = 0;
    function increment() {
    	// var total = 0
    	total = total + 2
    	console.log(total)
    }
    increment()//{var total=0;  total = total + 2}
    increment()//{var total=0;  total = total + 2}
2.同名标识符提升问题

总结:每一个作用域在运行时,js引擎会先把作用域内部的关键字隐式提前扫描 并声明 。

var a = 10
    function fn() {
    	//隐式操作:把var 修饰的变量名提前声明
    	console.log(a)//声明了却没有赋值的变量undefined
    	a = 40//给隐式声明的变量赋初始化值
    	var a = 20//更新a的值 40==>20
    	console.log(a)//20
    }
    console.log(a)//10
    fn()//
    console.log(a)//10

  1. 变量函数同名时 变量然后函数

     console.log(a)
    var a=20
    function  a () {
    	console.log(100)
    }		
    console.log(a)


    /*
    1.
    var a
    function  a () {
    	console.log(100)
    }
     console.log(a)
     a=20
     console.log(a)
    */

  2. 变量变量同名时

    console.log(a)//unf
    var a=10;
    console.log(a)//10
    var a=20;		
    console.log(a)//20


/*
    1.var a;var a;
    2.console.log(a)//undef
    3.a=10;
    4.console.log(a)//10
    a=20;
    console.log(a)//20
    */

  3. 函数和函数同名时

      function fn () {
    	console.log(111)
    }
    function fn () {
    	console.log(2222)
    }			
    fn()

  4. 同名标识符提升顺序问题：记住四个字

    法则：形（形参和变量）实函运

    标识符有三种写法:
    var function function(a){}

        var a=20
    function fn(a){			
    	console.log(a,1)//函数
    	a=90
    	console.log(a,2)
    	var a=100
    	console.log(a,3)
    	function  a () {
    		console.log(6666)
    	}
    	console.log(a,4)			
    }
    fn(a)
    /*
    var a;
    a=20
     function  a () {
     	console.log(6666)
     }
     
    //打印函数
    a=90
    console.log(a,2)//打印90
     a=100
    console.log(a,3)//100
    console.log(a,4)	//100
    */

    这个流程就是:

    1.先隐式提升当前作用域内部的所有形参变量和局部变量 (只是声明提升,不提升赋值)

    2.再把实参赋值给形参变量

    3.然后执行函数的隐式提前声明

    4.再按照代码顺序运行代码

3.函数运行时的作用域

函数运行时 ,是在写函数代码的地方运行代码 , 不是在调用代码的地方运行代码。

function fn () {
        	var a=90
        	 function fm () {
        	 	console.log(a)
        	 }
        	 return fm//a//200
        }
        var a=100
        var re=fn()
        // console.log(re)
        re()//console.log(a)

function fn(a) {
        	function fm() {
        		a = a + 1
        		console.log(a)
        	}
        	return fm
        }
        var f1=fn(10)
        f1()
        f1()

    /*
        {
        	 var a=12
        	 return fm
        	 {
        		a = a + 1
        		console.log(a)//11 
        	 }
        	 {
        	 	a = a + 1
        	 	console.log(a)//12
        	 					 
        	 }
        }
         f1()==>fm()
    */

       function fn(a) {
        	function fm() {
        		a = a + 1
        		console.log(a)
        	}
        	return fm
        }
        var f1=fn(10)
        f1()			
        var f2=fn(10)
        f2()

        /*
         {
        	 var a=10
        	{	
        	a = a + 1
        	console.log(a)//11	
        	}
         }
         {
        	  var a=10
        	 {
        		 a = a + 1
        		 console.log(a)//11	
        	 } 
         }						
        */
4.js函数预编译

什么是预编译？

函数运行时，代码的运行步骤就是函数预编译。

js完成解释执行分为三个步骤：

​ 1.语法分析；

​ 2.预编译（全局预编译、函数预编译）；记住四个字：形（形参和变量）实函运；

​ 3.执行语句。

深度理解一下上面的第二步 预编译：

函数每调用一次，会生成一个新的对象，自调用且无终止条件的话生产无数个对象，浏览器就会瘫痪。

  1. 给这个AO对象添加成员，函数内部的局部变量和形参变量 名 作为AO对象的属性名。形参名和实参名冲突时，并不影响。
  2. 把传入的实参赋值给AO对象的属性；
  3. 把局部函数的名字 让AO对象也有相同的成员名，把函数赋值给这个属性；
  4. 运行代码。

全局作用域运行代码时，也有预编译。

  1. 生产一个对象 Global Object（GO）；
  2. 把所有的全局变量，设置为GO的属性名；
  3. 把所有函数名作为GO的程序名，把函数名赋值给这个成员；
  4. 看是不是浏览器环境中的js脚本，如果是浏览器，还会执行异步，GO给window对象共享成员；
  5. 运行代码。

全局预编译还有一步： 不同的环境中运行js代码不一样，GO的成员全部浅拷贝给环境对象window。node.js中没有这一步。

拓展知识：

关于访问成员，console.log(a)访问的时GO对象的成员。

console.log(window.a)；原型链中没找到的话不报错，浏览器返回undifined；但是作用域链中GO中找不到的话就会报错。

5.作用域链

执行期上下文：当函数执行时，会创建一个称为执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时的环境，函数每次执行时对应的执行上下文都是独一无二的，所以多次调用一个函数会导致创建多个执行上下文，当函数执行完毕，它所产生的执行上下文被 “销毁”。

js对象有两种成员：

  • 一种是上文成员（js语法可以访问的成员）；
  • 一种是下文成员（底层语言，只能看不能运用）。
  • [[]] 括起来的成员名 就是下文成员。
  • 例如：[[scope]]这个对象内部保存的就是函数的作用域。现在我们知道作用域就是一个对象，函数在定义或者申明的时候就有了作用域[[scope]]。里面保存了上文的AO对象。
function fn(n){
	var a=20;
    function fm(){
        
    }
}
fn(100);//AO{n:undifined==> 100, a:undif==>20,function fm(){}}

fn();//AO{n:undif,a:undif ==>20,function fm(){}}

function fn(n){
	var a=20;
    function fm(){
        
    }
}
fn(100);
fn(200);

函数生成了就会有个属性[[scope]]作用域“数组”（只能引擎使用）

函数调用时生成AO对象 ， 会把AO对象放在scope

每次调用都会放在scopes前面（顶部）

每个函数scopes数组中天生就有一个AO对象 就是这个函数的上层的AO

function fn(a){
    var a2=100;
    function fm(b){
        var b2=200;
    }
    fm(20);
}
fn(10);

分析上面这段代码的作用域链

如下：

	/*
			Go:{fn函数创建了 放在Go对象内部}
			
			fn.[scope]=[
				Go:{fn函数创建了 放在Go对象内部}
			]
			
			fn(10)=>
			fn.[scope]=[
				AO-fn(10):{
					a:10,
					a2:100,
					fm创建了					
				},
				Go:{fn函数创建了 放在Go对象内部}
			]
			
			
			fm.[scope]=[
				AO-fn(10):{
					a:10,
					a2:100,
					fm创建了					
				},
				Go:{fn函数创建了 放在Go对象内部}
			]
			fm(20)
			fm.[scope]=[
				AO-fn(10)-fm(20):{
					b:20,
					b2:200
					console.log(a,a2,b,b2,c)
				},
				AO-fn(10):{
					a:10,
					a2:100,
					fm创建了					
				},
				Go:{fn函数创建了 放在Go对象内部,c}
			]
			
			
			fm(90)
			fm.[scope]=[
				AO-fn(10)-fm(90):{
					b:90,
					b2:200
					console.log(a,a2,b,b2,c)
				},
				AO-fn(10):{
					a:10,
					a2:100,
					fm创建了					
				},
				Go:{fn函数创建了 放在Go对象内部}
			]
			*/

难题分析：

        function fun(n, o) {
            console.log(o);
            return {
                fun: function (m) {
                    return fun(m, n);
                }
            };
        }
        var a = fun(0);
        a.fun(1);
        a.fun(2);
        a.fun(3);
        var b = fun(0).fun(1).fun(2).fun(3);
        var c = fun(0).fun(1);
        c.fun(2);
        c.fun(3);js

结果：在这里插入图片描述

分析：

			/*
			Go:{fun函数创建了,a:und,b:und,c:und}			
			fun.[scope]=[				
				Go:{fun函数创建了,a:und,b:und,c:und}
			]
			
			//a = fun(0);
			fun.[scope]=[
				AO-fun(0):{
					n:0,
					o:und
					return {fun:function(m) {return fun(m, n)}}
				}, 
				Go:{fun函数创建了,a:und,b:und,c:und}
			]
			
			a.fun.[scope]=[
				AO-fun(0):{
					n:0,   
					o:und   //第一次打印undefined
					return {fun:function(m) {return fun(m, n)}}
				}, 
				Go:{fun函数创建了,a:und,b:und,c:und}
			]
            
			//a.fun(1);
			a.fun.[scope]=[
				AO-fun(0)-a.fun(1):{
					m:1
					return fun(1, 0)
				},
				AO-fun(0):{
					n:0,   
					o:und,
					return {fun:function(m) {return fun(m, n)}}
				}, 
				Go:{fun函数创建了,a:und,b:und,c:und}
			]
			fun.[scope]=[
				AO-fun(1, 0):{
					n:1,
					o:0,   //第二次打印0
					return {fun: function(m) {return fun(m, n)}}
				},
				Go:{fun函数创建了,a:und,b:und,c:und}
			]
				
				
			//a.fun(2)	
			a.fun.[scope]=[
				AO-fun(0)-a.fun(2):{
					m:2,
					return fun(2, 0);
				},
				AO-fun(0):{
					n:0,    
					o:und
					return {fun:function(m) {return fun(m, n)}}
				}, 
				Go:{fun函数创建了,a:und,b:und,c:und}
			]	
				
			fun(2, 0);
			fun.[scope]=[
				AO-fun(2,0):{
					n:2,
					o:0   //第三次打印0
					return {fun: function(m) {return fun(m, n)}};
				},
				Go:{fun函数创建了,a:und,b:und,c:und}
			]	
			a.fun(3)同理==>第四次打印0
				
			
			*/
			
			
			
		   /*
		    Go:{fun函数创建了,a:und,b:und,c:und}
		    fun.[scope]=[				
		    	Go:{fun函数创建了,a:und,b:und,c:und}
		    ] 
		    
			//var b = fun(0).fun(1).fun(2).fun(3);
            ==>
			fun(0)
			fun.[scope]=[
				AO-fun(0):{
					n:0,
					o:und
					return {fun: function(m) {return fun(m, n)}}
				},
				Go:{fun函数创建了,a:und,b:und,c:und}
			]
			  
			fun(0).fun.[scope]=[
				AO-fun(0):{
					n:0,
					o:und   //第五次打印undefined
					return {fun: function(m) {return fun(m, n)}}
				},
				Go:{fun函数创建了,a:und,b:und,c:und}
			]
		  fun(0).fun(1)
		   fun(0).fun.[scope]=[
			AO-fun(0)-fun(0).fun(1):{
				m:1
				return fun(1, 0);
			},   
		   	AO-fun(0):{
		   		n:0,
		   		o:und
		   		return {fun: function(m) {return fun(m, n)}}
		   	},
		   	Go:{fun函数创建了,a:und,b:und,c:und}
		   ]
		   
		
		   fun(1, 0)
		   fun.[scope]=[
			AO-fun(1, 0):{
				n:1,
				o:0,  //第五次打印0
				return {fun: function(m) {return fun(m, n)}}==>fun(0).fun(1)
			},
		   	Go:{fun函数创建了,a:und,b:und,c:und}
		   ]
			
		
		fun(0).fun(1).fun.[scope]=[
			AO-fun(0)-fun(0).fun(1):{
				m:1
				return fun(1, 0);
			},   
			AO-fun(0):{
				n:0,
				o:und
				return {fun: function(m) {return fun(m, n)}}
			},
			Go:{fun函数创建了,a:und,b:und,c:und}
		]
			
		fun(0).fun(1).fun.[scope]=[
			AO-fun(0).fun(1):{
				m:1
				return fun(1, 0);
			},
			AO-fun(0):{
				n:0,  
				o:und
				return {fun: function(m) {return fun(m, n)}}
			},
			Go:{fun函数创建了,a:und,b:und,c:und}
		]
		
		fun.[scope]=[
			AO-fun(1,0):{
				n:1
				o:0
				return {fun: function(m) {return fun(m, n)}}
			},
			Go:{fun函数创建了,a:und,b:und,c:und}
		]
		fun(0).fun(1).fun(2)
		[scope]=[
			AO-fun(0).fun(1).fun(2):{
				            m:2,
			                return fun(2,1)
				},	
			AO-fun(1,0):{
				n:1
				o:0
				return {fun: function(m) {return fun(m, n)}}
			},
			Go:{fun函数创建了,a:und,b:und,c:und}
		]
		fun(2,1)
		AO:{
			m:2
			o:1			
		}
小狐狸ya
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript学习笔记——作用域
403 Forbidden
09-03 161
作用域概念与分类 作用域指一个变量的作用范围。 作用域分两种： 全局作用域 函数作用域 全局作用域 直接在script标签中编写的JS代码都属于全局作用域 全局作用域在页面打开时创建，在页面关闭时销毁 在全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用 在全局作用域中： 创建的变量都会作为window对象的属性保存 创建的函数都会作为window对象的方法保存 全局作用域中的变量都是全局变量，在页面的任意的部分都可以访问 变量的声明提前（变量提升
JavaScript学习笔记——作用域、作用域链
qq_41591033的博客
11-07 190
深入学习作用域与作用域链，能帮我们更好的理解闭包。而学习作用域和作用域链前，我们先得掌握预编译中出现的执行期上下文 1. 执行期上下文 当函数执行时（或称前一刻），会创建一个称为执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时的环境，函数每次执行时对应的执行上下文都是独一无二的，所以多次调用一个函数会导致创建多个执行上下文，当函数执行完毕，它所产生的执行上下文被销毁。 2. 作用域 [...
js学习笔记44——作用域
weixin_45034895的博客
06-27 141
js学习笔记44——全局作用域全局作用域变量的声明提前变量函数函数作用域 作用域指一个变量作用的范围。 如下代码， <script> function fun(){ var a=1; } console.log(a); </script> 报错，因为，a是在函数里，作用域不在函数外。 js有两种作用域：全局作用域和函数作用域 全局作用域 直接编写在script标签中的代码。 在页面打开时创建，
JavaScript学习笔记三——作用域
wuyongde0922的专栏
06-12 597
每个写过程序的人都不会对作用域这个概念陌生，那在这篇文章中就来谈下Javascript的作用域。 　　在Javascript，全局环境本身就一个对象。在浏览器宿主中这个对象是window，而当Javascript用于其它非浏览器的宿主，如嵌入式的环境中，可能会是其它的对象。 　　在这里也纠正一个观念，有很多人都认为Javascript只在浏览器中使用，其实Javascript也能在很多非Web
JavaScript学习笔记1——JavaScript基础
qq_45569406的博客
08-19 497
JavaScript学习笔记1——JavaScript基础
JavaScript学习笔记——变量、作用域、var、const和let
甜甜的博客
01-12 1092
作用域：一个变量或者函数的有效作用范围。
你不知道的JavaScript学习笔记1——作用域
weixin_34267123的博客
07-18 76
处理程序三要素： 引擎：编译与执行过程。 编译器：语法分析与代码生成等。 作用域：收集并维护由所有声明的标识符（变量）组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限。   示例： var a=2;的解析过程： 1.编译器 询问 作用域 是否已经有该名称的变量 是：忽略该声明，继续执行； 否：声明一个新变量，命名为a;   2.编译器为引擎生成代码 引擎运行首先...
学习笔记——js中的作用域
qq_41339126的博客
04-20 93
理清js中作用域的概念及包含关系。为深度理解闭包等知识做铺垫。
JavaScript的执行机制——作用域链和闭包
2401_84152140的博客
05-05 552
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Javascript学习笔记3——作用域
weixin_33884611的博客
11-21 40
每个写过程序的人都不会对作用域这个概念陌生，那在这篇文章中就来谈下Javascript的作用域。 在Javascript，全局环境本身就一个对象。在浏览器宿主中这个对象是window，而当Javascript用于其它非浏览器的宿主，如嵌入式的环境中，可能会是其它的对象。 在这里也纠正一个观念，有很多人都认为Javascript只在浏览器中使用，其实Javascript也能...
web学习笔记 —— javascript基础
05-25
这篇“web学习笔记——javascript基础”将带你走进JavaScript的世界，理解其基本概念和常用语法。 JavaScript语法基础： 1. 变量：在JavaScript中，变量用于存储数据。声明变量使用`var`关键字，例如`var myVar = ...
JavaScript学习笔记
11-13
所有未声明作用域的变量都被视为全局变量，并成为`window`对象的属性。 ```javascript var objectA = { name: "myName" }; // 全局变量 alert(window.objectA.name); // 通过window对象访问 ``` 理解全局对象的...
Javascript学习笔记___自学实用
03-10
JavaScript学习笔记——深入理解基础与函数 在JavaScript中，学习基础知识是至关重要的，因为它是所有进一步编程技巧的基础。首先，我们需要了解JavaScript中的数据类型。在JavaScript中，有五种简单的数据类型：...
Javascript 读书笔记索引贴
10-29
3. **作用域**：JavaScript有两种作用域——全局作用域和局部作用域。变量的生命周期和可见性受其所在的作用域影响，理解这一点对于避免全局污染和提高代码可维护性至关重要。 4. **Eval函数**：eval()函数可以将...
javascript从入门到跑路—–小文的js学习笔记（7）——–js函数
01-08
javascript从入门到跑路—–小文的js学习笔记（1）———script、alert、document。write() 和 console.log 标签 … … javascript从入门到跑路—–小文的js学习笔记目录 ** 在说函数前，补充一个函数的作用域的知识...
2024前端面试题-js篇
FormAda的博客
08-22 814
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
vue开发引入第三方插件的方式及其区别
最新发布
你们瞎搞
08-22 364
npm。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 356
【代码】【js】各类前端输入校验方法。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 1002
用于在Vue应用程序或API路由中进行HTTP请求，详见。
JavaScript ES6 学习笔记：块级作用域、Promise、Class 等核心知识点
ES6 学习笔记 **块级绑定** 在 ES6 中，引入了块级绑定（Block Scope），解决了 var 声明变量的问题。块级绑定使得变量的作用域限定在当前块中，不会污染全局对象。 **变量声明** 在 ES6 中，引入了 let 和 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值