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

時間 2020-03-03

原文原文鏈接

1. 函數的定義和調用

1.1 函數的定義方式

函數聲明方式function關鍵字（命名函數）
函數表達式（匿名函數）
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實例對象
javascript

1.2 函數的調用方式

普通函數
對象的方法
構造函數
綁定事件函數
定時器函數
當即執行函數

// 普通函數
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的指向不一樣，通常指向調用者。
調用方式前端

調用方式	this指向
普通函數調用	window
構造函數調用	實例對象原型對象裏面的方法也指向實例對象
對象方法調用	該方法所屬對象
事件綁定方法	綁定事件對象
定時器函數	window
當即執行函數	window

2.2 改變函數內部this指向

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

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的主要做用能夠實現繼承app

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的主要應用，求數數組中的最大值,最小值ui

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
複製代碼

bind方法

bind()方法不會調用函數，可是能改變函數內部this指向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指向此時用bindspa

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)
}
複製代碼