摘要:帶著以下幾個(gè)問(wèn)題和的區(qū)別在哪在什么情況下使用在什么情況下使用有哪些妙用和都可以劫持另外一個(gè)對(duì)象的方法,繼承另外一個(gè)對(duì)象的屬性,下面我們看一些他們的不同在哪里下面看代碼是如何體現(xiàn)的方法能接收兩個(gè)參數(shù)這個(gè)對(duì)象的指向?qū)⒋骖?lèi)里指向這個(gè)是數(shù)組,它將
帶著以下幾個(gè)問(wèn)題:
1、call 和 apply 的區(qū)別在哪?
2、call 在什么情況下使用? apply 在什么情況下使用?
3、apply 有哪些妙用?
apply 和 call 都可以劫持另外一個(gè)對(duì)象的方法,繼承另外一個(gè)對(duì)象的屬性,下面我們看一些他們的不同在哪里;
下面看代碼是如何體現(xiàn)的:
Function.apply(obj, arguments)方法能接收兩個(gè)參數(shù) obj:這個(gè)對(duì)象的 this 指向?qū)⒋鍲unction類(lèi)里this指向 arguments:這個(gè)是數(shù)組,它將作為參數(shù)傳給Function(args-->arguments)
apply 示例:
function Person(name, age) { this.name = name; this.age = age; } function Boy(name, age, job) { Person.apply(this, arguments); this.job = job; } const boy = new Boy("Phoenix", 27, "programmer"); console.log(boy.name, boy.age, boy.job); // Phoenix 27 programmer
上面代碼中 Boy 構(gòu)造函數(shù)中,我們并沒(méi)有構(gòu)造 name 和 age 參數(shù);
但是實(shí)例化對(duì)象 boy 中還是有完整的三個(gè)參數(shù),這就是 apply 的魅理。
call 示例:
function Person(name, age) { this.name = name; this.age = age; } function Boy(name, age, job) { Person.call(this, name, age); this.job = job; } const boy = new Boy("Phoenix", 27, "programmer"); console.log(boy.name, boy.age, boy.job); // Phoenix 27 programmer
上面的 Boy 中的name 和 age 參數(shù)指向的都是 Person 中的 name 和 age 參數(shù);
由上面兩個(gè)示例可以發(fā)現(xiàn) call 和 apply 的區(qū)別僅僅在于參數(shù)形式不同;
apply方法的第二個(gè)參數(shù)是由參數(shù)組成的數(shù)組;
而call方法的第二個(gè)參數(shù)則是被展開(kāi)的數(shù)據(jù),在ES6中也可以是 Function.call(this, ...arguments),效果一樣;
那么 apply 方法都有哪些方便的功能呢;
(1)Math.max() 這個(gè)方法會(huì)在所有的參數(shù)中查找到最大的一個(gè);
Math.max(1, 2, 3) // 3
如果這個(gè)方法如果這可以這樣使用那真是太雞肋了;
如果他能傳遞一個(gè)數(shù)組,我們?cè)跀?shù)組中查找到最大的數(shù)字那不是很好用嗎?
const arr = [1, 2, 3]; Math.max.apply(null, arr) // 3 // 當(dāng)然 ES6 出現(xiàn)以后 有了展開(kāi)運(yùn)算符 ... 可以獲得一樣的結(jié)果 Math.max(...arr); // 3
當(dāng)然apply方法不只是這一個(gè)地方用的到
加入我們想把兩個(gè)數(shù)組整合到一起;
(2)Array.prototype.push.apply(arr1, arr2);
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; Array.prototype.push.apply(arr1, arr2); console.log(arr1); // [1, 2, 3, 4, 5, 6] // ES6 以后 // arr1.push(...arr2) 效果一樣
其實(shí)在 ES6 出現(xiàn)以后,好多以往被 apply 可以展開(kāi)運(yùn)算的功能基本都被 ...展開(kāi)運(yùn)算符代替了;
總結(jié):
大家從上面可以學(xué)習(xí)到 apply 和 call 的用法,也嘗到了ES6中的甜,但也不要忘記以前但知識(shí)哦,語(yǔ)法糖但實(shí)現(xiàn)原理也都是源于老版本的JS,基礎(chǔ)尤為重要!
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/109831.html
apply 與 call 介紹 function f1(x, y) { console.log(結(jié)果是: + (x + y) + this); } f1(10, 20); //函數(shù)的調(diào)用 // 結(jié)果是:30[object Window] // 此時(shí)的 f1 實(shí)際上是當(dāng)作對(duì)象來(lái)使用的,對(duì)象可以調(diào)用方法 f1.apply(); // 結(jié)果是:NaN[object Window] f1.ca...
摘要:輸出的作用與和一樣,都是可以改變函數(shù)運(yùn)行時(shí)上下文,區(qū)別是和在調(diào)用函數(shù)之后會(huì)立即執(zhí)行,而方法調(diào)用并改變函數(shù)運(yùn)行時(shí)上下文后,返回一個(gè)新的函數(shù),供我們需要時(shí)再調(diào)用。 前言 js中的call(), apply()和bind()是Function.prototype下的方法,都是用于改變函數(shù)運(yùn)行時(shí)上下文,最終的返回值是你調(diào)用的方法的返回值,若該方法沒(méi)有返回值,則返回undefined。這幾個(gè)方法...
摘要:和區(qū)別其實(shí)他們的作用是一樣的,只是傳遞的參數(shù)不一樣而已。接受個(gè)參數(shù),第一個(gè)參數(shù)指定了函數(shù)體內(nèi)對(duì)象的指向,第二個(gè)參數(shù)為數(shù)組或者一個(gè)類(lèi)數(shù)組。看個(gè)栗子一個(gè)有意思的事在中,多次是無(wú)效的。而則會(huì)立即執(zhí)行函數(shù)。 背景 前兩天在做小程序的需求的時(shí)候用到bind的時(shí)候才想起自己對(duì)這三的東西的了解比較淺薄,這個(gè)時(shí)候用的時(shí)候就有點(diǎn)怕。時(shí)候還是要好好學(xué)習(xí)下,理解下怎么玩。 正文 先說(shuō)call 和 apply...
摘要:和的區(qū)別和作用都是把綁定到的作用,即改變的指向,然而唯一的區(qū)別就是傳遞的參數(shù)必須得是數(shù)組的形式傳遞,而則直接連續(xù)參數(shù)傳遞和在什么地方可以用到呢當(dāng)一個(gè)對(duì)象需要調(diào)用另外一個(gè)對(duì)象里面的方法的時(shí)候就可以用到和,和可以理解成是繼承另外一個(gè)對(duì)象的方法, call和apply的區(qū)別 obj.call(thisObj, arg1, arg2, ...);obj.apply(thisObj, [arg1...
摘要:和的區(qū)別和作用都是把綁定到的作用,即改變的指向,然而唯一的區(qū)別就是傳遞的參數(shù)必須得是數(shù)組的形式傳遞,而則直接連續(xù)參數(shù)傳遞和在什么地方可以用到呢當(dāng)一個(gè)對(duì)象需要調(diào)用另外一個(gè)對(duì)象里面的方法的時(shí)候就可以用到和,和可以理解成是繼承另外一個(gè)對(duì)象的方法, call和apply的區(qū)別 obj.call(thisObj, arg1, arg2, ...);obj.apply(thisObj, [arg1...
閱讀 1594·2021-11-24 09:38
閱讀 3440·2021-11-18 10:02
閱讀 3322·2021-09-22 15:29
閱讀 3020·2021-09-22 15:15
閱讀 1125·2021-09-13 10:25
閱讀 1943·2021-08-17 10:13
閱讀 2101·2021-08-04 11:13
閱讀 2043·2019-08-30 15:54