目錄

1 函式的定義方式

1.1 函式宣告

1.2 函式表示式

1.3 函式宣告與函式表示式的區別

1.4 建構函式Function（瞭解即可，一般不用）

2 函式的呼叫方式

3 函式內 this 的指向

4 call、apply、bind

4.1 call，apply

4.1.1 新的函式呼叫方式apply和call方法

4.1.2 apply和call可以改變this的指向

4.2 call，apply使用

4.3 bind

4.4 總結

5 函式的其它成員(瞭解)

6 高階函式

6.1 作為引數

6.2 作為返回值

7 總結

---

1 函式的定義方式

定義函式的方式有三種：

1. 函式宣告
2. 函式表示式
3. new Function（一般不用）

1.1 函式宣告

// 函式的宣告
function fn() {
	console.log("我是JS中的一等公民-函式!!!哈哈");
}
fn();

1.2 函式表示式

函式表示式就是將一個匿名函式賦值給一個變數。函式表示式必須先宣告，再呼叫。

// 函式表示式
var fn = function() {
	console.log("我是JS中的一等公民-函式!!!哈哈");
};
fn();

1.3 函式宣告與函式表示式的區別

1. 函式宣告必須有名字。
2. 函式宣告會函式提升，在預解析階段就已建立，宣告前後都可以呼叫。
3. 函式表示式類似於變數賦值。
4. 函式表示式可以沒有名字，例如匿名函式。
5. 函式表示式沒有變數提升，在執行階段建立，必須在表示式執行之後才可以呼叫。

下面是一個根據條件定義函式的例子：

if (true) {
  function f () {
    console.log(1)
  }
} else {
  function f () {
    console.log(2)
  }
}

以上程式碼執行結果在不同瀏覽器中結果不一致。我們可以使用函式表示式解決上面的問題：

var f

if (true) {
  f = function () {
    console.log(1)
  }
} else {
  f = function () {
    console.log(2)
  }
}

函式宣告如果放在if-else的語句中,在IE8的瀏覽器中會出現問題，所以為了更好的相容性我們以後最好用函式表示式,不用函式宣告的方式。

1.4 建構函式Function（瞭解即可，一般不用）

在前面的學習中我們瞭解到函式也是物件。注意：函式是物件，物件不一定是函式，物件中有__proto__原型，函式中有prototype原型，如果一個東西里面有prototype，又有__proto__，說明它是函式，也是物件。

function F1() {}

console.dir(F1); // F1裡面有prototype,又有__proto__,說明是函式,也是物件

console.dir(Math); // Math中有__proto__,但是沒有prorotype,說明Math不是函式

物件都是由建構函式建立出來的，函式既然是物件，建立它的建構函式又是什麼呢？事實上所有的函式實際上都是由Function建構函式建立出來的例項物件。

所以我們可以使用Function建構函式建立函式。

語法：new Function(arg1,arg2,arg3..,body);
arg是任意引數，字串型別的。body是函式體。

// 所有的函式實際上都是Function的建構函式建立出來的例項物件
var f1 = new Function("num1", "num2", "return num1+num2");
console.log(f1(10, 20));
console.log(f1.__proto__ == Function.prototype);

// 所以,函式實際上也是物件
console.dir(f1);
console.dir(Function);

2 函式的呼叫方式

1. 普通函式
2. 建構函式
3. 物件方法

// 普通函式
function f1() {
	console.log("我是普通函式");
}
f1();

// 建構函式---通過new 來呼叫,建立物件
function F1() {
	console.log("我是建構函式");
}
var f = new F1();

// 物件的方法
function Person() {
	this.play = function() {
		console.log("我是物件中的方法");
	};
}
var per = new Person();
per.play();

3 函式內 this 的指向

函式的呼叫方式決定了 this 指向的不同：

呼叫方式	非嚴格模式	備註
普通函式呼叫	window	嚴格模式下是 undefined
建構函式呼叫	例項物件	原型方法中 this 也是例項物件
物件方法呼叫	該方法所屬物件	緊挨著的物件
事件繫結方法	繫結事件物件
定時器函式	window

// 普通函式
function f1() {
	console.log(this); // window
}
f1();

// 建構函式
function Person() {
	console.log(this); // Person
	// 物件的方法
	this.sayHi = function() {
		console.log(this); // Person
	};
}
// 原型中的方法
Person.prototype.eat = function() {
	console.log(this); // Person
};
var per = new Person();
console.log(per); // Person
per.sayHi();
per.eat();

// 定時器中的this
setInterval(function() {
	console.log(this); // window
}, 1000);

4 call、apply、bind

瞭解了函式 this 的指向之後，我們知道在一些情況下我們為了使用某種特定環境的 this 引用，需要採用一些特殊手段來處理，例如我們經常在定時器外部備份 this 引用，然後在定時器函式內部使用外部 this 的引用。
然而實際上 JavaScript 內部已經專門為我們提供了一些函式方法，用來幫我們更優雅的處理函式內部 this 指向問題。這就是接下來我們要學習的 call、apply、bind 三個函式方法。call()、apply()、bind()這三個方法都是是用來改變this的指向的。

4.1 call，apply

call() 方法呼叫一個函式, 其具有一個指定的 this 值和分別地提供的引數(引數的列表)。
apply() 方法呼叫一個函式, 其具有一個指定的 this 值，以及作為一個陣列（或類似陣列的物件）提供的引數。

注意：call() 和 apply() 方法類似，只有一個區別，就是 call() 方法接受的是若干個引數的列表，而 apply() 方法接受的是一個包含多個引數的陣列。

call語法：

fun.call(thisArg[, arg1[, arg2[, ...]]])

call引數：

• thisArg

  • 在 fun 函式執行時指定的 this 值
  • 如果指定了 null 或者 undefined 則內部 this 指向 window

• arg1, arg2, ...

  • 指定的引數列表

apply語法：

fun.apply(thisArg, [argsArray])

apply引數：

• thisArg
• argsArray

apply() 與 call() 相似，不同之處在於提供引數的方式。
apply() 使用引數陣列而不是一組引數列表。例如：

fun.apply(this, ['eat', 'bananas'])

4.1.1 新的函式呼叫方式apply和call方法

function f1(x, y) {
	console.log("結果是:" + (x + y) + this);
	return "666";
}
f1(10, 20); // 函式的呼叫

console.log("========");

// apply和call方法也是函式的呼叫的方式
// 此時的f1實際上是當成物件來使用的,物件可以呼叫方法
// apply和call方法中如果沒有傳入引數,或者是傳入的是null,那麼呼叫該方法的函式物件中的this就是預設的window
f1.apply(null, [10, 20]);
f1.call(null, 10, 20);

// apply和call都可以讓函式或者方法來呼叫,傳入引數和函式自己呼叫的寫法不一樣,但是效果是一樣的
var result1 = f1.apply(null, [10, 20]);
var result2 = f1.call(null, 10, 20);
console.log(result1);
console.log(result2);

4.1.2 apply和call可以改變this的指向

// 通過apply和call改變this的指向
function Person(name, sex) {
	this.name = name;
	this.sex = sex;
}
//通過原型新增方法
Person.prototype.sayHi = function(x, y) {
	console.log("您好啊:" + this.name);
	return x + y;
};
var per = new Person("小三", "男");
var r1 = per.sayHi(10, 20);

console.log("==============");

function Student(name, age) {
	this.name = name;
	this.age = age;
}
var stu = new Student("小舞", 18);
var r2 = per.sayHi.apply(stu, [10, 20]);
var r3 = per.sayHi.call(stu, 10, 20);

console.log(r1);
console.log(r2);
console.log(r3);

4.2 call，apply使用

apply和call都可以改變this的指向。呼叫函式的時候，改變this的指向：

// 函式的呼叫,改變this的指向
function f1(x, y) {
	console.log((x + y) + ":===>" + this);
	return "函式的返回值";
}
//apply和call呼叫
var r1 = f1.apply(null, [1, 2]); // 此時f1中的this是window
console.log(r1);
var r2 = f1.call(null, 1, 2); // 此時f1中的this是window
console.log(r2);
console.log("=============>");
//改變this的指向
var obj = {
	sex: "男"
};
// 本來f1函式是window物件的,但是傳入obj之後,f1的this此時就是obj物件
var r3 = f1.apply(obj, [1, 2]); //此時f1中的this是obj
console.log(r3);
var r4 = f1.call(obj, 1, 2); //此時f1中的this是obj
console.log(r4);

呼叫方法的時候，改變this的指向：

