作用域
执行上下文分为全局上下文(在浏览器中全局上下文为window对象),和函数上下文。全局上下文存储的便是全局变量和方法。而在函数里面定义的变量和方法则储存在函数上下文里面。 当代码执行时,遇到变量,首先会在当前作用域里面找,没有的话则会到父级作用域,直到找到为止或者到达全局作用域
var color = “blue”;
function changeColor(){
var anotherColor = “red”;
function swapColors(){
var tempColor = anotherColor;
anotherColor = color;
color = tempColor;
//color, anotherColor, and tempColor are all accessible here }
//color and anotherColor are accessible here, but not tempColor
swapColors();
}
//only color is accessible here changeColor();
上面的代码有三个执行上下文:全局上下文,changeColor()
的函数上下文,swapColors()
的函数上下文。全局上下文的color
变量在swapColors()
函数里面被访问到,正是因为作用域链的关系,作用域链是向上的而这不是向下的,所以全局上下文没有办法访问到tempColor
这个变量
javascript在es6之前是没有块级作用域的
if (true) {
var color = 'blue'
}
console.log(color)
在if里面创建的color是可以在全局上下文访问到的,es6之后可以使用let关键字来限制变量的范围。
自由变量将从作用域链中去寻找,但是 依据的是函数定义时的作用域链,而不是函数执行时,以上这个例子就是闭包。闭包主要有两个应用场景:
- 函数作为返回值,上面的例子就是
- 函数作为参数传递
function F1() {
var a = 100
return function () {
console.log(a)
}
}
function F2(f1) {
var a = 200
console.log(f1())
}
var f1 = F1()
F2(f1)
以上结果输出的100,因为函数定义时a的值已经是100了。
如果在函数内部分配一个以前没有被定义的变量的值,它会自动成为全局范围的一部分。
function myFunction() {
myVariable = 'JavaScript';
}
myFunction();
console.log(myVariable); //JavaScript
this
this是什么呢,this其实就是函数调用时的执行上下文
func(p1, p2)
执行这个代码,等价于func.call(undefined, p1, p2)
, 里面的context为undefined,当context 就 null 或者 undefined,那么 window 对象就是默认的 context(严格模式下默认 context 是 undefined),那么这时候的this就是等价于winodow。
如果是执行obj.f1(p1)
,相当于执行obj.f1.call(obj, p1)
,这时候的this就是obj的执行上下文
默认绑定:
规则:在非严格模式下,默认绑定的this
指向全局对象,严格模式下this
指向undefined
function foo() {
console.log(this.a); // this指向全局对象
}
var a = 2;
foo(); // 2
function foo2() {
"use strict"; // 严格模式this绑定到undefined
console.log(this.a);
}
foo2(); // TypeError:a undefined
默认绑定规则如上述栗子,书中还提到了一个微妙的细节:
function foo() {
console.log(this.a); // foo函数不是严格模式 默认绑定全局对象
}
var a = 2;
function foo2(){
"use strict";
foo(); // 严格模式下调用其他函数,不影响默认绑定
}
foo2(); // 2
所以:对于默认绑定来说,决定this绑定对象的是函数体是否处于严格模式,严格指向undefined,非严格指向全局对象。
通常不会在代码中混用严格模式和非严格模式,所以这种情况很罕见,知道一下就可以了,避免某些变态的面试题挖坑。
隐式绑定:
规则:函数在调用位置,是否有上下文对象,如果有,那么this就会隐式绑定到这个对象上。
function foo() {
console.log(this.a);
}
var a = "Oops, global";
let obj2 = {
a: 2,
foo: foo
};
let obj1 = {
a: 22,
obj2: obj2
};
obj2.foo(); // 2 this指向调用函数的对象
obj1.obj2.foo(); // 2 this指向最后一层调用函数的对象
// 隐式绑定丢失
let bar = obj2.foo; // bar只是一个函数别名 是obj2.foo的一个引用
bar(); // "Oops, global" - 指向全局
隐式绑定丢失:
隐式绑定丢失的问题:实际上就是函数调用时,并没有上下文对象,只是对函数的引用,所以会导致隐式绑定丢失。
同样的问题,还发生在传入回调函数中,这种情况更加常见,并且隐蔽,类似:
test(obj2.foo); // 传入函数的引用,调用时也是没有上下文对象。
显式绑定:
就像我们上面看到的,如果单纯使用隐式绑定肯定没有办法得到期望的绑定,幸好我们还可以在某个对象上强制调用函数,从而将this绑定在这个对象上。
规则:我们可以通过apply
、call
、bind
将函数中的this
绑定到指定对象上。
function foo() {
console.log(this.a);
}
let obj = {
a: 2
};
foo.call(obj); // 2
传入的不是对象:
如果你传入了一个原始值(字符串,布尔类型,数字类型),来当做this的绑定对象,这个原始值转换成它的对象形式。
如果你把null
或者undefined
作为this的绑定对象传入call
/apply
/bind
,这些值会在调用时被忽略,实际应用的是默认绑定规则。
new绑定:
书中提到:在js中,实际上并不存在所谓的'构造函数',只有对于函数的'构造调用'。
new的时候会做哪些事情:
- 创建一个全新的对象。
- 这个新对象会被执行 [[Prototype]] 连接。
- 这个新对象会绑定到函数调用的this。
- 如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。
规则:使用构造调用的时候,this会自动绑定在new期间创建的对象上。
function foo(a) {
this.a = a; // this绑定到bar上
}
let bar = new foo(2);
console.log(bar.a); // 2
this四种绑定规则的优先级
如果在某个调用位置应用了多条规则,如何确定哪条规则生效?
obj.foo.call(obj2); // this指向obj2 显式绑定比隐式绑定优先级高。
new obj.foo(); // thsi指向new新创建的对象 new绑定比隐式绑定优先级高。
显式绑定和new绑定无法直接比较(会报错),默认绑定是不应用其他规则之后的兜底绑定所以优先级最低,最后的结果是:
显式绑定 > 隐式绑定 > 默认绑定
new绑定 > 隐式绑定 > 默认绑定
箭头函数的this指向不会使用上述的四条规则:
function foo() {
return () => {
console.log(this.a);
};
}
let obj1 = {
a: 2
};
let obj2 = {
a: 22
};
let bar = foo.call(obj1); // foo this指向obj1
bar.call(obj2); // 输出2 这里执行箭头函数 并试图绑定this指向到obj2
从上述栗子可以得出,箭头函数的this规则:
- 箭头函数中的this继承于它外面第一个不是箭头函数的函数的this指向。
- 箭头函数的 this 一旦绑定了上下文,就不会被任何代码改变。
闭包
通常,函数的作用域及其所有变量都会在函数执行结束后被销毁。但是,在创建了一个闭包以后,这个函数的作用域就会一直保存到闭包不存在为止。 闭包有三个特性:
1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收
function makeAdder(x) {
return function(y) {
return x + y;
};
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
console.log(add5(2)); // 7
console.log(add10(2)); // 12
// 释放对闭包的引用
add5 = null;
add10 = null;
闭包的作用,就是保存自己私有的变量,通过提供的接口(方法)给外部使用,但外部不能直接访问该变量。
当我们需要在模块中定义一些变量,并希望这些变量一直保存在内存中但又不会“污染”全局的变量时,就可以用闭包来定义这个模块。
闭包的缺点:闭包的缺点就是常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。
函数套函数就是闭包吗?:不是!,当一个内部函数被其外部函数之外的变量引用时,才会形成了一个闭包。
对象模式 函数内部定义个一个对象,对象中绑定多个函数(方法),返回对象,利用对象的方法访问函数内的数据
function createPerson() {
var __name__ = "";
return {
getName: function () {
return __name__;
},
setName: function( value ) {
// 如果不姓张就报错
if ( value.charAt(0) === '张' ) {
__name__ = value;
} else {
throw new Error( '姓氏不对,不能取名' );
}
}
}
}
var p = createPerson();
p.set_Name( '张三丰' );
console.log( p.get_Name() );
p.set_Name( '张王富贵' );
console.log( p.get_Name() );
函数模式 函数内部定义一个新函数,返回新函数,用新函数获得函数内的数据
function foo() {
var num = Math.random();
function func() {
return mun;
}
return func;
}
var f = foo();
// f 可以直接访问这个 num
var res1 = f();
var res2 = f();
沙箱模式 沙箱模式就是一个自调用函数,代码写到函数中一样会执行,但是不会与外界有任何的影响,比如jQuery
(function () {
var jQuery = function () { // 所有的算法 }
// .... // .... jQuery.each = function () {}
window.jQuery = window.$ = jQuery;
})();
$.each( ... )
回收机制
在javascript中,如果一个对象不再被引用,那么这个对象就会被垃圾回收机制回收; 如果两个对象互相引用,而不再被第3者所引用,那么这两个互相引用的对象也会被回收。
变量声明提升
js 代码在运行前都会进行 AST 解析,函数申明默认会提到当前作用域最前面,变量申明也会进行提升。但赋值不会得到提升。
参考 https://juejin.cn/post/6844903630592540686#heading-2