函數(shù)中的apply,call入門介紹

yankeys 發(fā)布于2019-08-23 16:33 / 2213人閱讀

摘要：函數(shù)中的入門牽扯到就要先說(shuō)一下它們和函數(shù)的淵源函數(shù)既是也是對(duì)象它和其它的對(duì)象沒(méi)有什么區(qū)別。但是我們可以通過(guò)和在函數(shù)調(diào)用時(shí)顯示指定所需的值。那就意味這任何函數(shù)可以被任何對(duì)象調(diào)用這才是和的方法的最終目的。否則會(huì)出現(xiàn)數(shù)組元素為的情況值值值值值

函數(shù)中的apply,call入門

??牽扯到apply,call就要先說(shuō)一下它們和函數(shù)的淵源

Javascript函數(shù)既是也是對(duì)象

??它和其它的javascript對(duì)象沒(méi)有什么區(qū)別。并且每個(gè)函數(shù)都包含兩個(gè)非繼承而來(lái)的方法 apply()和call(),這兩個(gè)方法都可以間接的調(diào)用函數(shù)

例如:

function f() {
    console.log(1);
}
f.call(); //1
f.apply(); //1

??并且這兩個(gè)方法都允許顯示的指定函數(shù)調(diào)用后的this值。
??關(guān)于this值,由于this值的是在進(jìn)入執(zhí)行上下文階段被確認(rèn)的，所以this的值讓人琢磨不透。但是我們可以通過(guò)apply()和call() 在函數(shù)調(diào)用時(shí)顯示指定所需的this值。

那么apply和call方法到底是用來(lái)做什么的呢?

??任何函數(shù)在調(diào)用時(shí)都可以被指定this值，作為this指向的對(duì)象的方法來(lái)調(diào)用。

那就意味這任何函數(shù)可以被任何對(duì)象調(diào)用,這才是apply和call的方法的最終目的。

??讓我們來(lái)一個(gè)使用例子來(lái)理解

function Animal() {};
Animal.prototype = {
    constructor: Animal,
    other: function() {
        console.log("這是一只" + this.name);
    }
}
var animal = new Animal();
//定義一個(gè)對(duì)象
var dog = {
    name: "狗"
};

//我的dog對(duì)象想使用Animal函數(shù)的other方法怎么辦，使用call或apply
animal.other.call(dog);
animal.other.apply(dog);

??在上面,我們將animal.other(思考一下它是什么,是的，它本質(zhì)上也是一個(gè)函數(shù))作為dog對(duì)象的方法調(diào)用。接下來(lái),我們運(yùn)用的實(shí)際一些.

//設(shè)置一個(gè)類數(shù)組對(duì)象
var arrLike = {
    0: "我是apply",
    1: "我是call",
    length: 2
}

//將Arrar的slice函數(shù)的this顯式指向arrLike,并將0作為參數(shù)傳入slice函數(shù)
var newArr = Array.prototype.slice.call(arrLike, 0);
//等價(jià)于 
arrLike.slice(0);
console.log(newArr);

??對(duì)于apply()和cal()所有傳入它們的第一個(gè)實(shí)參都會(huì)變?yōu)閠his的值，哪怕傳入的實(shí)參是原始值，null,undefined。而如果傳入的第一個(gè)實(shí)參是undefined和null 在ES3和非嚴(yán)格模式下會(huì)被全局對(duì)象替換掉,而其它的原始值則會(huì)被相應(yīng)的包裝對(duì)象所替代。

??用通俗一點(diǎn)的話來(lái)說(shuō)，Js根本不在乎apply/call 的第一個(gè)參數(shù)是什么,函數(shù)仍然會(huì)被調(diào)用，只不過(guò)調(diào)用會(huì)不會(huì)報(bào)錯(cuò)是另一碼事.

var str = "我是一個(gè)函數(shù)";
//將字符串傳入,但是String對(duì)象無(wú)法調(diào)用slice屬性 報(bào)錯(cuò)
Array.prototype.pop.call(str);

??為了能對(duì)這兩個(gè)方法記憶深刻以及何時(shí)用這兩個(gè)方法，列出一些常用的用法

??首先,就現(xiàn)在來(lái)說(shuō),這兩種方法的性能差異幾乎忽略不記，所以他們之間如何使用呢?

??apply()方法適用于傳入第二個(gè)參數(shù)是有序且參數(shù)不定的就使用apply方法，比如函數(shù)的arguments這個(gè)類數(shù)組對(duì)象就很適合作為參數(shù)傳遞。

function A(a, b, c) {
    console.log(a, b, c);
}

var fn = (function(func, b, c) {
    var args = arguments;
    return () => {
        func.apply(null, args);
    }
}(A, 66, 99));

fn();

再比如說(shuō)給數(shù)組追加元素

var arr1 = [1, 2, 3];
var arr2 = [66, 99, 131];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1);

同樣將arr2數(shù)組作為參數(shù)傳遞。

而對(duì)于無(wú)序,相互之間沒(méi)有什么關(guān)聯(lián)的參數(shù),就使用call()

獲取數(shù)組的最大值和最小值

var arr = [0, 1, 2, 3, 4];

//獲取最大數(shù)
var max1 = Math.max.apply(Math, arr),
    max2 = Math.max.call(Math, 0, 1, 2, 3, 4),

    //獲取最小數(shù)
    min1 = Math.min.apply(Math, arr),
    min2 = Math.min.call(Math, 0, 1, 2, 3, 4);
console.log(max1, max2, min1, min2);

arr本身是沒(méi)有Math方法的,但是我們可以用call或者apply使用其方法

判斷對(duì)象的具體類型

//驗(yàn)證對(duì)象的具體類型
var arr = [];
var type = Object.prototype.toString.call(arr);
console.log(type);// [object Array]

在使用typeof時(shí)得到的結(jié)果都是Object，無(wú)法判斷具體是哪一種類型。于是可以用 Object.prototype.toString.call()來(lái)獲得具體類型。當(dāng)然，前提是toSting()方法沒(méi)有被重寫過(guò)

將類數(shù)組對(duì)象轉(zhuǎn)為真正的數(shù)組，通常我們使用Array.prototype.slice.call() 來(lái)轉(zhuǎn)換

var arrLike = {
    length: 3,
    0: "值1",
    1: "值2",
    2: "值3"
}
var newArr = [].__proto__.slice.call(arrLike);
var type = Object.prototype.toString.call(newArr);
console.log(newArr, type); //[ "值1", "值2", "值3" ] "[object Array]"

當(dāng)然，splice,concat也可以將類數(shù)組對(duì)象轉(zhuǎn)數(shù)組.

這里普及一下類數(shù)組對(duì)象。
通過(guò)索引訪問(wèn)元素,并且擁有l(wèi)ength屬性
也就是說(shuō),需要滿足兩個(gè)條件,1.使用序號(hào)定義屬性，2.擁有l(wèi)ength屬性，屬性值為元素個(gè)數(shù)
在使用序號(hào)定義屬性時(shí),建議從0開始按順序定義屬性。否則會(huì)出現(xiàn)數(shù)組元素為empty的情況

var arrLike = {
    length: 3,
    0: "值1",
    1: "值2",
    3: "值3"
}
var newArr = [].__proto__.slice.call(arrLike);
var type = Object.prototype.toString.call(newArr);
console.log(newArr, type); //[ "值1", "值2", empty] [object Array]

云服務(wù)器 GPU云服務(wù)器 js中的call和apply apply與call的區(qū)別 JS中bind、call和apply的作 Ruby入門介紹

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/103139.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

yankeys

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

搬瓦工：1-10Gbps帶寬CN2 GIA線路季付46.7美元起,香港/美國(guó)機(jī)房

閱讀 2867·2021-09-23 11:44
Hostiger再見(jiàn)夏季促銷：美國(guó)堪薩斯市/土耳其伊斯坦布爾VPS限時(shí)年付7折優(yōu)惠，免機(jī)器設(shè)置費(fèi)

閱讀 1736·2021-09-13 10:24
線上SpringCloud網(wǎng)關(guān)調(diào)用微服務(wù)跨機(jī)房了，咋整？

閱讀 2714·2021-09-08 09:36
前端技術(shù)演進(jìn)（四）：前端三層結(jié)構(gòu)與應(yīng)用

閱讀 1298·2019-08-30 15:54
圖解正方體旋轉(zhuǎn)的translate3D原理

閱讀 2321·2019-08-30 13:54
background-size

閱讀 3382·2019-08-30 10:57
CSS變量（自定義屬性）使用指南 — SitePoint

閱讀 1934·2019-08-29 18:43
【前端Talkking】CSS系列——CSS深入理解之float浮動(dòng)

閱讀 3725·2019-08-29 15:10

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

函數(shù)中的apply,call入門介紹

相關(guān)文章

javasscript - 收藏集 - 掘金

D1.Nodejs 入門篇

深入理解 React 中的上下文 this

javascript this的學(xué)習(xí)總結(jié)

JavaScript中對(duì)this深入了解

發(fā)表評(píng)論

0條評(píng)論

yankeys

男|高級(jí)講師

TA的文章

搬瓦工：1-10Gbps帶寬CN2 GIA線路季付46.7美元起,香港/美國(guó)機(jī)房

Hostiger再見(jiàn)夏季促銷：美國(guó)堪薩斯市/土耳其伊斯坦布爾VPS限時(shí)年付7折優(yōu)惠，免機(jī)器設(shè)置費(fèi)

線上SpringCloud網(wǎng)關(guān)調(diào)用微服務(wù)跨機(jī)房了，咋整？

前端技術(shù)演進(jìn)（四）：前端三層結(jié)構(gòu)與應(yīng)用

圖解正方體旋轉(zhuǎn)的translate3D原理

background-size

CSS變量（自定義屬性）使用指南 — SitePoint

【前端Talkking】CSS系列——CSS深入理解之float浮動(dòng)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

函數(shù)中的apply,call入門介紹

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！