摘要:在下例中的循環(huán)體內(nèi),我們創(chuàng)建了一個(gè)匿名函數(shù),然后通過調(diào)用該函數(shù)的方法,將每個(gè)數(shù)組元素作為指定的執(zhí)行了那個(gè)匿名函數(shù)。當(dāng)然,這里不是必須得讓數(shù)組元素作為值傳入那個(gè)匿名函數(shù),目的是為了演示的用法。
apply()
Function.prototype.apply()將會調(diào)用一個(gè)以this和數(shù)組形式的arguments為參數(shù)的方法。
m
fun.apply(thisArg,[argsArray])
每當(dāng)要為一個(gè)新的對象添加一個(gè)方法時(shí),有時(shí)不得不為其重寫一個(gè)方法。而如果利用apply的話,只需要寫一次方法,然后在這個(gè)新的對象中繼承它即可,十分方便。
apply和call方法十分相似,僅僅只是參數(shù)不同而已,但正是因?yàn)檫@一點(diǎn),我們在用apply時(shí)不必知道被調(diào)用的對象的具體參數(shù),可以只穿arguments,如此一來,被調(diào)用的這個(gè)對象將負(fù)責(zé)handle觸底的arguments。
1.我們可以像Java那樣,利用apply為一個(gè)對象創(chuàng)建構(gòu)造鏈。在下面的例子中,我們將創(chuàng)建一個(gè)名為construct的全局方法,這個(gè)方法可以不必讓你傳遞一個(gè)一個(gè)的參數(shù),取而代之的則是傳遞一個(gè)參數(shù)數(shù)組。當(dāng)?shù)匾粋€(gè)參數(shù)為null時(shí),指向的時(shí)window對象。
// Function.prototype.construct = function(aArgs) { // var oNew = Object.create(this.prototype); // this.apply(oNew, aArgs); // return oNew; // }; //Function.prototype.construct = function(aArgs) { // var fConstructor = this, fNewConstr = function() { // fConstructor.apply(this, aArgs); // }; // fNewConstr.prototype = fConstructor.prototype; // return new fNewConstr(); //}; Function.prototype.construct = function (aArgs) { var fNewConstr = new Function(""); fNewConstr.prototype = this.prototype; var oNew = new fNewConstr(); this.apply(oNew, aArgs); return oNew; }; function MyConstructor() { for (var nProp = 0; nProp < arguments.length; nProp++) { this["property" + nProp] = arguments[nProp]; } } var myArray = [4, "Hello world!", false]; var myInstance = MyConstructor.construct(myArray); console.log(myInstance.property1); // logs "Hello world!" console.log(myInstance instanceof MyConstructor); // logs "true" console.log(myInstance.constructor);
function minOfArray(arr){ var min = Infinity; var QUANTUM = 32768; var len=arr.length; for(var i=0;i function Person(name,age) { this.name=name; this.age=age; } /*定義一個(gè)學(xué)生類*/ function Student(name,age,grade) { Person.apply(this,arguments); this.grade=grade; } //創(chuàng)建一個(gè)學(xué)生類 var student=new Student("zhangsan",21,"一年級"); //測試 alert("name:"+student.name+" "+"age:"+student.age+" "+"grade:"+student.grade);call()call()方法調(diào)用一個(gè)函數(shù),其具體有一個(gè)指定的this值和分別地提供的參數(shù)。
注意:該方法的作用和apply()方法類似,只有一個(gè)區(qū)別,就是call()方法接受的是若干個(gè)參數(shù)的列表,而apply()方法接受的是一個(gè)包含多個(gè)參數(shù)的數(shù)組。fun.call(thisArg,arg1,arg2,...)
參數(shù):在fun函數(shù)運(yùn)行時(shí)指定的是this值。需要注意的是,指定的this值并不一定是該函數(shù)執(zhí)行時(shí)真正的this值,如果這個(gè)函數(shù)處于非嚴(yán)格模式下,則指定為null和undefinde的this值會自動(dòng)指向全局對象,同時(shí)值為原始值(數(shù)字,字符串,布爾值)的this會指向該原始值的自動(dòng)包裝對象。 arg1,arg2指定的參數(shù)列表。返回值:
返回值是你調(diào)用的方法的返回值,若該方法沒有返回值,則返回undefined。call()允許為不同的對象分配和調(diào)用屬于一個(gè)對象的函數(shù)/方法。
可以讓call()中的對象調(diào)用當(dāng)前對象所擁有的function。你剋以使用call()來實(shí)現(xiàn)繼承:寫一個(gè)方法,然后讓另一個(gè)新的對象來繼承它。function Product(name,price){ this.name = name; this.price = price; } function Food(name,price){ Product.call(this,name,price); this.category = "food" } console.log(new Food("cheese",5).name)//cheese//在一個(gè)子勾走函數(shù)中,你可以通過調(diào)用父構(gòu)造函數(shù)的call方法來實(shí)現(xiàn)繼承,類似于Java中的寫法。下例中,使用Food和Toy構(gòu)造函數(shù)創(chuàng)建的對象示例都會擁有Product構(gòu)造函數(shù)中添加的name屬性和price屬性,但category屬性是在各自的構(gòu)造函數(shù)中定義的。 function Food(name, price) { this.name = name; this.price = price; if (price < 0) { throw RangeError( "Cannot create product " + this.name + " with a negative price" ); } this.category = "food"; } //function Toy 同上 function Toy(name, price) { Product.call(this, name, price); this.category = "toy"; } var cheese = new Food("feta", 5); var fun = new Toy("robot", 40);使用call方法調(diào)用匿名函數(shù)。
在下例中的for循環(huán)體內(nèi),我們創(chuàng)建了一個(gè)匿名函數(shù),然后通過調(diào)用該函數(shù)的call方法,將每個(gè)數(shù)組元素作為指定的this執(zhí)行了那個(gè)匿名函數(shù)。這個(gè)匿名函數(shù)的主要目的是給每個(gè)數(shù)組元素對象添加一個(gè)print方法,這個(gè)print方法可以打印出各元素在數(shù)組中的正確索引號。當(dāng)然,這里不是必須得讓數(shù)組元素作為this值傳入那個(gè)匿名函數(shù),目的是為了演示call的用法。var animals = [ {species:"Lion",name:"King"}, {species:"Whale",name:"Fail"} ]; for(var i=0;i使用call方法調(diào)用函數(shù)并且指定上下文的this
在下面的例子中,當(dāng)調(diào)用greet方法的時(shí)候,該方法的this值會綁定到i對象。function greet(){ var reply = [this.person,"Is An Awesome",this.role].join(""); console.log(reply); } var i = { person:"Douglas Crockford", role:"JavaScript DeveLoper" } greet.call(i);// Douglas Crockford Is An Awesome Javascript Developerbind()bind()方法創(chuàng)建一個(gè)新的函數(shù),當(dāng)這個(gè)新函數(shù)被調(diào)用時(shí)this鍵值為其提供的值,其參數(shù)列表前幾項(xiàng)值為創(chuàng)建時(shí)指定的參數(shù)序列。
語法:fun.bind(thisArg[,arg1[,arg2[,...]]])參數(shù):
thisArg調(diào)用綁定函數(shù)時(shí)作為this參數(shù)傳遞給目標(biāo)函數(shù)的值。如果使用new運(yùn)算符構(gòu)造綁定函數(shù),則忽略該值。當(dāng)使用bind在setTimeout中創(chuàng)建一個(gè)函數(shù)(作為回調(diào)提供)時(shí),作為thisArg傳遞的任何原始值都將轉(zhuǎn)換為object。如果沒有提供綁定的參數(shù),則執(zhí)行作用域的this被視為新函數(shù)的thisArg arg1,arg2,...當(dāng)綁定函數(shù)被調(diào)用時(shí),這些參數(shù)將置于實(shí)參之前傳遞給被綁定的方法。返回值:
返回由指定的this值和初始化參數(shù)改造的原函數(shù)拷貝。this.x = 9; var module = { x: 81, getX: function() { return this.x; } }; console.log(module.getX()); // 返回 81 var retrieveX = module.getX.bind(module); console.log(retrieveX()); // 返回 9, 在這種情況下,"this"指向全局作用域 // 創(chuàng)建一個(gè)新函數(shù),將"this"綁定到module對象 // 新手可能會被全局的x變量和module里的屬性x所迷惑 var boundGetX = retrieveX.bind(module); console.log(boundGetX()); // 返回 81var o={ f:function(){ var self = this; var fff = function(){ console.log(self.value)//此時(shí)this指向的是全局作用域,因此需要使用self指向?qū)ο髈 }; fff(); }, value:"Hello World" }; o.f()//Hello World!上例子是我們常用了保持this上下文的方法,把this賦值給了中間變量self,這樣在內(nèi)部嵌套的函數(shù)中能夠使用self訪問到對象o,否則仍使用this.value,內(nèi)部嵌套函數(shù)的this此時(shí)指向的是全局作用域,最后的輸出將會是undefined。
但是,如果我們使用bind()函數(shù),將fff函數(shù)的綁定在對象o中,即將fff()函數(shù)內(nèi)部的this對象綁定為對象o,那么可以遇見此時(shí)this.value是存在的。代碼如下:var o={ f:function(){ var self = this; var fff = function(){ console.log(this.value); }.bind(this); fff(); } valeu:"Hello World!" } o.f()//Hello World!更普通的使用情形:
function f(y,z){ return this.x+y+z; } var m = f.bind({X;1},2); console.log(m(3))最后將輸出6
這是因?yàn)閎ind()方法會把傳入它的第一個(gè)實(shí)參綁定給f函數(shù)體的this,從第二個(gè)實(shí)參起,將依次傳遞給原始函數(shù),因此{(lán)x:1}傳遞給this,2傳遞給形參y,m(3)調(diào)用時(shí)的3傳遞給形參z.
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/100157.html
摘要:首先,我們判斷是否存在方法,然后,若不存在,向?qū)ο蟮脑椭刑砑幼远x的方法。指向調(diào)用它的對象??傊齻€(gè)的使用區(qū)別都是用來改變函數(shù)的對象的指向的第一個(gè)參數(shù)都是要指向的對象都可以利用后續(xù)參數(shù)傳參是返回對應(yīng)函數(shù),便于稍后調(diào)用,是立即調(diào)用 apply和call都是為了改變某個(gè)函數(shù)運(yùn)行時(shí)的上下文而存在的(就是為了改變函數(shù)內(nèi)部this的指向),F(xiàn)unction對象的方法,每個(gè)函數(shù)都能調(diào)用; 使用a...
摘要:和類似,都是調(diào)用函數(shù),并指定函數(shù)的值和參數(shù),區(qū)別在于傳入?yún)?shù)是通過參數(shù)列表的形式,傳入?yún)?shù)是通過數(shù)組的形式方法與前兩個(gè)不同,它創(chuàng)建一個(gè)新的函數(shù),在調(diào)用新函數(shù)時(shí),會調(diào)用原函數(shù),并指定原函數(shù)的值和參數(shù)。執(zhí)行的時(shí)候并沒有調(diào)用函數(shù)。 簡介 JavaScript 中有三個(gè)方法Function.prototype.call()、Function.prototype.apply()和Function...
摘要:綁定函數(shù)被調(diào)用時(shí),也接受預(yù)設(shè)的參數(shù)提供給原函數(shù)。一個(gè)綁定函數(shù)也能使用操作符創(chuàng)建對象這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。 一直很難理解js中的call apply bind,在w3schools,mdn閱讀了,也看了很多相關(guān)的文章,今天我來寫下我理解的call apply bind 首先創(chuàng)建一個(gè)函數(shù) function man(){} man.prototype = { name: ...
摘要:其實(shí)它們都很簡單,但是在處理一些與相關(guān)的函數(shù)的時(shí)候,用來改變函數(shù)中的指向,卻是必不可少的工具,所以必須掌握好它們的用法。 關(guān)于javascript中的bind、call、apply等函數(shù)的用法 我GitHub上的菜鳥倉庫地址: 點(diǎn)擊跳轉(zhuǎn)查看其他相關(guān)文章 文章在我的博客上的地址: 點(diǎn)擊跳轉(zhuǎn) ? ? ? ? 前面的文章已經(jīng)說到this的指向了,那么這篇文章就要說一說和this相關(guān)的三個(gè)...
摘要:奔著一星期徹底弄清楚一個(gè)小知識點(diǎn)的目的這次的目標(biāo)是方法在實(shí)際項(xiàng)目中經(jīng)常會用到這三個(gè)函數(shù)只是簡單的知道都是用來進(jìn)行上下文綁定的這三個(gè)函數(shù)都可以實(shí)現(xiàn)現(xiàn)在看來這三者還是有很大區(qū)別的特別是和其他兩個(gè)的區(qū)別先說和目的是改變函數(shù)的執(zhí)行上下文下面列舉一些 奔著一星期徹底弄清楚一個(gè)javascript小知識點(diǎn)的目的,這次的目標(biāo)是call apply bind方法 在實(shí)際項(xiàng)目中,經(jīng)常會用到這三個(gè)函數(shù),只...
摘要:的調(diào)用者,將會指向這個(gè)對象。此外,還可以擴(kuò)展自己的其他方法。的使用最后來說說。不同的是,方法的返回值是函數(shù),并且需要稍后調(diào)用,才會執(zhí)行。而和則是立即調(diào)用。總結(jié)和的主要作用,是改變對象的執(zhí)行上下文,并且是立即執(zhí)行的。 前言 上一篇文章 《「前端面試題系列4」this 的原理以及用法》 中,提到了 call 和 apply。 它們最主要的作用,是改變 this 的指向。在平時(shí)的工作中,除了...
閱讀 1080·2021-11-23 09:51
閱讀 2420·2021-09-29 09:34
閱讀 3161·2019-08-30 14:20
閱讀 1070·2019-08-29 14:14
閱讀 3191·2019-08-29 13:46
閱讀 1087·2019-08-26 13:54
閱讀 1643·2019-08-26 13:32
閱讀 1436·2019-08-26 12:23