函數中的apply,call入門介紹

yankeys 發布于2019-08-23 16:33 / 2162人閱讀

摘要：函數中的入門牽扯到就要先說一下它們和函數的淵源函數既是也是對象它和其它的對象沒有什么區別。但是我們可以通過和在函數調用時顯示指定所需的值。那就意味這任何函數可以被任何對象調用這才是和的方法的最終目的。否則會出現數組元素為的情況值值值值值

函數中的apply,call入門

??牽扯到apply,call就要先說一下它們和函數的淵源

Javascript函數既是也是對象

??它和其它的javascript對象沒有什么區別。并且每個函數都包含兩個非繼承而來的方法 apply()和call(),這兩個方法都可以間接的調用函數

例如:

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

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

那么apply和call方法到底是用來做什么的呢?

??任何函數在調用時都可以被指定this值，作為this指向的對象的方法來調用。

那就意味這任何函數可以被任何對象調用,這才是apply和call的方法的最終目的。

??讓我們來一個使用例子來理解

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

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

??在上面,我們將animal.other(思考一下它是什么,是的，它本質上也是一個函數)作為dog對象的方法調用。接下來,我們運用的實際一些.

//設置一個類數組對象
var arrLike = {
    0: "我是apply",
    1: "我是call",
    length: 2
}

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

??對于apply()和cal()所有傳入它們的第一個實參都會變為this的值，哪怕傳入的實參是原始值，null,undefined。而如果傳入的第一個實參是undefined和null 在ES3和非嚴格模式下會被全局對象替換掉,而其它的原始值則會被相應的包裝對象所替代。

??用通俗一點的話來說，Js根本不在乎apply/call 的第一個參數是什么,函數仍然會被調用，只不過調用會不會報錯是另一碼事.

var str = "我是一個函數";
//將字符串傳入,但是String對象無法調用slice屬性 報錯
Array.prototype.pop.call(str);

??為了能對這兩個方法記憶深刻以及何時用這兩個方法，列出一些常用的用法

??首先,就現在來說,這兩種方法的性能差異幾乎忽略不記，所以他們之間如何使用呢?

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

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();

再比如說給數組追加元素

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

同樣將arr2數組作為參數傳遞。

而對于無序,相互之間沒有什么關聯的參數,就使用call()

獲取數組的最大值和最小值

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

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

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

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

判斷對象的具體類型

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

在使用typeof時得到的結果都是Object，無法判斷具體是哪一種類型。于是可以用 Object.prototype.toString.call()來獲得具體類型。當然，前提是toSting()方法沒有被重寫過

將類數組對象轉為真正的數組，通常我們使用Array.prototype.slice.call() 來轉換

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]"

當然，splice,concat也可以將類數組對象轉數組.

這里普及一下類數組對象。
通過索引訪問元素,并且擁有length屬性
也就是說,需要滿足兩個條件,1.使用序號定義屬性，2.擁有length屬性，屬性值為元素個數
在使用序號定義屬性時,建議從0開始按順序定義屬性。否則會出現數組元素為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]

云服務器 GPU云服務器 js中的call和apply apply與call的區別 JS中bind、call和apply的作 Ruby入門介紹

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

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

javasscript - 收藏集 - 掘金

摘要：跨域請求詳解從繁至簡前端掘金什么是為什么要用是的一種使用模式，可用于解決主流瀏覽器的跨域數據訪問的問題。異步編程入門道典型的面試題前端掘金在界中，開發人員的需求量一直居高不下。 jsonp 跨域請求詳解——從繁至簡 - 前端 - 掘金什么是jsonp？為什么要用jsonp?JSONP(JSON with Padding)是JSON的一種使用模式，可用于解決主流瀏覽器的跨域數據訪問的問題...

Rango 2019-08-20 17:15 評論0 收藏0
D1.Nodejs 入門篇

摘要：上下文切換上下文最直觀的表現就是代碼塊中的，通常在面向對象的編程中用到，來指代當前類生成的對應實例，與其他語言的一致。咦，是干嘛的，有沒有其他方式實現，請自行谷歌。分享第一篇，關于 NodeJS —— Javascript 的常用知識以及如何從 Javascript 開發者過渡到 NodeJS 開發者（不會介紹具體的框架）。在讀本文前，希望你對 javascript 有一些初步的認識...

Rango 2019-08-22 10:56 評論0 收藏0
深入理解 React 中的上下文 this

摘要：寫在前面中的作用域和上下文是這門語言的獨到之處，每個函數有不同的變量上下文和作用域。不可以當作構造函數，也就是說，不可以使用命令，否則會拋出一個錯誤。正是因為它沒有，所以也就不能用作構造函數。寫在前面 JavaScript中的作用域scope 和上下文 context 是這門語言的獨到之處，每個函數有不同的變量上下文和作用域。這些概念是JavaScript中一些強大的設計模式的后盾。...

Magicer 2019-08-21 14:07 評論0 收藏0
javascript this的學習總結

摘要：例如通過，調用時強制把它的綁定到上。箭頭函數問題箭頭函數體內的對象就是定義時所在的對象，而不是使用時所在的對象，固定不變。剛入門javascript，關于this的學習，花了自己挺多的時間，做了比較多的功課，看了一篇又一篇的文章，也看了一些書籍，今天就結合看的那些東西總結下自己所學到的東西，方便留著以后回看，進一步的學習，這篇文章會不斷的更新，不斷的更新自己的想法，現在還是一個入門不...

A Loity 2019-08-21 17:32 評論0 收藏0
JavaScript中對this深入了解

摘要：但是有一個總的原則，那就是指的是調用函數的那個對象。作為構造函數調用如果在一個函數前面帶上來調用，那么背地里將會創建一個鏈接到該函數的成員的新對象，同時會被綁定到那個新對象上。使用或調用方法讓我們構建一個參數數組傳遞給調用函數。讓我們深入探索一下this的具體用法只有了解this用法才算真正入門了 showImg(https://segmentfault.com/img/bVYh1...

April 2019-08-21 17:34 評論0 收藏0