详细Hoisting篇观念可以参考JS 原力觉醒 Day06- 提升 Hoisting及重新认识 JavaScript: Day 10 函式 Functions 的基本概念
这边只是为了记录函式拆解过程,如果有前辈觉得哪边可以修改,请大力鞭策!!!
/* 函式陈述式 callName(); function callName() { console.log('呼叫小明'); } 可执行原因如下 __________________________________________ _______________大部分解____________________ 创造阶段:(为变数及函式保留记忆体空间的动作,就被称为「提升( Hoisting )」。提升这个动作在不论是 全域执行环境还是函式执行环境,所有的执行环境都会进行;这个记忆体空间则称为全域记忆体 ( Global Memory ) ,或称记忆体堆积 ( Heap )。) function callName() { console.log('呼叫小明'); } 执行阶段 callName(); */ /* 函式表达式 callName(); var callName = function () { console.log('呼叫小明'); } 出现 callName is not a function ↓ console.log(callName); var callName = function () { console.log('呼叫小明'); } 把callName()变成console.log(callName),会出现undefined, __________________________________________ _______________大部分解____________________ 创造阶段(放进记忆体空间), 代表callName是变数,仅被创造于记忆体,尚未于记忆体上赋予值, 故为undefined。 var callName; 执行阶段 callName = function () { console.log('呼叫小明'); } 因此 var callName = function () { console.log('呼叫小明'); } callName(); 成功执行。 */ /* 函式陈述式及函式表达式併行结果: 型1: function callName() { console.log('呼叫小明1'); } var callName = function () { console.log('呼叫小明2'); } callName(); 结果为 呼叫小明2 __________________________________________ _______________大部分解____________________ 创造阶段(放进记忆体空间):函式会先行放入记忆体, 变数会排在函式下一位。 1. function callName() { console.log('呼叫小明1'); } 2.var callName 执行阶段: callName = function () { console.log('呼叫小明2'); } callName(); */ /* 型2: callName(); function callName() { console.log('呼叫小明1'); } var callName = function () { console.log('呼叫小明2'); } __________________________________________ _______________大部分解____________________ 创造阶段(放进记忆体空间):函式会先行放入记忆体, 变数会排在函式下一位。 1. function callName() { console.log('呼叫小明1'); } 2.var callName 执行阶段: callName(); callName = function () { console.log('呼叫小明2'); } 结果为呼叫小明1。 */ /* 例子1: callName(); function callName() { console.log(Ming); } var Ming = '小明'; __________________________________________ _______________大部分解____________________ 创造阶段(放进记忆体空间):函式会先行放入记忆体, 变数会排在函式下一位。 1.function callName() { console.log(Ming); } 2.var Ming 执行阶段: callName(); 结果为undifinted。 Ming = '小明' */ /*例子2: function callName() { console.log('小明'); } callName(); function callName() { console.log('杰伦'); } callName(); __________________________________________ _______________大部分解____________________ 创造阶段(放进记忆体空间):1.函式会先行放入记忆体, 因为程式运作会先读取1.函式,再来读取后面进入记忆体的2.函式。 1.function callName() { console.log('小明'); } 2.function callName() { console.log('杰伦'); } 执行阶段: callName(); callName(); 都是杰伦。 */ /*例子3: whosName(); function whosName() { if (name) { name = '杰伦'; } } var name = '小明'; console.log(name); /* __________________________________________ _______________大部分解____________________ 创造阶段(放进记忆体空间):函式会先行放入记忆体, 变数会排在函式下一位。 1.function whosName() { if (name) { name = '杰伦'; } } 2.var name 执行阶段: whosName(); name = '小明'; console.log(name); whosName() -> 因为function whosName()里面的if (name) 之name仅被宣告 创造阶段(2.var name),尚未被赋值,所以if为false, 使function whosName()无作用。 name = '小明' -> 代表var name被赋予值 '小明'。 console.log(name)-> 小明。 */