执行环境 & 作用域 & 闭包
来源:互联网 发布:人工智能 龙头 编辑:程序博客网 时间:2024/06/06 19:26
执行环境 & 作用域 & 闭包
执行环境 , 作用域 , 闭包 , 闭包应用
- 执行环境 作用域 闭包
- 执行环境
- 作用域链
- 闭包
- 广义上的闭包
- 狭义上的闭包
- 闭包的特点
- 闭包的应用
- 返回外部函数的局部变量
- 事件循环赋值问题
- 使用闭包封装对象
- 高阶函数
- arrprototypemap
- arrprototypereduce
- arrprototypefilter
执行环境
- 执行环境定义了 当前环境的 变量或函数 有权访问的其他数据,决定了它们各自的行为。我们无法访问到这个对象, 但是解析器可以
- 环境中定义的所有==变量和函数== 储存在与之相关的 ==变量对象==中,是如何存在的呢?看第三点
- 执行环境 里有一个与之关联的 变量对象
- 全局执行环境中的变量对象 : 在浏览器中 , window对象被认为是 全局执行环境 , 变量对象 就是window对象,所有的全局变量和函数都是作为window对象的属性和方法创建的(结合这个例子理解第一点, 因为里面存在, 所有有权访问)
#全局执行环境中定义的 变量 avar a = "shayu" # 成为了window对象中的 属性
函数 执行环境中的 变量对象 : 变量对象在函数中有另外一个名字==活动对象== , 活动对象是在函数调用时创建的一个内部变量;
每个函数都有自己的执行环境,当执行流进入一个函数时,函数的执行环境就会被推入一个执行环境栈中。而在函数执行之后,栈将执行结束的函数的执行环境弹出,把控制权返回给之前的执行环境。
作用域链
JS中什么都是对象,函数也不例外
作用域链是函数的一个属性 [[Scope]],这个属性就指向了这个函数的作用域链。
作用域链与一个执行环境相关,作用域链用于变量查找。
原型链是用于属性和方法的查找
内部函数可以访问外部函数的局部变量 , 即使外部函数已经执行结束
function foo() { let a = 20; function inner() { console.log(a); } return inner } let f = foo(); f() //内部函数可以访问外部函数的局部变量 , 即使外部函数已经执行结束 function foo() { let a = 20; function inner() { console.log(a); } a = 30; return inner } let f = foo(); f()
闭包
广义上的闭包:
只要有一个函数 , 访问了这个函数外的变量 , 那么这个函数就是闭包
狭义上的闭包:
如果一个函数,访问了他的==外部函数==的==局部变量,==那么这个函数就是一个闭包
var a = 10;function foo(){ var b = 20; (function (){ console.log(b) })()}
闭包的特点:
闭包可以访问它的外部函数作用域中的任何的变量 , 而且访问到的变量的值一定是最新的值;即使外部函数执行结束了,也能访问到外部函数的局部变量
var a = 10;function foo(){ var b = 20; (function (){ console.log(b) })() b = 30}
闭包的应用:
1. 返回外部函数的局部变量
2. 事件循环赋值问题
<button>按钮1</button><button>按钮2</button><button>按钮3</button>
var btns = document.querySelectorAll("button");for (var i = 0; i < btns.length; i++) { btns[i].onclick = function () { console.log(i); }}
问题 : 点击每个按钮都是返回3
原因 : 每个按钮访问的i都是最新的i,也就是循环执行完毕后,此时的i等于3
解决方案1:
闭包: 把内部返回函数封装进一个匿名函数中,匿名函数中的变量对象中存储着每一轮的
i
, 每次访问的也就是固定的i
了
var btns = document.querySelectorAll("button");for (var i = 0; i < btns.length; i++) { btns[i].onclick = (function (i) { return function () { console.log(i); } })(i)}
解决方案2 :
把要访问的值 , 存在一个不会被更改的地方
var btns = document.querySelectorAll("button"); for (var i = 0; i < btns.length; i++) { btns[i].index = i; btns[i].onclick = function () { console.log(this.index); } }
解决方案3:
var —> let
var btns = document.querySelectorAll("button"); //把var 改成 let-+ for (let i = 0; i < btns.length; i++) { btns[i].onclick = function () { console.log(i); } }
3. 使用闭包封装对象:
function foo() { var p = { name:"李四", age : 40 }; return { getName : function () { return p.name }, setName:function (value) { p.name = value; return p.name }, setAttr : function (key,value) { p[key] = value ; }, getAttr : function (key) { return p[key] } } } var p = foo(); console.log(p.setName("张三")); console.log(p.getName()); p.setAttr("sex","男") console.log(p.getAttr("sex"));
4. 高阶函数
如果一个函数接受一个或多个函数作为参数,或者可以返回一个函数,则这样的函数就叫高阶函数
常见高阶函数: setTimeout ,setInterval
map , reduce, filter
1. arr.prototype.map
map()
方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
//map var arr = [1,4,9] console.log(arr.map(function (x) { return x**2 } ));
参数:
callback
回调函数生成新数组元素的函数,使用三个参数:
currentValue:
:callback
的第一个参数,数组中正在处理的当前元素。index
:callback
的第二个参数,数组中正在处理的当前元素的索引。array
:callback
的第三个参数,map
方法被调用的数组。thisArg
可选的。执行
callback
函数时 使用的this
值。
返回值:
一个新数组,每个元素都是回调函数的结果。
2. arr.prototype.reduce
reduce()
方法是对数组中的每个元素开始执行给定函数 , 构建一个最终返回值
//reduce //求10的阶乘 let arr = new Array(10); arr.fill(10); let value = arr.reduce(function (a,value,index) { return a * (index+1) },1); console.log(value);
参数:
callback
回调函数 ; Function类型回调函数默认支持四个参数
prevuousValue
: 上一次执行callback的返回值;currentValue
: 数组中当前被处理的元素;index
: 当前被处理的元素的索引值;arry
:调用reduce()
方法的数组本身initualValue
: 初始值 ; 可选/任意类型;作为首次调用callback时的第一个参数;
3.arr.prototype.filter
filter()
方法对数组中的每一项元素执行给定函数,并返回一个由执行该函数时返回 true 的元素组成的新数组。
var arr1 = [1,1,3,3,41,41254,35213,33,33,14,56,7]; //filter 过滤 var a1 = arr1.filter(function (ele,index,arr1) { //函数里返回true的留下 return ele % 2 == 0; })
参数:
cellback
回调函数回调函数默认支持三个函数; 并且会返回一个布尔值;:
ele
: 遍历的数组元素index
: 元素对应的索引arr
: 数组的本身
thisArg
: 调用callback的this值
返回值:
filter()
方法的会返回一个Arry
类型的值 ;是由 每次执行callback
函数并且返回true
的元素组成的一个新数组;如果所有元素都是返回false
;则返回空数组[ ]
- 闭包、执行环境、作用域链
- 作用域、执行环境、闭包
- 执行环境 & 作用域 & 闭包
- JavaScript > 执行环境、作用域链、闭包
- 执行环境 作用域
- 深入Javascript函数与闭包(执行环境、变量对象与作用域链)详解
- 深入Javascript函数与闭包(执行环境、变量对象与作用域链)使用详解
- 初识JavaScript的执行环境、作用域链、函数和闭包
- 执行环境及作用域
- 执行环境及作用域
- 执行环境及作用域
- 执行环境及作用域
- 执行环境及作用域
- 执行环境、作用域链
- 执行环境与作用域
- 执行环境及作用域
- 作用域=执行环境
- 执行环境及作用域
- html定义列表
- 高德地图实现定位
- React-Native中导航组件react-navigation的使用
- GPIO操作
- html的class和id
- 执行环境 & 作用域 & 闭包
- 自定义控件之 PasswordEditText(密码输入框)
- C/C++中volatile关键字详解
- 跨越编程语言界限(一)
- MyEclipse中将普通Java项目convert(转化)为Maven项目
- Constraint must contain a first layout item
- 洛谷P1330封锁阳光大学
- Mac问题汇总
- python学习(十一)----数据加载相关函数