关于变量提升容易被忽略的地方

209 阅读1分钟

场景

今天在看同事代码的时候,发现一个很奇怪的事情

const Father = () => {return <Son />}
const Son = () => {...}

这里Son组件在使用之后才定义,按照const不会变量提升的特性,为什么代码还是可以正常运行

示例

console.log(name) // undefined
var name = '爱马仕'

console.log(name) // Uncaught ReferenceError: Cannot access 'name' before initialization
const name = '爱马仕'

console.log(name) // Uncaught ReferenceError: name is not defined

由此可见,var会变量提升并定义为undefined,const没有变量提升,但是Error信息中会告诉你不可以使用name,但是当没有定义name应该提示not defined才对,根据官方解释const如果在使用后定义,会将name放在temporal dead zone暂时性死区里,所以可以理解为另一种形式的提升操作

拓展

当函数与变量同时提升时,函数会被优先提升,会在更靠前的位置