//方法改變this的指向
function Person(age) {
	this.age = age;
}
Person.prototype.sayHi = function(x, y) {
	console.log((x + y) + ":====>" + this.age); //當前例項物件
};

function Student(age) {
	this.age = age;
}
var per = new Person(10); // Person例項物件
var stu = new Student(100); // Student例項物件
// sayHi方法是per例項物件的
per.sayHi(10, 20);
per.sayHi.apply(stu, [10, 20]);
per.sayHi.call(stu, 10, 20);

總結

apply的使用語法：
1 函式名字.apply(物件,[引數1,引數2,...]);
2 方法名字.apply(物件,[引數1,引數2,...]);
call的使用語法
1 函式名字.call(物件,引數1,引數2,...);
2 方法名字.call(物件,引數1,引數2,...);
它們的作用都是改變this的指向，不同的地方是引數傳遞的方式不一樣。

如果想使用別的物件的方法，並且希望這個方法是當前物件的，就可以使用apply或者是call方法改變this的指向。

4.3 bind

bind() 函式會建立一個新函式（稱為繫結函式），新函式與被調函式（繫結函式的目標函式）具有相同的函式體（在 ECMAScript 5 規範中內建的call屬性）。當目標函式被呼叫時 this 值繫結到 bind() 的第一個引數，該引數不能被重寫。繫結函式被呼叫時，bind() 也可以接受預設的引數提供給原函式。一個繫結函式也能使用new操作符建立物件：這種行為就像把原函式當成構造器。提供的 this 值被忽略，同時呼叫時的引數被提供給模擬函式。
bind方法是複製的意思，本質是複製一個新函式，引數可以在複製的時候傳進去，也可以在複製之後呼叫的時候傳入進去。apply和call是呼叫的時候改變this指向，bind方法，是複製一份的時候，改變了this的指向。

語法：

fun.bind(thisArg[, arg1[, arg2[, ...]]])

引數：

• thisArg

  • 當繫結函式被呼叫時，該引數會作為原函式執行時的 this 指向。當使用new 操作符呼叫繫結函式時，該引數無效。

• arg1, arg2, ...

  • 當繫結函式被呼叫時，這些引數將置於實參之前傳遞給被繫結的方法。

返回值：

返回由指定的this值和初始化引數改造的原函式的拷貝。

示例1：

function Person(name) {
	this.name = name;
}
Person.prototype.play = function() {
	console.log(this + "====>" + this.name);
};

function Student(name) {
	this.name = name;
}
var per = new Person("人");
var stu = new Student("學生");
per.play();
// 複製了一個新的play方法
var ff = per.play.bind(stu);
ff();

示例2：

//通過物件,呼叫方法,產生隨機數
function ShowRandom() {
	//1-10的隨機數
	this.number = parseInt(Math.random() * 10 + 1);
}
//新增原型方法
ShowRandom.prototype.show = function() {
	//改變了定時器中的this的指向了
	window.setTimeout(function() {
		//本來應該是window, 現在是例項物件了
		//顯示隨機數
		console.log(this.number);
	}.bind(this), 1000);
};
//例項物件
var sr = new ShowRandom();
//呼叫方法,輸出隨機數字
sr.show();

4.4 總結

• call 和 apply 特性一樣

  • 都是用來呼叫函式，而且是立即呼叫
  • 但是可以在呼叫函式的同時，通過第一個引數指定函式內部 this 的指向
  • call 呼叫的時候，引數必須以引數列表的形式進行傳遞，也就是以逗號分隔的方式依次傳遞即可
  • apply 呼叫的時候，引數必須是一個陣列，然後在執行的時候，會將陣列內部的元素一個一個拿出來，與形參一一對應進行傳遞
  • 如果第一個引數指定了 null 或者 undefined 則內部 this 指向 window

• bind

  • 可以用來指定內部 this 的指向，然後生成一個改變了 this 指向的新的函式
  • 它和 call、apply 最大的區別是：bind 不會呼叫
  • bind 支援傳遞引數，它的傳參方式比較特殊，一共有兩個位置可以傳遞
    • 在 bind 的同時，以引數列表的形式進行傳遞
    • 在呼叫的時候，以引數列表的形式進行傳遞 
    • 那到底以 bind 的時候傳遞的引數為準呢?還是以呼叫的時候傳遞的引數為準呢?
    • 兩者合併：bind 的時候傳遞的引數和呼叫的時候傳遞的引數會合併到一起，傳遞到函式內部。

