call 和 apply

Pink 發(fā)布于2019-08-26 13:55 / 1086人閱讀

摘要：帶著以下幾個問題和的區(qū)別在哪在什么情況下使用在什么情況下使用有哪些妙用和都可以劫持另外一個對象的方法，繼承另外一個對象的屬性，下面我們看一些他們的不同在哪里下面看代碼是如何體現(xiàn)的方法能接收兩個參數(shù)這個對象的指向?qū)⒋骖惱镏赶蜻@個是數(shù)組，它將

帶著以下幾個問題：
1、call 和 apply 的區(qū)別在哪？
2、call 在什么情況下使用？ apply 在什么情況下使用？
3、apply 有哪些妙用？

apply 和 call 都可以劫持另外一個對象的方法，繼承另外一個對象的屬性，下面我們看一些他們的不同在哪里；
下面看代碼是如何體現(xiàn)的：

Function.apply(obj, arguments)方法能接收兩個參數(shù)
obj：這個對象的 this 指向?qū)⒋鍲unction類里this指向
arguments：這個是數(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 構造函數(shù)中，我們并沒有構造 name 和 age 參數(shù)；
但是實例化對象 boy 中還是有完整的三個參數(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ù)；
由上面兩個示例可以發(fā)現(xiàn) call 和 apply 的區(qū)別僅僅在于參數(shù)形式不同；
apply方法的第二個參數(shù)是由參數(shù)組成的數(shù)組；
而call方法的第二個參數(shù)則是被展開的數(shù)據(jù)，在ES6中也可以是 Function.call(this, ...arguments)，效果一樣;

那么 apply 方法都有哪些方便的功能呢；
（1）Math.max() 這個方法會在所有的參數(shù)中查找到最大的一個；

Math.max(1, 2, 3)   // 3

如果這個方法如果這可以這樣使用那真是太雞肋了；
如果他能傳遞一個數(shù)組，我們在數(shù)組中查找到最大的數(shù)字那不是很好用嗎？

const arr = [1, 2, 3];
Math.max.apply(null, arr)    // 3
// 當然 ES6 出現(xiàn)以后 有了展開運算符 ... 可以獲得一樣的結果
Math.max(...arr);    // 3

當然apply方法不只是這一個地方用的到
加入我們想把兩個數(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)   效果一樣

其實在 ES6 出現(xiàn)以后，好多以往被 apply 可以展開運算的功能基本都被 ...展開運算符代替了；

總結：

大家從上面可以學習到 apply 和 call 的用法，也嘗到了ES6中的甜，但也不要忘記以前但知識哦，語法糖但實現(xiàn)原理也都是源于老版本的JS，基礎尤為重要！

GPU云服務器云服務器 js中的call和apply JS中bind、call和apply的作 apply與call的區(qū)別 apply()

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109831.html

apply 與 call 詳細深入理解

apply 與 call 介紹 function f1(x, y) { console.log(結果是： + (x + y) + this); } f1(10, 20); //函數(shù)的調(diào)用 // 結果是：30[object Window] // 此時的 f1 實際上是當作對象來使用的，對象可以調(diào)用方法 f1.apply(); // 結果是：NaN[object Window] f1.ca...

Hegel_Gu 2019-08-23 17:12 評論0 收藏0
理解JavaScript中的call,apply和bind方法

摘要：輸出的作用與和一樣，都是可以改變函數(shù)運行時上下文，區(qū)別是和在調(diào)用函數(shù)之后會立即執(zhí)行，而方法調(diào)用并改變函數(shù)運行時上下文后，返回一個新的函數(shù)，供我們需要時再調(diào)用。前言 js中的call(), apply()和bind()是Function.prototype下的方法，都是用于改變函數(shù)運行時上下文，最終的返回值是你調(diào)用的方法的返回值，若該方法沒有返回值，則返回undefined。這幾個方法...

chaosx110 2019-08-26 12:23 評論0 收藏0
前端基礎:call,apply,bind的的理解

摘要：和區(qū)別其實他們的作用是一樣的，只是傳遞的參數(shù)不一樣而已。接受個參數(shù)，第一個參數(shù)指定了函數(shù)體內(nèi)對象的指向，第二個參數(shù)為數(shù)組或者一個類數(shù)組。看個栗子一個有意思的事在中，多次是無效的。而則會立即執(zhí)行函數(shù)。背景前兩天在做小程序的需求的時候用到bind的時候才想起自己對這三的東西的了解比較淺薄，這個時候用的時候就有點怕。時候還是要好好學習下，理解下怎么玩。正文先說call 和 apply...

netmou 2019-08-20 17:01 評論0 收藏0
call和apply的區(qū)別和用法

摘要：和的區(qū)別和作用都是把綁定到的作用，即改變的指向，然而唯一的區(qū)別就是傳遞的參數(shù)必須得是數(shù)組的形式傳遞，而則直接連續(xù)參數(shù)傳遞和在什么地方可以用到呢當一個對象需要調(diào)用另外一個對象里面的方法的時候就可以用到和，和可以理解成是繼承另外一個對象的方法， call和apply的區(qū)別 obj.call(thisObj, arg1, arg2, ...);obj.apply(thisObj, [arg1...

ideaa 2019-08-21 17:44 評論0 收藏0
call和apply的區(qū)別和用法

摘要：和的區(qū)別和作用都是把綁定到的作用，即改變的指向，然而唯一的區(qū)別就是傳遞的參數(shù)必須得是數(shù)組的形式傳遞，而則直接連續(xù)參數(shù)傳遞和在什么地方可以用到呢當一個對象需要調(diào)用另外一個對象里面的方法的時候就可以用到和，和可以理解成是繼承另外一個對象的方法， call和apply的區(qū)別 obj.call(thisObj, arg1, arg2, ...);obj.apply(thisObj, [arg1...

animabear 2019-08-01 18:02 評論0 收藏0