您的位置:首页 > Web前端 > JavaScript

原生JS知识点--作用域和闭包

2018-03-07 11:02 239 查看
作用域和闭包函数声明和函数表达式:fn();function fn(){//函数声明}
fn1();var fn1 = function(){//函数表达式}var a = 100;执行机制:执行之前会把变量提到前面undefined占位,即var fn1;//undefinedvar a;//undefined;fn1();fn1 = function(){
}a = 100;全局作用域:console.log(a);var a = 100;
fn('zhangsan');function fn(name){console.log(name);}执行的时候:var a = undefined;console.log(a);a = 100;
function fn(name){console.log(name);}fn('zhangsan');函数作用域:fn('zhangsan');function fn(name){//this、arguments在函数执行之前就有确定的值了;console.log(this);console.log(arguments);
age = 20;console.log(name,age);var age
bar(100);function bar(num){console.log(num);}}
执行之前:function fn(name){var age;age = 20;console.log(name,age);function bar(num){console.log(num);}bar();}fn('zhangsan');执行上下文console.log(a);//undefined;var a = 100;fn('zhangsan');//zhangsan 20function fn(name){age = 20;console.log(name,age)var age;}范围:有一段<script>或者一个函数全局:变量定义、函数声明--一段<script>函数:变量定义、函数声明、this、arguments--一段函数PS:注意“函数声明”和“函数表达式”的区别
this:this要在执行时才能确认值,定义时无法确认var a = {name:'A';fn:function(){console.log(this.name);}}a.fn(); this === a;a.fn.call({name:'B'}); this === {name:'B'};var fn1 = a.fn;fn1(); this === window;执行场景:--作为构造函数执行,this指向空对象{},然后赋值,return--作为对象属性执行,this指向当前对象--作为普通函数执行,this指向window--call apply bind 改变this指向call({第一个参数是this的指向,之后的为函数的实参数})function fn1 (name,age){alert(name);console.log(this)}fn1.call({a:100},'zhangsan',20);fn1.apply({a:100},['zhangsan',20]);var fn2 = function (name,age){ //bind用在函数表达式里alert(name);console.log(this);}.bind({b:200});fn2('zhansan',20);作用域:没有块级作用域只有函数作用域和全局作用域作用域链:var a = 100;function fn(){var b = 200;
//当前作用域没有定义的变量---自由变量;console.log(a);//当前函数作用域(即函数声明的作用域)没有,向父级作用域找console.log(b);}闭包:闭包的使用场景:--函数作为返回值function f1(){var a = 100;return function(){console.log(a);//a自由变量,父作用域寻找}}var f = f1();var a = 100;f1(); //100--函数作为参数传递function fn1(){var a = 100;return function(){console.log(a);}}var f1 = fn1();function fn2(fn){var a = 200;fn();}fn2(f1);说一下对变量提升的理解:变量的定义、函数的声明(注意和函数表达式的区别)在执行之前提前说明this的几种不同的场景作为构造函数执行作为对象属性执行作为普通函数执行call apply bind 创建10个a标签,电极的时候弹出对应的序号//错误写法,弹出的一直是10;var i,a;for(i = 0;i < 10;i++){a = document.creatElement('a');a.innerHTML = i + '<br>';a.addEventListener('click',function(e){a.preventDefault();alert(i);//自由变量,去父作用域获取值(全局作用域);})document.body.appendchild(a);}
var i;for(i = 0;i < 10;i++){(function(i){//函数作用域var a = document.creatElement('a');a.innerHTML = i + '<br>';a.addEventListener('click',function(e){a.preventDefault();alert(i);})document.body.appendchild(a);})(i);}如何让理解作用域自由变量作用域链,即自由变量的查找闭包的两种场景实际开发中闭包的应用//闭包实际应用中主要用于封装,收敛权限function isFirstLoad(){var _list = [];return function(id){if(_list.indexOf(id) >=0){return false;}else{_list.push(id);retrun true;}}}var firstLoad = isFirstLoad();firstLoad(10);//true;firstLoad(10);//flase;firstLoad(20);//true;firstLoad(20);//false;//在isFirstLoad函数外面,根本不可能修改掉 _list 的值
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: