變數提升的知識點:juejin.im/post/5e3d0f…
以下就是一些JS變數提升的題,沒事可以拿出來做一做(答案已給出)
補充知識點
1、連等賦值:從右向左執行
2、var 三個變數 :
var a = b = c = 1; 相當於:var a = 1;b = 1; c = 1;
var a,b,c = 1; 相當於:var a;var b;var c = 1;
var a = 1;b =1;c = 1; 相當於:var a = 1;var b = 1;var c =1;
例題
例一
var aaa = 100;
function f() {
var aaa = 1;
var fn = function () {
console.log(aaa);
}
return fn;
}
var f2 = f();
f2();
答案:1
複製程式碼
例二
console.log(a);
var a = 12,
b = 12;
function fn() {
console.log(a, b);
var a = b = 13;
console.log(a, b);
}
fn();
console.log(a, b);
答案:undefined undefined 12 13 13 12 13
(注意此題中,函式內部沒有b這個變數,因此需要向上級查詢,即全域性作用域中的b;並且在函式內修改了這個變數的值,其實修改的就是全域性中的b)
複製程式碼
例三
var a = 4;
var f = 3;
function b(x, y, a) {
alert(a);
arguments[2] = 10;
alert(a);
}
a = b(1, 2, f);
alert(a);
console.log(f);
答案:彈出:3 10 undefined 輸出 3
(因為函式並沒有返回值當沒有返回值的時候就是undefined,因此在執行完a = b(1, 2, f)後,a的值是undefined)
複製程式碼
例四
var a = { x: 12 };
var b = a;
b.c = b = { y: 12 };
a.c = b = { y: 100 };
console.log(a, b);
答案:a = {x:12,c:{y:100}} b = {y:100}
(連等賦值,.的優先順序高於賦值,b.c = b = { y: 12 };因此在這一步執行的時候,先建立c這個屬性,然後再去賦值)
複製程式碼
例五
console.log(a);
a = 12;
function fn() {
console.log(a);
a = 13;
}
fn();
console.log(a);
答案:報錯(沒有變數提升,找不到a,因此報錯;並且JS是單執行緒的,只要程式碼報錯,那麼就不再向下執行)
複製程式碼
例六
console.log(a);
var a = 12;
function fn(a) {
console.log(a);
a = 13;
}
fn();
console.log(a);
答案:undefined undefined 12
(不給函式的形參賦值,就是undefined)
複製程式碼
例七
console.log(a);
var a = 12;
function fn() {
console.log(a);
var a = 13;
}
fn();
console.log(a);
答案:undefined undefined 12
(這裡第二個undefined是因為在函式內有私有的a,變數提升過,未賦值的undefined)
複製程式碼
例八
var n = 10;
function outer() {
var n = 15;
function inner(n) {
console.log(n);
function center() {
n++;
console.log(n);
}
center();
}
inner(n);
}
outer();
答案:15 16
(這裡用到的就是修改的變數值是上一級查詢到的)
複製程式碼
例九
var n = 20;
function outer() {
++n;
function inner() {
console.log(n++);
function center() {
n += 2;
console.log(n);
}
center();
}
inner();
};
outer();
console.log(n);
答案:21 24 24
複製程式碼
例十
var n = 20;
function outer() {
console.log(++n);
function inner() {
console.log(n++);
var n = 100;
console.log(--n);
function center() {
n += 2;
console.log(n);
}
center();
}
inner();
};
outer();
console.log(n)
答案:21 NaN 99 101 21
(undefined ++,相當於JS中的加法,需要把他轉化為數字型別再加,因此undefined轉為數字型別為NaN,NaN再加仍是NaN)
複製程式碼
例十一
alert(a);
console.log("a" in window);
if (!("a" in window)) {
var a = 10;
}
alert(a);
console.log(fn);
if (9 == 8) {
function fn() {
alert(2);
}
}
答案:undefined true undefined undefined
(變數提升都是針對等號左邊的,並且變數提升的時候不看條件是否成立)
("a" in window的值是true或者false,意思就是看window這個物件中是否有a這個物件)
複製程式碼
例十二
fn();
var fn = function(){console.log(0)}
fn();
function fn(){console.log(1)};
fn();
var fn = function(){console.log(2)};
fn();
答案:1 0 0 2
複製程式碼
例十三
f = function () {return true};
g = function () {return false};
(function () {
console.log(g);
if (g() && [] == ![]) {
f = function f() {
return false
};
}
function g() {
return true
};
})();
alert(f());
alert(g())
複製程式碼
例十四
var x = 5;
function fn() {
return function (y) {
console.log(y + (++x));
}
}
var f = fn(6);
f(7);
fn(8)(9);
f(10);
console.log(x);
複製程式碼
例十五
var x = 5;
function fn(x) {
return function (y) {
console.log(y + (++x));
}
}
var f = fn(6);
f(7);
fn(8)(9);
f(10);
console.log(x);
答案:
複製程式碼
例十六
var x = 0,
y = 1;
function fn() { //這裡加一個形參X呢?
x += 2; //var x += 2?最後的結果呢?
fn = function (y) {
console.log(y + (--x));
};
console.log(x, y);
}
fn(3);
fn(4);
console.log(x, y);
複製程式碼
例十七
function fn() {
var i = 5;
return function (n) {
console.log(n * (--i))
}
}
var f = fn();
f(10);
fn()(10);
fn()(20);
f(20);
複製程式碼
例十八
var i = 2;
function fn() {
var m = 0;
i += 2;
return function (n) {
m = ++n + (--i)
console.log(m++);
}
}
var f = fn();
f(2);
f(3);
fn()(2);
fn()(3);
f(4);
複製程式碼
例十九
var n = 10;
function fn() {
var n = 20;
function f() {
n++;
console.log(n);
}
f();
return f;
}
var x = fn();
x();
x();
console.log(n);
複製程式碼
例二十
console.log(f)
function f(){1}
console.log(f)
var f = function(){2}
console.log(f)
function f(){3}
console.log(f)
複製程式碼
例二十一
console.log(a);
var a=12;
function fn(){
console.log(a);
var a=13;
}
fn();
console.log(a)
複製程式碼
例二十二
console.log(a);
var a=12;
function fn(){
console.log(a);
a=13
}
fn();
console.log(a)
複製程式碼
例二十三
var foo=1;
function bar(){
if(!foo){
var foo=10;
}
console.log(foo);
}
bar();
console.log(foo);
複製程式碼
例二十四
var n=13;
function fn(n){
console.log(n);
var n=14;
console.log(n);
}
fn(n);
console.log(n)
複製程式碼
例二十五
var n = 13;
function fn(){
n = 15;
console.log(n); // 15
}
fn();
alert(n); // '15'
複製程式碼
例二十六
var n = 10;
function outer(){
n = 15;
function inner(){
function center(){
alert(n);
}
center();
}
inner();
}
outer()
複製程式碼
例二十七
var n=0;
function a(){
var n=10;
function b(){
n++;
alert(n);
}
b();
alert(n)
}
a();
alert(n);
複製程式碼
例二十八
console.log(num,str);
var num = 18;
var str = "lily";
function fn2(){
console.log(str,num);
num = 19;
str = "candy";
var num = 14;
console.log(str,num);
}
fn2();
console.log(str,num);
複製程式碼