JavaScript基礎內容中的函數詳解

1、函數概念

函數:即方法

函數就是一段預先設置的功能代碼塊，能夠反覆調用，根據輸入參數的不一樣，返回不一樣的值。

2、爲何使用函數：

1.方便調用
2.代碼重用，利於維護
3.便於修改，便於重構
4.簡化邏輯，利於編程

一、聲明函數

聲明函數 Function Declaration 的三種方法

1）function 命令

function print(s) {
    document.write(s+"<br/>");
}

2）函數表達式

var printStr =function(str){
    document.write(str+"<br/>");
}

這種寫法將一個匿名函數賦值給變量。這時，這個匿名函數又稱函數表達式（Function Expression），由於賦值語句的等號右側只能放表達式。

3）Function 構造函數 : 入門級別用的很少….

var add = new Function('x','y','return (x + y)');
// 等同於

function add(x, y) {
    return (x + y);
}
var foo = new Function(
    'return "hello world"'
);
// 等同於

function foo() {
    return "hello world";
}

注意:不能在條件語句中聲明函數

3、函數名的提高

JavaScript 引擎將函數名視同變量名，因此採用 function 命令聲明函數時，整個函數會像變量聲明同樣，被提高到代碼頭部。因此，下面的代碼不會報錯。

f();
function f() {}

表面上，上面代碼好像在聲明以前就調用了函數 f。可是實際上，因爲「變量提高」，函數 f 被提高到了代碼頭部，也就是在調用以前已經聲明瞭。可是，若是採用賦值語句定義函數，JavaScript 就會報錯。

f();
var f = function (){};// TypeError: undefined is not a function

4、函數的調用

函數的調用:圓括號運算符

函數名([實參]);
存在返回值能夠變量接收

print()
printStr("goodgoodstudy");
var result =add(1,2);

5、參數

參數: 形參與實參 函數運行的時候，有時須要提供外部數據，不一樣的外部數據會獲得不一樣的結果，這種外部數據就叫參數。"種瓜得瓜種豆得豆"，使用時實參能夠省略。

function square(x) { //x 爲形參
    return x * x;
}

square(2) // 4 2 爲實參

square(3) // 9

function f(a, b) {
    return a;
}
//實參能夠省略
f(4, 2, 3) // 1
f(10) // 1
f() // undefined

同名參數：取最後的一個

function f(a, a) {
    console.log(a);
}

f(1, 2) // 2

默認值:使用 || 或運算

function f(a){
    a = a || 1;
    return a;
}

f('') // 1
f(0) // 1

//更精確寫法
function f(a){
    (a !== undefined && a !== null) ? a = a : a = 1;
    return a;
}

值傳遞（passes by value）:值的副本

var box= 2;
function f(a) {
    a = 3;
}

f(box);
console.log(box) // 2 沒有改變
//思考 對象值的改變
var obj = {p: 1};
function f(o) {
    o.p = 2;
}
f(obj);
console.log(obj.p) // 2

//思考
var obj = [1, 2, 3];
function f(o){
    o = [2, 3, 4];
}

f(obj);
console.log(obj) // [1, 2, 3]

arguments 對象: 獲取全部的參數，能夠當作數組。因爲 JavaScript 容許函數有不定數目的參數，因此咱們須要一種機制，能夠在函數體內部讀取全部參數。這就是 arguments 對象的由來。

var f = function(a) {
    for(var i in arguments){
        console.log(arguments[i]);
    }
}

f(1,2,3);
瞭解: callee

var add =function(){
    //獲取調用者
    console.log(arguments.callee === add); //是否爲本身調用
}
add();

6、 return 語句

是函數的返回值。return 語句不是必需的，若是沒有的話，該函數就不返回任何值，或者說返回 undefined。

7、遞歸（ recursion）

函數本身調用自身

函數頭:盡頭 函數體:重複執行

function print(num){
    if(num==10){ //遞歸頭
        return ;
    }
    //遞歸體
    console.log(num);
    print(num+1);
}

print(1);

8、函數的地位

函數的地位是第一等公民

函數與其餘數據類型徹底是平等的，因此又稱函數爲第一等公民

function add(x, y) {
    return x + y;
}

// 將函數賦值給一個變量
var operator = add;

// 將函數做爲參數和返回值
function a(op){
    return op;
}

a(operator)(1, 1)// 2

9、函數的屬性和方法

name:函數名
length:參數個數
toString(): 返回源碼

10、函數做用域

函數做用域:全局(global variable)和局部(local variable)

var a =1; //全局變量
function display(){
    var b=2; //局部變量
    c =3; //沒有 var 爲全局變量 ,調用完成後 c 就存在了
    console.log(a+"-->"+b);
}

display();
//b 不能訪問
console.log(a+"-->"+c);
就近原則:

var v = 1;

function f(){
    var v = 2;
    console.log(v);
}

f(); // 2
console.log(v); // 1
變量提高

function foo(x) {
    if (x > 100) {
        var tmp = x - 100;
    }
}
//等同於

function foo(x) {
    var tmp;
    if (x > 100) {
        tmp = x - 100;
    };
}

函數自己的做用域:函數自己也是一個值，也有本身的做用域。它的做用域綁定其聲明時所在的做用域。

var a = 1;

var x = function (){
    console.log(a);
};

function f(){
    var a = 2;
    x();
}

f() // 1

11、方法的調用

方法的調用: apply call ：調用一個對象的一個方法，以另外一個對象替換當前對象。兩者的區別在於參數是否爲數組

function Animal(age){
    this.name = "Animal";
    this.showName = function(){
           alert(this.name);
    }
}

function Cat(){
    this.name = "Cat";
}

var animal = new Animal();

var cat = new Cat();

//經過 call 或 apply 方法，將本來屬於 Animal 對象的 showName()方法交給對象 cat 來使用了。

//輸入結果爲"Cat"

animal.showName.call(cat,"10");
// 等同於apply方法中參數爲數組
animal.showName.apply(cat,[10]);

12、 eval

執行字符串，將字符串看成語句執行。

eval('var a = 1;');
alert(a); // 1
瞭解 jsonp 的使用:

var jsonp = 'foo({id:42})';

var f = new Function( "foo", jsonp );

// 至關於定義了以下函數
/*
function f(foo) {
    foo({id:42});
}*/

//業務處理

var print=function(json){
    console.log( json.id ); // 42
}

f(print);
//至關於
function f(print){
    json = {id:42};
//    print(json);
    console.log(json.id);
}

上面代碼中，jsonp 是一個字符串，Function 構造函數將這個字符串，變成了函數體。調用該函數的時候，jsonp 就會執行。這種寫法的實質是將代碼放到函數做用域執行，避免對全局做用域形成影響。（上海尚學堂，首發於公衆號：嗨碼歌 請關注）