在學習中常會遇到Javascript的函數問題,本篇將會對其進行解說。
函數宣告和函數表達式有什麼區別
函數表達式和函數宣告語句包含相同的函數名,並且都建立了新的函數對象,他們的差異主要在於變數提升的物件不同
函數宣告的函數名稱就是一個變量,變數指向函數物件。變數提升的是函數的變數和函數主體。
函數表達式的是透過var進行賦值,把整個函數賦值給一個新的變量,變數提升的是新的變數名,函數初始化程式碼將繼續留在原來的位置不變。
什麼是變數的宣告前置?什麼是函數的宣告前置
變數的宣告前置
console.log(a);var a = 1; 结果为underfined
變數的宣告前置會預設此程式碼為:
var a; //變數宣告前置console.log(a);
a = 1;
函數的宣告前置
a()function a(){console.log ("hello") }
函數的宣告前置預設此程式碼為:
function a(){ //将函数声明提升console.log ("hello") }a() arguments 是什么
arguments是一個類別數組的對象,它裡面所儲存的是函數執行的時候所傳遞進來的參數,在函數中可以使用arguments來取得所有函數的參數。
如下程式碼:
function say(name,sex,age){ console.log(arguments); }console.log('name:jiuyi',"sex:男",'age:54') 结果为:"name:jiuyi""sex:男""age:54"
函數的重載怎麼實作
在JS中沒有函數重載的概念,後面的新函數將會覆寫前面的同名函數,就算參數不同。
function p(a,b,c) { console.log(a+b+c); } function p(a,b) { console.log(a+b); } console.log(p('hello','jiuyi','yes')); console.log(p('hello')) 结果为: "hellojiuyi" "helloundefined"
由上圖可以看出,後面的P函數覆蓋掉了上面的P函數。
立即執行函數表達式是什麼?有什麼作用
立即執行函數表達式就是將整個函數宣告用()包含起來變成函數表達式,然後後面跟上參數就會立即執行函數。
function ( ){ }函數宣告轉為( function (){ }) ( )
作用:
產生自己的作用域以及獨立的局部變量,不受變數提升的干擾,減少內部變數與外邊變數衝突的可能,執行一次會銷毀變數。
什麼是函數的作用域鏈
在JS中分為全域變數和局部變量,函數內部可以存取全域變量,而函數外部不能存取函數內部的局部變量,在變數在一個函數內部的時候,會優先在這個作用域裡尋找變數是否定義,沒有就向上一級尋找,知道找到所需的變數。如果在全域變數中沒有找到將會報錯。盡量使用局部變量,以免造成與外部變量的干擾。
1.程式碼輸出
function getInfo(name, age, sex){ console.log('name:',name); console.log('age:', age); console.log('sex:', sex); console.log(arguments); //代表实际参数,所以输出实际参数内容 arguments[0] = 'valley';//name赋值为valley console.log('name', name);//所以这里参数输出为valley } getInfo('hunger', 28, '男'); getInfo('hunger', 28); getInfo('男'); 结果为: name: hunger age: 28 sex: 男 ["hunger", 28, "男"] name valley name: hunger age: 28sex: undefined ["hunger", 28] name valley name: 男 age: undefined sex: undefined["男"] name valley
2.寫一個函數,傳回參數的平方和
function sumOfSquares(){ var x = 0; for(var i = 0;i<arguments.length;i++){ x = x + arguments[i]*arguments[i] } console.log(x) } sumOfSquares(2,3,4); sumOfSquares(1,3); 结果为:2910
3.如下程式碼的輸出?為什麼
console.log(a); //輸出為underfined,因為JS會全域變數提升,a只有宣告沒有賦值var a = 1;console.log(b);//報錯,因為b未宣告未賦值
4.如下程式碼的輸出?為什麼
sayName('world'); sayAge(10); function sayName(name){ console.log('hello ', name); } var sayAge = function(age){ console.log(age); };
結果為:
hello world //因為函數宣告前置function sayName(name)被提升到最上面,sayName有宣告有內容。報錯 //因為變數宣告前置 var sayAge 提升到最上面,而sayAge函數未聲明,所以報錯。
5.如下程式碼的輸出?為什麼
function fn(){} var fn = 3; console.log(fn); 相当于: var fn; function fn(){} ; fn = 3; console.log(fn); //所以输出为3
6.如下程式碼的輸出?為什麼
function fn(fn2){ console.log(fn2); //输出 function fn2(){ console.log('fnnn2');} var fn2 = 3; console.log(fn2); //输出3 console.log(fn); //输出 function fn(fn2){ console.log(fn2); var fn2 = 3; console.log(fn2); console.log(fn); function fn2(){ console.log('fnnn2'); } } fn(10); function fn2(){ console.log('fnnn2'); //不输出,函数未调用 } } fn(10); 相当于:var fn2; //声明前置function fn(fn2){ function fn2(){ //函数声明前置 console.log('fnnn2'); //此函数不输出,未调用 } console.log(fn2); // 调用的其实是函数fn2 fn2 = 3; console.log(fn2); // 此时fn2已被赋值为3 console.log(fn); //调用的其实是fn整个函数} fn(10);
7.如下程式碼的輸出?為什麼
var fn = 1; function fn(fn){ console.log(fn); } console.log(fn(fn)); //结果报错,变量提升,fn为1,直接调用1出错结果相当于: var fn; function fn(fn){ console.log(fn); } fn = 1; console.log(fn(fn));
8.如下程式碼的輸出?為什麼
console.log(j); //变量提升输出undefined console.log(i); //变量提升输出undefinedfor(var i=0; i<10; i++){ //i循环后结果为10var j = 100; } console.log(i); //输出10 console.log(j); //输出100
9.如下程式碼的輸出?為什麼
fn(); var i = 10; var fn = 20; console.log(i); function fn(){ console.log(i); var i = 99; fn2(); console.log(i); function fn2(){ i = 100; } } 代码相当于:var i; var fn;function fn(){ var i ; function fn2(){ i = 100; } console.log(i); //只有声明未赋值输出underfined i = 99; fn2(); //经过运行I=100 console.log(i); //输出100} fn(); i = 10; fn = 20;console.log(i); //输出10
10.如下程式碼的輸出?為什麼
var say = 0; (function say(n){ console.log(n); if(n<3) return; say(n-1); }( 10 )); console.log(say);
程式碼相當於: var say;
(function say(n){ console.log(n); if(n<3) return; say(n-1); }( 10 )); say = 0; console.log(say); //输出为0结果为:10987654320
函數say為立即執行函數,執行結果為10、9、8、7、6、5、4、3 、2,最後say賦值為0,所以輸出為0
本篇對常見的js函數問題進行了講解,更多相關內容請關注php中文網。
相關推薦:
#以上是關於常見的JS函數問題的講解的詳細內容。更多資訊請關注PHP中文網其他相關文章!