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

作用域和闭包

函数声明和函数表达式：

fn();

function fn(){

//函数声明

}

fn1();

var fn1 = function(){

//函数表达式

}

var a = 100;

执行机制：执行之前会把变量提到前面undefined占位，即

var fn1;//undefined

var 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 20

function 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 的值