借用一张北大猫协的照片进行开始吧。
函数被调用过程(全局执行代码也可以看作一个自调函数)
一、函数被调用
1、函数不存在,报错。
2、函数存在,进入调用函数储存栈(先入后出),等待此函数内部函数调用完成后,在继续执行此函数。
变量提升
1、初始化arguments变量
2、内部变量提升和函数提升
2.1、函数名和变量名重名时候,函数名优先级大于变量名
2.1的栗子:
// 函数名优先级大于变量名
function test(){
console.log(a); // ƒ a(){}
var a = 1;
function a(){};
var a = function (){};
}
test();
2.2、函数提升是剪切,不是复制
2.2的栗子:
// 函数提升是剪切,不是拷贝
function test(){
console.log(a); // ƒ a(){}
var a = 1;
function a(){};
console.log(a); // 1 在这里的值不是 'ƒ a(){}' 的原因是,函数a变量提升时候被剪切到了开头
var a = 2;
console.log(a); // 2
}
test();
创建作用域链
建立作用域链,方便找到对应的变量是否有值。
确定this指向
1、直接调用函数的this指向windows
2、对象内部函数,谁调用,this指向谁
2、的栗子:
// 对象内部函数,谁调用,this指向谁
let obj = {
a : '1',
test : function(){
console.log(this.a) //1
}
};
obj.test();
3、构造函数中,this指向实例对象
3、的栗子:
// 构造函数中,this指向实例对象
function Obj(name){
this.name = name;
};
var obj1 = new Obj('打工人')
console.log(obj1); // Obj {name: "打工人"}
4、人工的进行修改this指向,call,apply,bind中,this指向它们后面的第一个参数
5、箭头函数,箭头函数没有自己的this,它如果有外层函数,那么this就指向外层函数,如果没有,则指向windows
5、的栗子:
// 箭头函数this指向
var a = 'windows';
function test(){
var a = 'test';
console.log(this.a); // windows
this.a = a;
(() => {
console.log(this.a); // test
})()
};
test();
二、执行
执行函数和函数内部函数的出入栈。
三、回收
执行完成后,后入函数进行先出栈,出栈后被回收(销毁)。
刚刚发现上个月被扣了半天工资,原因是下午下班没打卡,大家要以我为鉴,千万不要忘记打卡。
下面放几张周末去上课的照片