js作用域&闭包
js作用域&闭包
作用域
作用域是负责收集并维护由所有声明的变量组成的一系列查询，并且实施一套严格的规则，确定当前执行的代码对这些变量的访问权限 -- 《你不知道的javascript》
作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突
1 作用域链
作用域有上下级的关系，会在当前作用域中寻找变量，如果找不到会沿着创建时作用域链一直往上找，直到找到全局作用域。
var a=1;
function f1(){
var b=2;
function f2(){
var c=3;
console.log(a,b,c);
}
f2();
}
f1();//1 ,2 ,3
2 作用域形成时机
作用域是在一个函数创建时就已经形成的，而不是调用时.
function a () {
let b = 2;
return function() {
console.log(b)
}
}
let b = 222
a(); // 2 而不是222
以上的示例调用a函数看似是在全局环境，但是其中的b却没有使用全局的b。而且去寻找定义时的b，没有找到则沿着创建时的作用域链往上找。结果是2
3 作用域类别
作用域包含全局作用域、函数作用域、和es6中新增的块级作用域。
在es6没有出来之前。我们避免变量污染全局的方法是使用函数作用域。
最常见的是使用自执行函数来包裹模块，这样函数中的变量只能在局部作用域中生效
(function() {
// do something
})()
而在es6中新增的let和const可以将变量绑定到所在的任意作用域中通常是{...}，为其声明的变量隐式的劫持了所在的块级作用域。 -- 《你不知道的javascript》
for (var i = 0; i < 10; i++) {
setTimeout(() => {
console.log(i) // 10 10 ... 10
}, 500)
}
// es6之前 需要使用自执行函数来创建函数作用域来隔绝变量
for (var i = 0; i < 10; i++) {
(function(i){
setTimeout(() => {
console.log(i) // 10 10 ... 10
}, 500)
})(i)
}
// 而es6中直接使用let就可以实现隔绝变量的作用
for (let i = 0; i < 10; i++) {
setTimeout(() => {
console.log(i) // 0 1 2 ... 9
}, 500)
}
4 提升
代码被执行前会有声明提升的过程。只有声明本身会被提升，任何作用域都会进行提升操作。
{
console.log(a);
var a = 2;
}
实际上被解析成如下：
{
var a;
console.log(a);
a = 2;
}
let和const声明不会被提升，但是不代表这个作用域中不会进行提升操作。
{
console.log(a); // ReferenceError
let a = 2;
}
函数的提升是优先于变量的
foo(); // 1 打印出来的是1 而不是2
var foo;
function foo () {console.log(1)}
foo = function() {console.log(2)}
this
this的优先级
- 函数是否在new中调用，如果是的话this绑定的是新创建的对象
var bar = new foo();
- 函数通过call、apply（显式绑定），或者bind（硬绑定）。this绑定的是指定的对象
var bar = foo.call(obj)
- 函数是否在某个上下文对象中调用（隐式绑定）如果是则绑定的是那个上下文对象
var bar = obj.foo()
- 如果都不是的话使用默认绑定，严格模式下undefined，否则都是全局对象
var bar = foo()
apply、call都是执行本身的函数，而bind是返回一个新函数。而且可以用来做函数柯里化
function foo(a,b){
console.log("a"+a+",b:""+b);
}
var bar = foo.bind(null, 2);
bar(3) // a:2 b:3
1 构造函数中this
function Kimi() {
this.name = 'kimi'
console.log(this) // 'kimi'
}
new Kimi
如何直接执行Kimi() this指向window
2 函数作为对象的一个属性
let kimi = {
name : 'kimi',
say: function() {
console.log(this.name) // 'kimi'
}
}
kimi.say() // 这样调用打印的是‘kimi’
如果不作为属性调用
let a = kimi.say;
a(); // 这样调用打印的是window
3 使用call和apply
let kimi = {
name : 'kimi'
}
let say = function() {
console.log(this.name) // 'kimi'
}
say.call(kimi);
4 全局
全局中的this一直指向window
let name = 'kimi';
let say = function() {
console.log(this); // window
console.log(this.name); // 'kimi'
}
say();
有以下情况：
let kimi = {
name : 'kimi',
say: function() {
function a () {
console.log(this.name) // 'undefined'
}
a();
}
}
kimi.say();
函数a虽然是在kimi.say内部定义的，但是它仍然是一个普通的函数，this仍然指向window。如果需要重新指向kimi则需要使用箭头函数或者用let that = this;保存引用
5 this的用途
this可以动态的绑定执行的对象，起到复用代码的作用
jQuery.extend = jQuery.fn.extend = function() {
target = this;
}
jQuery.extend和jQuery.fn.extend都指向了同一个函数，但是当执行时，函数中的this是不一样的。
执行jQuery.extend(…)时，this指向jQuery；执行jQuery.fn.extend(…)时，this指向jQuery.fn。
闭包
在一个函数内部定义的另一个函数，当内部函数在包裹他的函数之外被执行时，就会形成闭包。同时内部函数仍然可以访问到包裹函数中的局部变量与函数。
闭包的两个常见用途
1. 函数作为返回值
封装变量 避免全局中被修改 ，并且记录状态。状态不会销毁丢失
function isFirst() {
var _list = [];
return function(id) {
if(_list.includes(id)) {
return false
}
_list.push(id)
return true;
}
}
var first = isFirst()
first(10) // true
first(10) // false
first(20) // true
2. 函数作为参数
function wait(message) {
setTimeout(function timer() {
console.log(message);
}, 1000)
}
wait('hello');
timer 函数传递给setTimeout(),
timer就具有了涵盖wait()作用域的闭包，因此保有对变量message的引用，等到1000回调执行后，wait的内部作用域不会消失
在定时器、事件监听器、Ajax请求、跨窗口通信、webworker、或者其他的异步或者同步的任务中，只要使用了回调函数，实际上就在使用闭包。
