成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

前端學(xué)習(xí)筆記之js中apply()和call()方法詳解

moven_j / 1219人閱讀

摘要：第二行將函數(shù)的指向一個(gè)字符串第三行將函數(shù)的指向一個(gè)數(shù)字以此類(lèi)推。再舉一個(gè)例子實(shí)現(xiàn)對(duì)象繼承繼承了的屬性和方法陳安東男姓名年齡性別輸出姓名陳安東年齡性別男這樣用就實(shí)現(xiàn)了繼承用也類(lèi)似

這里排版不是太好，詳情看我的簡(jiǎn)書(shū)

經(jīng)過(guò)網(wǎng)上的大量搜索，漸漸明白了apply()和call方法的使用，為此寫(xiě)一篇文章記錄一下。
定義

apply()方法：

Function.apply(obj,args)
obj：這個(gè)對(duì)象將代替Function類(lèi)里this對(duì)象

args：這個(gè)是數(shù)組，它將作為參數(shù)傳給Function(args-->arguments）

call()方法：

Function.call(obj,[param1[,param2[,…[,paramN]]]])
obj：這個(gè)對(duì)象將代替Function類(lèi)里this對(duì)象

params：這個(gè)是一個(gè)參數(shù)列表

相同點(diǎn)與不同點(diǎn)

相同點(diǎn)

作用是一樣的，call 和 apply 都是為了改變函數(shù)體內(nèi)部 this 的指向，也就是把Function(即this)綁定到obj，這時(shí)候obj具備了Function的屬性和方法，說(shuō)白一點(diǎn)就是obj繼承了Function的屬性和方法。

不同點(diǎn)

相信大家也已經(jīng)發(fā)現(xiàn)了，他們唯一區(qū)別就是接受參數(shù)的方式不太一樣，apply接受的是數(shù)組參數(shù)，call接受的是連續(xù)參數(shù)。

方法使用

我們來(lái)看下面一個(gè)例子：

定義一個(gè)函數(shù)mul

function mul(a,b){
    return this+(a*b);
}

接著我們?cè)诳刂婆_(tái)上打印出

console.log(mul.call(null,2,3));
console.log(mul.call("s",2,3));
console.log(mul.call(3,2,3));
console.log(mul.apply(null,[2,5]));
console.log(mul.apply(2,[2,5]));

分別為：

[object Window]6
s6
9
[object Window]10
12

可能你會(huì)發(fā)現(xiàn)到，第一行 console.log(mul.call(null,2,3)) 沒(méi)什么變化，call()的第一個(gè)參數(shù)就是改變的 this 指向，如果為 null 則函數(shù)的 this 不變，注意，如果在嚴(yán)格模式下（函數(shù)體或全局的開(kāi)頭有這句話(huà)："use strict"），this 會(huì)變成 null。如果函數(shù)本身有參數(shù)，則從 call 的第二個(gè)參數(shù)開(kāi)始寫(xiě)起。
第二行 console.log(mul.call("s",2,3)) 將函數(shù)的 this 指向一個(gè)字符串 "s". ===>> "s"+2 * 3=s6
第三行 console.log(mul.call(3,2,3)) 將函數(shù)的this指向一個(gè)數(shù)字3

 ===>>   3+2 * 3=9

以此類(lèi)推。

再舉一個(gè)例子

學(xué)js的都知道 Math.max() 方法,比如有三個(gè)參數(shù)2,3,4那么我們要找出最大值可以這么寫(xiě) Math.max(2,3,4) 那要是有 100 個(gè)或更多參數(shù)呢？這時(shí)候就可以結(jié)合 apply 和數(shù)組輕松實(shí)現(xiàn)了。

比如定義一個(gè)數(shù)組

var arr=[2,3,4,5,6,7,8,9,10,23,45,66,22,11];

接著我們打印出

console.log(Math.max.apply(null,arr));

這樣一來(lái)就很簡(jiǎn)潔明了。

再舉一個(gè)例子實(shí)現(xiàn)對(duì)象繼承

function Person(name,age) {
    this.name=name;
    this.age=age;
}

