帶你學習Javascript中的函數進階（一）

1. 函數的定義和調用

1.1 函數的定義方式

1. 函數聲明方式function關鍵字（命名函數）
2. 函數表達式（匿名函數）
3. new Function()

var fn = new Function('參數1', '參數2',...,'函數體')

• Function裡面參數都必須是字元串格式
• 第三種方式執行效率低，也不方便書寫，用的比較少
• 所有函數都是Function的實例（對象）

//函數聲明方式
function fn() {}

//函數表達式（匿名函數）
var fn = function() {}

//利用new Function('arg1','arg2', 'fn')
var f = new Function('a','b',console.log(a+b)')
f(1,2) // 3

所有的函數都是Function實例對象

1.2 函數的調用方式

1. 普通函數
2. 對象的方法
3. 構造函數
4. 綁定事件函數
5. 定時器函數
6. 立即執行函數

// 普通函數
function fn() {
    console.log('前端嵐楓博客')
}
fn() //前端嵐楓博客

//對象的方法
var obj = {
    say: function () {
    console.log('前端嵐楓博客')
  }
}
obj.say() //前端嵐楓博客

//構造函數
function Star() {
}
new Star()

//綁定的事件函數
btn.onclick = function() {} //點擊了按鈕就可以調用該函數

//定時器函數
setInterval(function() {}, 1000)

//立即執行函數
(function() {
    console.log('前端嵐楓博客') //自動調用
})()

2. this

2.1 函數內this的指向

這些this的指向，是當調用函數的時候確定的調用方法的不同決定了this的指向不同，一般指向調用者。
調用方式

2.2 改變函數內部this指向

Javascript為提供了一些函數方法來幫助我們更優雅地處理函數內部this的指向問題，常用的有bind()、call()、apply()三種方法。接下來，我們來詳細的介紹一下這三種方法的用法，看看它們是如何改變this指向的。

1. call方法

call()方法調用一個對象，簡單理解為調用函數的方式，但是它可以改變函數的this指向。

fn.call(thisArg, arg1, arg2, ...)

var obj = {
        name: 'lanfeng'
}
function fn(a, b) {
    console.log(this) 
  console.log(a+b) 
}
fn(1,2)//指向window, 3
fn.call(obj, 1, 2) //指向obj, 3

//實現繼承
function Father(uname, age, sex) {
    this.uname = uname
  this.age = age
  this.sex = sex
}
function Son () {
    Father.call(this,uname, age, sex)
}
var son = new Son('柳岩',18,'女')

call：第一個可以調用函數，第二個可以改變函數內的this指向
call的主要作用可以實現繼承

1. apply方法

apply（）方法調用一個函數。簡單理解為調用函數的方式，它與call方法一樣可以改變函數的this的指向，但是它跟call傳參數方式不一樣，它是傳的參數必須在一個數組裡

fun.apply(thisArg, [argsArray])

• thisArg：在fun函數運行時指定this的值
• argsArray: 傳遞的值，必須包含在數組裡面
• 返回值就是函數的返回值，因為它就是調用函數

var obj = {
        name: 'lanfeng'
}
function fn(a, b) {
    console.log(this) 
  console.log(a+b) 
}
fn(1,2)//指向window, 3
fn.apply(obj, [1, 2]) //指向obj, 3

apply：第一個可以調用函數，第二個可以改變函數內的this指向
apply的參數必須時數組（偽數組）
apply的主要應用，求數數組中的最大值,最小值

var arr = [1, 66, 3, 99, 4]
var max = Math.max.apply(Math, arr) 
var min = Math.min.apply(Math, arr) 
console.log(max, min) //99 1

1. bind方法

bind()方法不會調用函數，但是能改變函數內部this指向

fn.bind(thisArg, arg1, arg2, ...)

• thisArg: 在fn函數運行時指定的this值
• arg1, arg2: 傳遞的其他參數
• 返回由指定的this值和初始化參數改造的原函數拷貝

var obj = {
        name: 'lanfeng'
}
function fn(a, b) {
    console.log(this) 
  console.log(a+b) 
}
fn(1,2)//指向window, 3
var f = fn.bind(obj, 1, 2)
f()

bind: 不會調原來的函數，可以改變this指向，返回的函數是改變this之後產生的新函數
bind的應用： 如果有的函數我們不需要立即調用，但是又想改變這個函數內部的this指向此時用bind

var btn = document.querySelector('button')
//以前的用法
btn.onclick = function() {
  var that = this
    this.disabled = true
  setTimeout(function(){
    that.disabled = false
  }, 3000)
}

// bind用法
btn.onclick = function() {
    this.disabled = true
  setTimeout(function(){
    this.disabled = false
  }.bind(this), 3000)
}

2.3 call apply bind 總結

相同點：
都可以改變函數內部的this指向
區別點：

1. call 和apply 會調用函數，並且改變函數內部的this指向
2. call和apply傳遞的參數不一樣，call傳遞參數形式arg1, arg2, ...形式，apply必須數組形式
3. bind不會調用函數，可以改變函數內部的this指向

主要應用場景：

1. call經常做繼承
2. apply經常跟數組有關係，比如藉助於數學對象實現數組的最大值最小值

3. bind不調用函數，但是還想改變this指向，比如改變定時器的內部this指向
   

   總結

   本篇文章主要分享了javascript的函數定義、用法、this及改變this指向的幾種方法、如想瞭解更多，請掃描二維碼：