javascript權威指南——函式篇

可可西里的海發表於2018-12-18
JavaScript函式

函式

函式是這樣的一段javascript程式碼，它只定義一次，點可能被執行或呼叫任意次。

關鍵詞解釋

  • 引數（行參：函式中定義的變數；實參：呼叫函式時傳入的引數）；
  • 呼叫上下文：普通函式——this（物件呼叫，this則為方法上級的物件；直接呼叫，為window）；箭頭函式——this為當前作用域的頂級物件。
//exam 1
var obj ={
    a:1,
    fn:function(){
        console.log(this.a)
    }
}
var a = 2;

obj.fn()  // 1
var m = obj.fn
m() // 2
複製程式碼
//exam 2
var obj={
    a:1,
    b:2,
    c:{
        a:3,
        fn:()=>{
            console.log(this.a)
        },
        fn2:function(){
            console.log(this.a)
        }
    }
}
var a =4
obj.c.fn()    //4
obj.c.fn2()   //3
複製程式碼

瀏覽器解析的時候，二者都會發生變數提升（hoisting），會將a變數提升為undefined，aaa會被當成函式提升,當程式碼從第一行開始執行之後，a被覆蓋成console.log(1)；

PS:變數提升是瀏覽器編譯器的行為。

  • 函式表示式/函式宣告式
//函式表示式
var a = function(){console.log(1)};

//函式宣告式
function a(){console.log(2)};

a() // 1

複製程式碼
  • arguments（實參物件）：是一個類陣列物件，具有數字下標這樣可通過數字訪問他(數字下標)，具有length屬性，但並不是陣列，不具備陣列方法，例如pop,push；
    //argument轉換成陣列
    function arg2arr(){
        //第一種
        let arr = Array.prototype.slice.call(arguments)
        //第二種
        let arr2 = Array.from(arguments)
        //第三種
        let arr3 = [...arguments]
        console.log(arr,arr2,arr3);
    }
複製程式碼

測試截圖：

javascript權威指南——函式篇 javascript權威指南——函式篇
  • 閉包：函式物件可以通過作用域鏈相互關聯起來，函式體內部的變數都可以儲存在函式作用域內，這種特性在電腦科學文獻中稱為“閉包”。

阮一峰老師的解釋，恰當的形容了這句晦澀難懂的定義：獲取函式內部變數的函式，稱為閉包。

特點：

  1. 變數存貯在記憶體中,不會被瀏覽器垃圾策略清除；
  2. 獲取內部變數；
  3. 存在記憶體洩漏的問題；

  • prototype屬性：這個屬性是指向一個物件的引用，這個物件稱作“原型物件”。每一個函式都包含不同的原型物件。當將函式用作建構函式的時候，新建立的物件會從物件上繼承屬性。

  • call/aplly方法：看做是某個物件的方法，通過呼叫方法的形式來間接呼叫函式。

f.call(thisObj,arg1,arg2,arg3...)
f.apply(thisObj,[arg1,arg2,arg3...])
複製程式碼
  • bind方法：（ES5方法）將函式繫結至某個物件；
    function add (x,y,z){
        return x+y+z
    }
    var succ = add.bind({x:1},2)
    succ(3);//6

    //重寫一個bind方法
    Function.prototype.bind = function(thisTarget){
        this.apply(thisTarget,[...arguments])
    }
複製程式碼

PS：犀牛書晦澀難懂的一段

javascript權威指南——函式篇

github原文地址

相關文章