JavaScript 作用域、闭包、上下文、this

作用域

某个变量或函数的可访问范围

全局作用域

在任何地方都能访问到

拥有全局作用域的对象：

• 定义在最外层的变量
• 全局对象的属性
• 隐式定义的变量

局部作用域

通过函数定义，只在函数内部可见

闭包

定义在一个函数中的函数

function f1(){
    var n=999;
　　nAdd=function(){n+=1}

　　function f2(){//闭包
　　　　alert(n);
　　}
　　return f2;
}

var result=f1();
result(); // 999
nAdd();
result(); // 1000

f1是f2的父函数，而f2被给了全局变量result，导致f2在内存中始终存在，而f2又依赖于f1，因此f1也在内存中始终存在，不会被垃圾回收机制回收

var a = b + c
;(function($){
    ...do something
})(jQuery)

// 第2行的“;”是为了避免引入时，与其他代码（第1行的c）造成错误
// jQuery 为传入的参数
// $ 为形参

执行上下文

就是JavaScript的执行环境

this

this是运行时确认的

this的指向：

• 指向调用对象
• 指向全局对象
• 用new 构造就指向新对象
• apply/call/bind, 箭头函数

var a = 1;
function fn() {
    console.log(window.a === this.a)
    console.log(this.a)
}

var obj = {
  fn: fn
}
obj.fn();// false undefined （指向调用对象）

fn();// true 1 （指向全局对象）
window.fn();// true 1

console.log(fn === window.fn) // true

 

var num = 4
function A(num) {
  this.num = num
  this.getNum = function() {
    console.log(this.num)
  }
}
a = new A(6)
a.getNum() // 6 用new 构造就指向新对象

var a = 3
function foo() {
  console.log( this.a );
}
var obj = {
  a: 2
};
foo.call(obj); // 2
foo.apply(obj);
foo.bind(obj)();

foo.call(null); // 3
foo.call(undefined); // 3
foo.call(); // 3

箭头函数

它没有自己的this

它使用封闭执行上下文(函数或是global)的 this 值

var x=11;
var obj={
 x:22,
 say: () => {
   console.log(this.x);
 }
}
​
obj.say(); // 11
obj.say.call({x:13}) // 11