var Student=function(name,age,gender) {
    Person.call(this,name,age);//this繼承了person的屬性和方法
    this.gender=gender;
}
var student=new Student("陳安東", 20, "男");
alert("姓名:"+student.name+"
"+"年齡:"+student.age+"
"+"性別:"+student.gender);

輸出

姓名:陳安東
年齡:20
性別:男

這樣用call就實(shí)現(xiàn)了繼承（用apply也類(lèi)似）

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82867.html

相關(guān)文章

  • javasscript - 收藏集 - 掘金

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

    Rango 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)整理

    摘要：難怪超過(guò)三分之一的開(kāi)發(fā)人員工作需要一些知識(shí)。但是隨著行業(yè)的飽和，初中級(jí)前端就業(yè)形勢(shì)不容樂(lè)觀。整個(gè)系列的文章大概有篇左右，從我是如何成為一個(gè)前端工程師，到各種前端框架的知識(shí)。 為什么 call 比 apply 快？ 這是一個(gè)非常有意思的問(wèn)題。 作者會(huì)在參數(shù)為3個(gè)（包含3）以?xún)?nèi)時(shí)，優(yōu)先使用 call 方法進(jìn)行事件的處理。而當(dāng)參數(shù)過(guò)多（多余3個(gè)）時(shí)，才考慮使用 apply 方法。 這個(gè)的原因...

    Lowky 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)整理

    摘要：難怪超過(guò)三分之一的開(kāi)發(fā)人員工作需要一些知識(shí)。但是隨著行業(yè)的飽和，初中級(jí)前端就業(yè)形勢(shì)不容樂(lè)觀。整個(gè)系列的文章大概有篇左右，從我是如何成為一個(gè)前端工程師，到各種前端框架的知識(shí)。 為什么 call 比 apply 快？ 這是一個(gè)非常有意思的問(wèn)題。 作者會(huì)在參數(shù)為3個(gè)（包含3）以?xún)?nèi)時(shí)，優(yōu)先使用 call 方法進(jìn)行事件的處理。而當(dāng)參數(shù)過(guò)多（多余3個(gè)）時(shí)，才考慮使用 apply 方法。 這個(gè)的原因...

    snowLu 評(píng)論0 收藏0

  • JS筆記

    摘要：從最開(kāi)始的到封裝后的都在試圖解決異步編程過(guò)程中的問(wèn)題。為了讓編程更美好，我們就需要引入來(lái)降低異步編程的復(fù)雜性。異步編程入門(mén)的全稱(chēng)是前端經(jīng)典面試題從輸入到頁(yè)面加載發(fā)生了什么這是一篇開(kāi)發(fā)的科普類(lèi)文章，涉及到優(yōu)化等多個(gè)方面。 TypeScript 入門(mén)教程 從 JavaScript 程序員的角度總結(jié)思考，循序漸進(jìn)的理解 TypeScript。 網(wǎng)絡(luò)基礎(chǔ)知識(shí)之 HTTP 協(xié)議 詳細(xì)介紹 HTT...

    rottengeek 評(píng)論0 收藏0

  • 前端補(bǔ)集 - 收藏集 - 掘金

    摘要：原文地址一個(gè)非常適合入門(mén)學(xué)習(xí)的博客項(xiàng)目前端掘金一個(gè)非常適合入門(mén)學(xué)習(xí)的項(xiàng)目，代碼清晰結(jié)構(gòu)合理新聞前端掘金介紹一個(gè)由編寫(xiě)的新聞。深入淺出讀書(shū)筆記知乎專(zhuān)欄前端專(zhuān)欄前端掘金去年的一篇老文章，恰好今天專(zhuān)欄開(kāi)通，遷移過(guò)來(lái)。 破解前端面試（80% 應(yīng)聘者不及格系列）：從閉包說(shuō)起 - 掘金修訂說(shuō)明：發(fā)布《80% 應(yīng)聘者都不及格的 JS 面試題》之后，全網(wǎng)閱讀量超過(guò) 6W，在知乎、掘金、cnodejs ...

    YorkChen 評(píng)論0 收藏0

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

0條評(píng)論

moven_j

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<