5 函式的其它成員(瞭解)

• arguments
  • 實參集合
• caller
  • 函式的呼叫者
• length
  • 函式定義的時候形參的個數
• name
  • 函式的名字,name屬性是隻讀的,不能修改

function fn(x, y, z) {
  console.log(fn.length) // => 形參的個數
  console.log(arguments) // 偽陣列實參引數集合
  console.log(arguments.callee === fn) // 函式本身
  console.log(fn.caller) // 函式的呼叫者
  console.log(fn.name) // => 函式的名字
}

function f() {
  fn(10, 20, 30)
}

f()

6 高階函式

函式可以作為引數，也可以作為返回值。

6.1 作為引數

函式是可以作為引數使用，函式作為引數的時候,如果是命名函式,那麼只傳入命名函式的名字,沒有括號。

function f1(fn) {
	console.log("我是函式f1");
	fn(); // fn是一個函式
}

//傳入匿名函式
f1(function() {
	console.log("我是匿名函式");
});
// 傳入命名函式
function f2() {
	console.log("我是函式f2");
}
f1(f2);

作為引數排序案例：

var arr = [1, 100, 20, 200, 40, 50, 120, 10];
//排序---函式作為引數使用,匿名函式作為sort方法的引數使用,此時的匿名函式中有兩個引數,
arr.sort(function(obj1, obj2) {
	if (obj1 > obj2) {
		return -1;
	} else if (obj1 == obj2) {
		return 0;
	} else {
		return 1;
	}
});
console.log(arr);

6.2 作為返回值

function f1() {
	console.log("函式f1");
	return function() {
		console.log("我是函式,此時作為返回值使用");
	}

}

var ff = f1();
ff();

作為返回值排序案例： 

// 排序,每個檔案都有名字，大小,時間,可以按照某個屬性的值進行排序
// 三個檔案,檔案有名字,大小,建立時間
function File(name, size, time) {
	this.name = name; // 名字
	this.size = size; // 大小
	this.time = time; // 建立時間
}
var f1 = new File("jack.avi", "400M", "1999-12-12");
var f2 = new File("rose.avi", "600M", "2020-12-12");
var f3 = new File("albert.avi", "800M", "2010-12-12");
var arr = [f1, f2, f3];

function fn(attr) {
	// 函式作為返回值
	return function getSort(obj1, obj2) {
		if (obj1[attr] > obj2[attr]) {
			return 1;
		} else if (obj1[attr] == obj2[attr]) {
			return 0;
		} else {
			return -1;
		}
	}
}
console.log("按照名字排序:**********");
//  按照名字排序
var ff = fn("name");
// 函式作為引數
arr.sort(ff);
for (var i = 0; i < arr.length; i++) {
	console.log(arr[i].name + "====>" + arr[i].size + "===>" + arr[i].time);
}

console.log("按照大小排序:**********");
// 按照大小排序
var ff = fn("size");
// 函式作為引數
arr.sort(ff);
for (var i = 0; i < arr.length; i++) {
	console.log(arr[i].name + "====>" + arr[i].size + "===>" + arr[i].time);
}

console.log("按照建立時間排序:**********");
// 按照建立時間排序
var ff = fn("time");
// 函式作為引數
arr.sort(ff);
for (var i = 0; i < arr.length; i++) {
	console.log(arr[i].name + "====>" + arr[i].size + "===>" + arr[i].time);
}

7 總結

函式中的this的指向:

1. 普通的函式中this是window
2. 建構函式中的this是例項物件
3. 方法中的this是例項物件
4. 原型中的方法中的this是例項物件
5. 定時器中的this是window

函式是物件，物件不一定是函式，物件中有__proto__ 函式中有prototype。apply，call，bind方法是用來改變this指向的。apply和call是呼叫方法的時候改變this指向，bind方法是複製一個新的函式，改變this的指向。函式可以作為引數使用，也可以作為返回值使用。函式作為引數使用的時候，這個函式可以是匿名函式，也可以是命名函式。

今天的學習就到這裡了，你可以使用今天學習的技巧來改善一下你曾經的程式碼，如果想繼續提高，歡迎關注我，每天學習進步一點點，就是領先的開始。如果覺得本文對你有幫助的話，歡迎轉發，評論，點贊！！！