- hoisting(变量提升)
变量提升:函数声明和变量声明总是会被解释器悄悄地被”提升”到方法体的最顶部。
<!DOCTYPE html>
<html>
<head>
<title>hoisting</title>
</head>
<body>
<script type="text/javascript">
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
</script>
</body>
</html>
预解析后代码的顺序
<!DOCTYPE html>
<html>
<head>
<title>hoisting</title>
</head>
<body>
<script type="text/javascript">
//变量提示后,变量和函数的声明使的变量和函数上移。
var getName;
function getName(){console.log(5);};
function Foo(){
getName = function() {console.log(1);};
return this;
}
Foo.getName = function (){ console.log(2);};
Foo.prototype.getName = function(){console.log(3);};
getName = function(){console.log(4);};
Foo.getName();
getName();
</script>
</body>
</html>
2.局部作用域
<!DOCTYPE html>
<html>
<head>
<title>变量的作用域</title>
</head>
<body>
<script type="text/javascript">
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执行,没有加var,所以是全局变量。
Foo().getName(); //1
//全局变量直接输出1,getName()等价于window.getName(),getName等价于this.getName()
getName(); //1
</script>
</body>
</html>
3.参数优先级
<!DOCTYPE html>
<html>
<head>
<title>符号的优先级</title>
</head>
<body>
<script type="text/javascript">
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);};
//点的优先级高于new,foo.getName输出2
//new function (){console.log(1);};
new Foo.getName(); //2
//new Foo()是一个对象,在原型链上有一个getName输出3
new Foo().getName(); //3
//.的优先级高于new带参数高于new不带参数
new new Foo().getName(); //3
</script>
</body>
</html>