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 函式的定義方式

定義函式的方式有三種：

函式宣告
函式運算式
new Function（一般不用）

1.1 函式宣告

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

1.2 函式運算式

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

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

1.3 函式宣告與函式運算式的區別

函式宣告必須有名字，
函式宣告會函式提升，在預決議階段就已創建，宣告前后都可以呼叫，
函式運算式類似于變數賦值，
函式運算式可以沒有名字，例如匿名函式，
函式運算式沒有變數提升，在執行階段創建，必須在運算式執行之后才可以呼叫，

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

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 函式的呼叫方式

普通函式
建構式
物件方法

// 普通函式
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的指向:

普通的函式中this是window
建構式中的this是實體物件
方法中的this是實體物件
原型中的方法中的this是實體物件
定時器中的this是window

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

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/23443.html

標籤：其他

上一篇：JavaScript作用域和作用域鏈知多少

下一篇：01-jquery概述

JavaScript進階教程(4)-函式內this指向解惑call()，apply()，bind()的區別

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 總結

3 函式內 `this` 的指向