摘要:函數(shù)中的入門牽扯到就要先說一下它們和函數(shù)的淵源函數(shù)既是也是對象它和其它的對象沒有什么區(qū)別。但是我們可以通過和在函數(shù)調(diào)用時顯示指定所需的值。那就意味這任何函數(shù)可以被任何對象調(diào)用這才是和的方法的最終目的。否則會出現(xiàn)數(shù)組元素為的情況值值值值值
函數(shù)中的apply,call入門
??牽扯到apply,call就要先說一下它們和函數(shù)的淵源
Javascript函數(shù)既是也是對象
??它和其它的javascript對象沒有什么區(qū)別。并且每個函數(shù)都包含兩個非繼承而來的方法 apply()和call(),這兩個方法都可以間接的調(diào)用函數(shù)
例如:
function f() { console.log(1); } f.call(); //1 f.apply(); //1
??并且這兩個方法都允許顯示的指定函數(shù)調(diào)用后的this值。
??關(guān)于this值,由于this值的是在進(jìn)入執(zhí)行上下文階段被確認(rèn)的,所以this的值讓人琢磨不透。但是我們可以通過apply()和call() 在函數(shù)調(diào)用時顯示指定所需的this值。
??任何函數(shù)在調(diào)用時都可以被指定this值,作為this指向的對象的方法來調(diào)用。
那就意味這任何函數(shù)可以被任何對象調(diào)用,這才是apply和call的方法的最終目的。
??讓我們來一個使用例子來理解
function Animal() {}; Animal.prototype = { constructor: Animal, other: function() { console.log("這是一只" + this.name); } } var animal = new Animal(); //定義一個對象 var dog = { name: "狗" }; //我的dog對象想使用Animal函數(shù)的other方法怎么辦,使用call或apply animal.other.call(dog); animal.other.apply(dog);
??在上面,我們將animal.other(思考一下它是什么,是的,它本質(zhì)上也是一個函數(shù))作為dog對象的方法調(diào)用。接下來,我們運(yùn)用的實(shí)際一些.
//設(shè)置一個類數(shù)組對象 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); //等價于 arrLike.slice(0); console.log(newArr);
??對于apply()和cal()所有傳入它們的第一個實(shí)參都會變?yōu)閠his的值,哪怕傳入的實(shí)參是原始值,null,undefined。而如果傳入的第一個實(shí)參是undefined和null 在ES3和非嚴(yán)格模式下會被全局對象替換掉,而其它的原始值則會被相應(yīng)的包裝對象所替代。
??用通俗一點(diǎn)的話來說,Js根本不在乎apply/call 的第一個參數(shù)是什么,函數(shù)仍然會被調(diào)用,只不過調(diào)用會不會報錯是另一碼事.
var str = "我是一個函數(shù)"; //將字符串傳入,但是String對象無法調(diào)用slice屬性 報錯 Array.prototype.pop.call(str);
??為了能對這兩個方法記憶深刻以及何時用這兩個方法,列出一些常用的用法
??首先,就現(xiàn)在來說,這兩種方法的性能差異幾乎忽略不記,所以他們之間如何使用呢?
??apply()方法適用于傳入第二個參數(shù)是有序且參數(shù)不定的就使用apply方法,比如函數(shù)的arguments這個類數(shù)組對象就很適合作為參數(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();
再比如說給數(shù)組追加元素
var arr1 = [1, 2, 3]; var arr2 = [66, 99, 131]; Array.prototype.push.apply(arr1, arr2); console.log(arr1);
同樣將arr2數(shù)組作為參數(shù)傳遞。
而對于無序,相互之間沒有什么關(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本身是沒有Math方法的,但是我們可以用call或者apply使用其方法
判斷對象的具體類型
//驗(yàn)證對象的具體類型 var arr = []; var type = Object.prototype.toString.call(arr); console.log(type);// [object Array]
在使用typeof時得到的結(jié)果都是Object,無法判斷具體是哪一種類型。于是可以用 Object.prototype.toString.call()來獲得具體類型。當(dāng)然,前提是toSting()方法沒有被重寫過
將類數(shù)組對象轉(zhuǎn)為真正的數(shù)組,通常我們使用Array.prototype.slice.call() 來轉(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ù)組對象轉(zhuǎn)數(shù)組.
這里普及一下類數(shù)組對象。
通過索引訪問元素,并且擁有l(wèi)ength屬性
也就是說,需要滿足兩個條件,1.使用序號定義屬性,2.擁有l(wèi)ength屬性,屬性值為元素個數(shù)
在使用序號定義屬性時,建議從0開始按順序定義屬性。否則會出現(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]
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/103139.html
摘要:跨域請求詳解從繁至簡前端掘金什么是為什么要用是的一種使用模式,可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。異步編程入門道典型的面試題前端掘金在界中,開發(fā)人員的需求量一直居高不下。 jsonp 跨域請求詳解——從繁至簡 - 前端 - 掘金什么是jsonp?為什么要用jsonp?JSONP(JSON with Padding)是JSON的一種使用模式,可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題...
摘要:上下文切換上下文最直觀的表現(xiàn)就是代碼塊中的,通常在面向?qū)ο蟮木幊讨杏玫剑瑏碇复?dāng)前類生成的對應(yīng)實(shí)例,與其他語言的一致。咦,是干嘛的,有沒有其他方式實(shí)現(xiàn),請自行谷歌。 分享第一篇,關(guān)于 NodeJS —— Javascript 的常用知識以及如何從 Javascript 開發(fā)者過渡到 NodeJS 開發(fā)者(不會介紹具體的框架)。在讀本文前,希望你對 javascript 有一些初步的認(rèn)識...
摘要:寫在前面中的作用域和上下文是這門語言的獨(dú)到之處,每個函數(shù)有不同的變量上下文和作用域。不可以當(dāng)作構(gòu)造函數(shù),也就是說,不可以使用命令,否則會拋出一個錯誤。正是因?yàn)樗鼪]有,所以也就不能用作構(gòu)造函數(shù)。 寫在前面 JavaScript中的作用域scope 和上下文 context 是這門語言的獨(dú)到之處,每個函數(shù)有不同的變量上下文和作用域。這些概念是JavaScript中一些強(qiáng)大的設(shè)計模式的后盾。...
摘要:例如通過,調(diào)用時強(qiáng)制把它的綁定到上。箭頭函數(shù)問題箭頭函數(shù)體內(nèi)的對象就是定義時所在的對象,而不是使用時所在的對象,固定不變。 剛?cè)腴Tjavascript,關(guān)于this的學(xué)習(xí),花了自己挺多的時間,做了比較多的功課,看了一篇又一篇的文章,也看了一些書籍,今天就結(jié)合看的那些東西總結(jié)下自己所學(xué)到的東西,方便留著以后回看,進(jìn)一步的學(xué)習(xí),這篇文章會不斷的更新,不斷的更新自己的想法,現(xiàn)在還是一個入門不...
摘要:但是有一個總的原則,那就是指的是調(diào)用函數(shù)的那個對象。作為構(gòu)造函數(shù)調(diào)用如果在一個函數(shù)前面帶上來調(diào)用,那么背地里將會創(chuàng)建一個鏈接到該函數(shù)的成員的新對象,同時會被綁定到那個新對象上。使用或調(diào)用方法讓我們構(gòu)建一個參數(shù)數(shù)組傳遞給調(diào)用函數(shù)。 讓我們深入探索一下this的具體用法 只有了解this用法才算真正入門了 showImg(https://segmentfault.com/img/bVYh1...
閱讀 2780·2021-09-23 11:44
閱讀 1671·2021-09-13 10:24
閱讀 2619·2021-09-08 09:36
閱讀 1231·2019-08-30 15:54
閱讀 2248·2019-08-30 13:54
閱讀 3308·2019-08-30 10:57
閱讀 1844·2019-08-29 18:43
閱讀 3609·2019-08-29 15:10