javaScript快速入门之作用域

作用域(scope)

  • 作用域指一个变量的作用范围

  • function fun(){
    	var a = 12;
    }
    console.log(a); // 无法查询到
    

全局作用域

  • 直接编写在script标签中的代码,都在全局作用域

  • 全局作用域在页面打开时创建,在页面关闭是销毁

  • 在全局作用域中有一个全局对象 window ,可以直接使用

    – 代表一个浏览器的窗口,由浏览器直接使用‘

    console.log(window); // object
    
  • 在全局作用域中,都会作为window的对象保存

     var a = 10; // window对象的属性
     alert(window.a);
    
  • 创建的函数都会作为window对象的方法保存

变量的声明提前

  • 使用var关键字声明的变量,会在所有的代码执行之前被声明(不会赋值)
  • 如果声明变量不使用var,则变量不会被声明提前
console.log(a);
var a = 123;

函数的声明提前

  • 使用函数声明创建 function 函数(){},会在所有代码执行之前就被创建

  • 可以在声明前调用函数

  • 使用函数表达式创建的函数,不能被声明提前

  • fun(); // 函数声明,会被提前创建
    function fun(){
    	console.log('1');
    }
    
    var fun2 = function(){  // 必须要等到这一行,函数才会赋值给变量
    	console.log('2'';)   // 不能在代码之前被创建
    }
    

函数作用域

  • 调用函数时创建函数作用域,函数执行完毕,函数作用域销毁

  • 每调用一次函数就会创建一个新的函数作用域,互相独立

  • 函数作用可以访问全局作用域,全局无法访问到局部

  • 当在函数作用域中操作一个变量,先在自身作用域查找,没有,往上面查找,如果找不到,会出现报错

  • 在函数中不使用var声明的变量都会成为全局变量

  • var a = 10;
    function fun(){
    	var a = '20';
    	function fun2(){
    		console.log(a);   // 20
    		console.log(window.a); // 10
    	}
    }
    
    var a = 20;
    function fun2(){
    	console.log(a);
    	var a = 10;   // undefined 声明提前了
    }
    相当于
    
    var a = 20;
    function fun2(){
    	var a;
    	console.log(a);
    	a = 10;
    }	
    	
    var a = 20;
    function fun2(){
    	console.log(a);  // 20
    }
    
    
    var c = 10;
    function fun2(){
    	console.log(c); // 没有声明变量往上一级去找
        c = 20;  // 从上到下执行代码,然后改变c的值
        a = 100; // 相当与 window.a
    }
    
    fun2(); // 10
    console.log(c); // 20
    console.log(a); // 100
    
    
    // 定义形参就相当于在函数作用域中声明了变量
    var a = 20;
    function fun(e){
    	alert(e);
    }
    fun(); // undefined
    fun(20); // 20
    

巩固题

var a = 10;
function fun(){
	alert(a);
}
fun();   // 10
---------------------
var a = 10;
function fun(){
	alert(a);
	var a = 20;
}
fun();  // undefined
alert(a);10
---------------------
var a = 10;
function fun(a){
	alert(a);
	a = 20;
}
fun(); // undefined
alert(a); // 10   因为函数定义了形参 var a; alert(a);  a = 20;
---------------------
var a = 10;
function fun(a){
	alert(a);
	a = 20;
}
fun(10); // 10
alert(a); // 10
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript是一种动态编程语言,主要用于在Web浏览器中创建动态效果和交互式用户界面。下面是一些快速入门的步骤: 1. 了解基础语法。JavaScript有自己的语法,包括变量声明、条件语句、循环语句、函数等。可以在网上找到许多JavaScript语法的教程和指南。 2. 编写第一个JavaScript程序。可以在HTML页面中添加<script>标签,然后在其中编写JavaScript代码。例如: ``` <script> alert("Hello, world!"); </script> ``` 这将在页面加载时显示一个警告框,其中包含“Hello, world!”文本。 3. 学习如何处理事件。JavaScript可以用来处理不同类型的事件,例如用户单击按钮或提交表单。可以使用addEventListener()函数来添加事件处理程序。例如: ``` <button id="myButton">Click me!</button> <script> var button = document.getElementById("myButton"); button.addEventListener("click", function() { alert("Button clicked!"); }); </script> ``` 这将在用户单击按钮时显示一个警告框,其中包含“Button clicked!”文本。 4. 学习如何操作HTML元素。JavaScript可以用来修改HTML元素的内容、样式和属性。例如: ``` <p id="myParagraph">This is a paragraph.</p> <script> var paragraph = document.getElementById("myParagraph"); paragraph.innerHTML = "This is a new paragraph."; paragraph.style.color = "red"; paragraph.setAttribute("title", "This is a tooltip."); </script> ``` 这将将段落元素的文本内容更改为“This is a new paragraph.”,将其文本颜色更改为红色,并添加一个工具提示。 以上就是JavaScript快速入门步骤。可以通过查找更多教程和示例来深入了解JavaScript的功能和用法。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值