call,apply,bind

Dongjie_Liu 發(fā)布于2019-08-26 10:11 / 684人閱讀

摘要：介紹的一大特點(diǎn)是，函數(shù)存在定義時(shí)上下文和運(yùn)行時(shí)上下文以及上下文是可以改變的這樣的概念，都是為了改變函數(shù)運(yùn)行時(shí)上下文存在的，既改變函數(shù)體內(nèi)部的指向。更改函數(shù)的并返回新函數(shù)，可以傳參。在函數(shù)運(yùn)行時(shí)使用的值。

1.介紹

javascript的一大特點(diǎn)是，函數(shù)存在[定義時(shí)上下文]和[運(yùn)行時(shí)上下文],以及[上下文是可以改變的]這樣的概念，apply,call 都是為了改變函數(shù)運(yùn)行時(shí)上下文(context)存在的，既改變函數(shù)體內(nèi)部 this 的指向。bind更改函數(shù)的this并返回新函數(shù)，可以傳參。

Function.prototype.apply()

Function.prototype.call()

Function.prototype.bind()

2. apply

語(yǔ)法

func.apply(thisArg,[argsArray])

描述

在調(diào)用一個(gè)存在的函數(shù)時(shí)候，你可以為其指定一個(gè) this 對(duì)象，this 指當(dāng)前對(duì)象，也就是正在調(diào)用這個(gè)函數(shù)的對(duì)象。使用apply , 你可以只寫一次這個(gè)方法，然后在另外一個(gè)對(duì)象中繼承它，而不是用在新對(duì)象中重復(fù)寫該方法。

參數(shù)

thisArg ：可選的。在函數(shù)func運(yùn)行時(shí)使用this的值。注意，this可能不是該方法看到的實(shí)際的值:如果這個(gè)函數(shù)在 非嚴(yán)格模式 下，則指定為 null 或 undefined 時(shí)，會(huì)自動(dòng)替換為指向 全局對(duì)象 ， 原始值會(huì)被包裝。

argsArray ：可選的。一個(gè)數(shù)組 或 類數(shù)組 對(duì)象，其中的數(shù)組元素將作為多帶帶的的參數(shù)傳給 func 函數(shù)，如果改參數(shù)的值為 null 或者 undefined,則表示不需要傳入任何參數(shù)。

案列

1.用apply將數(shù)組添加到了一個(gè)數(shù)組

var arr1 = [1,2]
arr1.push(3);
arr1.push(4,5);  
console.log(arr1)  // [1,2,3,4,5]
var arr2 = [6,7,8]
arr1.push(arr2);
console.log(arr1) // [1, 2, 3, 4, 5, Array(3)]

我們可以使用push 將元素追加到數(shù)組中。并且，因?yàn)閜ush接受可變數(shù)量的參數(shù)，我們也可以一次推送多個(gè)元素。但是,如果我們傳遞一個(gè)數(shù)組來(lái)推送，它實(shí)際上會(huì)將該數(shù)組作為單個(gè)元素添加，而不是多帶帶添加元素，因此我們得到的是一個(gè)數(shù)組內(nèi)的數(shù)組。

var arr1 = [1,2,3];
var arr2 = [2,3,4];
var arr3 = arr1.concat(arr2);
console.log(arr3); // [1,2,3,2,3,4]

concat 確實(shí)具有我們想要的效果，但它并不是附加到現(xiàn)有數(shù)組，而是創(chuàng)建并返回一個(gè)新數(shù)組，但是我們想要附加到我們現(xiàn)有的陣列...那么現(xiàn)在呢？寫一個(gè)循環(huán)？當(dāng)然不是，我們可以利用apply 實(shí)現(xiàn)。

var array = ["a","b"];
var element = [0,1,2];
array.push.apply(array,element);
console.log(array);  // ["a","b",0,1,2]

2.使用apply和內(nèi)置函數(shù)
聰明的apply用法允許你在某些本來(lái)需要寫成遍歷數(shù)組變量的任務(wù)中使用內(nèi)建的函數(shù)。如下面的利用Math.max/Maxt.min 求一個(gè)數(shù)組中的最大/最小值。

var number = [5,6,2,3,7];
var max = Math.max.apply(null,number)  
var min = Math.min.apply(null,number)
基本等同于
Math.max(number[0],number[1],...) 或 Math.max(5,6,...)