JavaScript函数声明提升
2024-08-27 20:48:47
首先,JavaScript中函数有两种创建方式,即函数声明、函数表达式两种。
1、函数声明。
function boo(){
console.log(123);
}
boo()
2、函数表达式。
var boo = function(){
console.log(123)
}
boo()
现在来说说函数声明提升。还是以例子来说明吧。
boo(123)
function boo(x){
console.log(x); //
}
运行后可知,在函数声明中,函数创建前就可以先调用函数。
由于函数声明提升,其实上述语句相当于这样:
function boo(x){
console.log(x); //
}
boo(123)
而在函数表达式中,则会是另一番结果。
hoo(456)
var hoo = function(y){
console.log(y) // Uncaught TypeError: hoo is not a function
}
运行后,发现会报错,为什么呢?这是因为在函数表达式中,函数声明并不会提前,它只是变量会提升而已。所以上述语句相当于:
var hoo;
hoo(456);
hoo = function(y){
console.log(y) // Uncaught TypeError: hoo is not a function
}
讲到函数声明提升与变量声明提升,这里来举另外一个例子。
var foo = function(){
console.log(123)
} function foo(){
console.log(456)
}
foo()
最初我一看到这个,毫不犹豫的就说这个结果是456,然而很遗憾,是错的。下面来分析一下,虽然两个函数的函数名是一样的,但是第一种方法是函数表达式,第二种是函数声明,鉴于变量声明提升和函数声明提升,所以上述语句其实相当于:
var foo; // 变量声明提升
function foo(){ // 函数声明提升
console.log(456)
}
foo = function(){ // 变量赋值依然保留在原来位置
console.log(123)
}
foo()
所以结果显而易见,是123喽。
最后补一个容易混淆的。
function Foo(){
getName = function(){
console.log(1);
}
return this;
}
Foo.getName = function(){
console.log(2)
}
Foo.prototype.getName = function(){
console.log(3)
}
var getName = function(){
console.log(4)
}
function getName(){
console.log(5)
}
Foo.getName(); // 2
getName(); // 4
Foo().getName(); // 1 foo()执行完成后,将全局的getName也就是window.getName给更改后返回this,而在这里this执行的就是window,所以最后执行的就是window.getName,所以输出1
getName(); // 1 上面已经更改全局的getName,所以依然是1
new Foo.getName(); // 2 new 操作符在实例化构造器的时候,会执行构造器函数,也就是说,foo.getName会执行,输出2
new Foo().getName(); // 3 先new foo()得到一个实例,然后再执行实例的getName方法,这个时候,实例的构造器里没有getName方法,就会执行构造器原型上的getName方法
new new Foo().getName() // 3
最新文章
- 给你推荐10款优秀的 HTML5 动画工具
- 【C语言入门教程】5.6 函数库和文件
- OpenCV摄像头人脸识别
- centos 5.5 安装 lnmp
- 更改VisualStudio默认创建类和接口不加public问题
- Angular1.0
- c++ 名字粉碎(name mangling)
- Codeforces243C-Colorado Potato Beetle(离散化+bfs)
- SqlDataAdapter.Update()方法与SqlCommandBuilder(转)
- ASP.NET Web API是如何根据请求选择Action的?[上篇]
- Android - Fragment(二)加载Fragment
- 与apk签名有关的那些概念与命令
- Tar专题
- mysql常见的问题
- 王之泰201771010131《面向对象程序设计(java)》第十二周学习总结
- Springboot+ActiveMQ(ActiveMQ消息持久化,保证JMS的可靠性,消费者幂等性)
- hdu 4707 仓鼠 记录深度 (BFS)
- supervisor管理进程 superlance对进程状态报警
- Struts2学习笔记一:工作流程与核心文件
- 字母统计-map