您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

初识JS中的作用域和闭包

时间:2019-09-06 10:05:08  来源:  作者:

今天,我们来初步了解一下作用域和闭包的相关知识点,因为是初步了解,所有不会深入,不会太难,希望对大家有所帮助。

初识JS中的作用域和闭包

 

作用域是什么?

说白了,作用域就是一个代码区域,或者也可以理解成为一个运行环境。

JS中有两种作用域,全局作用域和函数作用域。

// window环境
var a = 123;
var b = 234;
var c = 456; 

//函数作用域

function A(){
 var a = 123;
 var b = 234;
 var c = 456; 
 } 
A();

全局作用域:直接在脚本中写代码,在全局作用域中声明得变量,会提升到脚本顶部,并成为window属性。(前几节中有涉及)

函数作用域:在函数中书写代码,声明的变量会提升到函数的顶部,不会成为全局属性,在函数内部声明的变量不会污染全局变量。

因此,在编程过程中,尽可能的将功能封装在函数中。

立即执行函数(IIFE)

当函数成为一个表达式的时候,既不会提升,也不会污染全局变量。

将函数变成表达式的方法之一,就是用小括号就函数包裹起来。代码如下:

( function 函数名(){
 函数体; 
 })

如此一来,这样的函数就无法通过函数名来调用了。

如果,函数作为表达式并且立即调用,这样的函数就被成为立即实行函数:

( function 函数名(){
 函数体; 
 })();

( function 函数名(){
 函数体; 
 }());

调用的小括号可以在里也可以在外。

由于大部分情况下,函数的函数名不起作用,因此,立即执行函数一般不书写函数名,没有函数名的函数,称之为匿名函数。

作用中可以使用的变量

在全局作用域下只能使用全局作用中声明的变量(包括函数)。

在函数作用域下,既可以使用函数作用域中声明的变量,也可以使用外部环境中声明的变量(包括函数)。

var a = 123;
console.log(a);打印出来123
function A(){
 console.log(a);//也可以打印出来123;
 var b = 234;
} 
A();
console.log(b);//这里会报错,因为b未定义。
初识JS中的作用域和闭包

 

内部变量和外部变量冲突的时候,使用内部变量,在内部没有的情况下,依次向外层环境中找。

内部可以使用外部,但外部不可能使用内部的(你的就是我的,我的还是我的)。

初探闭包

从严格意义上来讲,闭包是一种现象。

闭包就是内部函数可以使用外部函数环境中的变量。

天就讲到这里,关于闭包的知识,后期会进行详细的解说。



Tags:JS 作用域   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
今天,我们来初步了解一下作用域和闭包的相关知识点,因为是初步了解,所有不会深入,不会太难,希望对大家有所帮助。 作用域是什么?说白了,作用域就是一个代码区域,或者也可以理解成为...【详细内容】
2019-09-06  Tags: JS 作用域  点击:(173)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === 'a') { b = true} else { b = false}// goodb = a === 'a'2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(6)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(35)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(36)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(40)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== '') { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(51)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条