JS基础知识（中）

执行上下文

console.log(a);  //undefined
var a = 100;

fn('zhangsan');  // zhangsan,20
function fn(name){
  age = 20;
  console.log(name,age);
  var age;
}

在执行上述代码的时候，其实会先执行以下的代码

var a;
function fn(name){
  var age;
  // 同时拿到 this、arguments
}

为了代码可读性，都是要先定义后执行的，这也就是老生常谈的 变量提升

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

function Foo(name){
  // this={};
  this.name = name;
  // return this;
}
var f = new Foo('zhangsan');

var obj ={
  name:'A',
  printName:function(){
    console.log(this.name);
  }
}
obj.printName();  // 'A'

function fn(){
  console.log(this)  // this === window
}
fn();

// call apply bind
function fn1(name){
  alert(name);
  console.log(this);
}
fn.call({x:100},'zhangsan');  // this === {x:100}

var fn2 = function (name){
  alert(name);
  console.log(this);   // this === {y:200}
}.bind({y:200});

作用域

if (true){
  var name = 'zhangsan';
}
console.log(name); //zhangsan

if (true){
  let age = 20;
}
console.log(age); //undefined

var a = 100;
function fn(){
  var a = 200;
  cosnole.log('fn',a);
}
console.log('global',a); // 100
fn(); // 200

作用域链

var a = 100
function fn1(){
  var b = 200;
  function fn2(){
     // 当前作用域没有定义的变量，即“自由变量”，会到上一级作用域去寻找
    console.log(a);
    console.log(b);
  }
 fn2();
}
fn1();

闭包

function F1(){
  var a = 100;
  // 返回一个函数（函数作为一个返回值）
  return function(){  
    // 一个函数的作用域，在于它定义的时候所处的作用域，而不是在它执行所处的作用域中
    console.log(a);  // 自由变量，会从父级作用域中寻找
  }
}
var f1 = F1();

var a = 200;
f1(); // 100

function F2(fn){
  var a = 300;  // 完全不会影响 fn() 里的内容
  fn();
}
F2(f1);  // 100

关键

一个函数的作用域，在于它定义的时候所处的作用域，而不是在它执行所处的作用域中

实际开发中闭包的应用

主要用于封装变量、收敛权限

function isFirstLoad(){
  var _list = [];
  return function(id){
    if(_list.indexOf(id) >= 0){
      return false;
    }else{
      _list.push(id);
      return true;
    }
  }
}
var firstLoad = isFirstLoad();
firstLoad(10);  // true
firstLoad(10);  // false
firstLoad(20);  // true

用 JS 创建 10 个 a 标签，点击的时候弹出来对应的序号

var i,a;
for(i = 0; i < 10; i++){
  (function(i){
    a = document.createElement('a');
    a.innerHTML = i + '<br/>';
    a.addEventListener('click',function(e){
      e.preventDefault();
      alert(i);
    })
     document.body.appendChild(a);
  })(i)
}

var a;
for(let i = 0; i < 10; i++){
    a = document.createElement('a');
    a.innerHTML = i + '<br/>';
    a.addEventListener('click',function(e){
      e.preventDefault();
      alert(i);
    })
  document.body.appendChild(a);
}