帶你學習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的主要作用可以實作繼承

2. 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

3. 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指向的幾種方法、如想了解更多，請掃描二維碼：

標籤：JavaScript

上一篇：js事件委托target

下一篇：虛擬機與用友U8的安裝