摘要:中的使用自己感覺蠻糾結(jié)的,根據(jù)文檔很好理解,其實(shí)很難確定你是否真正的理解。將被用作當(dāng)前對(duì)象的對(duì)象。方法可將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛芍付ǖ男聦?duì)象。最基本的理解自定義一個(gè)類,該類有一個(gè)方法,用來顯示當(dāng)前對(duì)象的值。
Javascript中call的使用自己感覺蠻糾結(jié)的,根據(jù)文檔很好理解,其實(shí)很難確定你是否真正的理解。 call 方法 應(yīng)用于:Function 對(duì)象 調(diào)用一個(gè)對(duì)象的一個(gè)方法,以另一個(gè)對(duì)象替換當(dāng)前對(duì)象。 call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 參數(shù):thisObj 可選項(xiàng)。將被用作當(dāng)前對(duì)象的對(duì)象。 arg1, arg2, , argN 可選項(xiàng)。將被傳遞方法參數(shù)序列。 說明: call 方法可以用來代替另一個(gè)對(duì)象調(diào)用一個(gè)方法。call 方法可將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對(duì)象。如果沒有提供 thisObj 參數(shù),那么 Global 對(duì)象被用作 thisObj。
最基本的理解
自定義一個(gè)類,該類有一個(gè)方法showTxt,用來顯示當(dāng)前對(duì)象的name值。創(chuàng)建一個(gè)對(duì)象,并且該對(duì)象的name值等于test1。使用call方法,使新創(chuàng)建的對(duì)象obj添加Class1類的showTxt方法,即把Class1類中的this.showTxt中的this指定成obj,這樣obj就有了showTxt方法。彈出"test1"。這個(gè)例子很容易理解。
function Class1(){ this.showTxt = function(){alert(this.name)} } var obj = new Object(); obj.name="test1" Class1.call(obj); obj.showTxt();//test1 alert(obj.showTxt);//function(){alert(this.name)}
再看一個(gè)稍微深入的理解
創(chuàng)建Class1的實(shí)例,讓這個(gè)實(shí)例調(diào)用showTxt方法返回這個(gè)實(shí)例的name值,因?yàn)檫@個(gè)實(shí)現(xiàn)沒有name值所以返回undefine。
function Class1(){ this.showTxt = function(){alert(this.name)} } var class1 = new Class1(); class1.showTxt();//undefined alert(class1.showTxt);//function(){alert(this.name)}
下面就給Class1添加個(gè)name值,這時(shí)class1再調(diào)用showTxt方法,會(huì)返回class1,這是因?yàn)榻o類添加了name值,所以實(shí)例的name也由undefine變成了class1.
function Class1(){ this.name = "class1";//添加name值 this.showTxt = function(){alert(this.name)} } var class1 = new Class1(); class1.showTxt();//class1 alert(class1.showTxt);//function(){alert(this.name)}
Class1.call(obj) 這個(gè)操作把Class1中的this.name,this.showTxt里的this替換成了obj,所以就變成了obj.name="class1",所以obj.showTxt在執(zhí)行時(shí)返回class1。
function Class1(){ this.name = "class1";//添加name值 this.showTxt = function(){alert(this.name)} } function Class2(){ this.name = "class2"; } var class2 = new Class2(); Class1.call(class2); alert(class2.showTxt);//function(){alert(this.name)} class2.showTxt();//class1
如果在Class1.call(obj);之后再添加obj.name = "test1",最后結(jié)果會(huì)輸入test1,原因顯而易見。
function Class1(){ this.name = "class1";//添加name值 this.showTxt = function(){alert(this.name)} } function Class2(){ this.name = "class2"; } var class2 = new Class2(); Class1.call(class2); class2.name = "test1";//重定義obj.name值 alert(class2.showTxt);//function(){alert(this.name)} class2.showTxt();//test1
上面的例子call的都是一個(gè)對(duì)象的實(shí)例,接下來的案例把對(duì)象的實(shí)例直接換成函數(shù),看看執(zhí)行結(jié)果會(huì)發(fā)生哪些變化
把call方法的第一參數(shù)由實(shí)例換成函數(shù)看看會(huì)怎么樣
Class2是一個(gè)function對(duì)象的引用,在執(zhí)行Class1.call(Class2)時(shí)this.showTxt里的this被替換成了Class2。這樣Class2就有了showTxt方法,Class2.showTxt()執(zhí)行時(shí)會(huì)返回Class2.name的值,因?yàn)?b>Class2并未定義name值,所以會(huì)返回undefined。
Class2函數(shù)里的this.name是由Class2創(chuàng)建實(shí)例的name值,并不是Class2.name,這兩個(gè)值有時(shí)會(huì)讓我迷糊。
function Class1(){ this.showTxt = function(){alert(this.name)} } function Class2(){ this.name = "class2"; } Class1.call(Class2); alert(Class2.showTxt);//function(){alert(this.name)} Class2.showTxt();//undefined
接著看下面的例子
class1.showTxt.call(class2);之所以會(huì)返回class2是因?yàn)?b>function(){alert(this.name)}這里的this被call指定成了class2,變成了alert(class2.name),所以會(huì)返回class2。
alert(class2.showTxt)返回undefined,說明并未定義class2.showTxt方法。
function Class1(){ this.showTxt = function(){alert(this.name)} } function Class2(){ this.name = "class2"; } var class1 = new Class1(); var class2 = new Class2(); class1.showTxt.call(class2);//class2 alert(class2.showTxt);//undefined
因?yàn)椴榻oclass2添加showTxt方法,所以提示該錯(cuò)誤。如果在這個(gè)調(diào)用之前添加Class1.call(class2);這個(gè)調(diào)用就OK了Class1.call(class2);class2.showTxt();//class1
這個(gè)例子都會(huì)返回undefined
function Class1(){ this.showTxt = function(){alert(this.name)} } function Class2(){ this.name = "class2"; } var class1 = new Class1(); class1.showTxt.call(Class2);//undefined alert(Class2.showTxt);//undefined
在使用call時(shí)如果調(diào)用函數(shù)里沒有this會(huì)怎么樣
function add(a,b){ alert(a+b); } function sub(a,b){ alert(a-b); } add.call(sub,3,1);//4
結(jié)果返回4,add.call(sub,3,1)在執(zhí)行過程中,sub做為add函數(shù)中this的替代品出現(xiàn),但是因?yàn)?b>add里沒有用到this,所以sub函數(shù)直接忽略,所以結(jié)果是4。
所以實(shí)際執(zhí)行如下:返回4。
function add(a,b){ alert(a+b); } add(3,1);//4
不錯(cuò),接下來再理解一個(gè)怪異的形式
function f1(){ alert(1); } function f2(){ alert(2) } var f3 = f1.call; f1.call(f2);//1 f3.call(f2);//2
f1.call(f2);比較好理解,如果不理解看上邊的case,但如何理解f3.call(f2)會(huì)返回2呢,為了方便理解進(jìn)行一下等效變化為f1.call.call(f2),這時(shí)會(huì)發(fā)現(xiàn)實(shí)際上是f1.call方法call調(diào)用了f2,那f1怎么又會(huì)有call方法呢?call, apply都屬于Function.prototype的一個(gè)方法,它是JavaScript引擎內(nèi)在實(shí)現(xiàn)的,因?yàn)閷儆?b>Function.prototype,所以每個(gè)Function對(duì)象實(shí)例,也就是每個(gè)方法都有call, apply屬性。
在理解f1.call.call(f2)時(shí)我們首先要知道call方法到底是如何執(zhí)行的,這樣才能f1.call.call(f2)如何執(zhí)行。
引用JK寫的一個(gè)用apply實(shí)現(xiàn)call的方法:
function jsCall(oThis){//這里的jsCall就是Call var argsNew = []; for(var i=1;i或簡(jiǎn)寫成
function jsCall(oThis){//這里的jsCall就是Call var argsNew = [].slice.call(arguments,1) return this.apply(oThis,argsNew); } Function.prototype.jsCall = jsCall;這樣就得到了一個(gè)和call一樣功能的jsCall, 接下來構(gòu)建兩個(gè)函數(shù)f1,f2
function f1(a){ alert([this,a,"f1"]); } f1(11);//[object Window],11,f1 function f2(a){ alert([this,a,"f2"]); } f2(22);//[object Window],22,f2用jsCall把f1中的this替換成f2
function f1(a){ alert([this,a,"f1"]); } function f2(a){ alert([this,a,"f2"]); } f1.jsCall(f2,11);//function f2(a){alert([this, a, "f2"]);},11,f1執(zhí)行結(jié)果發(fā)現(xiàn)[object Window]被替換成f2函數(shù)
function jsCall(oThis){//這里的jsCall就是Call var argsNew = [].slice.call(arguments,1) return this.apply(oThis,argsNew); } Function.prototype.jsCall = jsCall; function f1(a){ alert([this,a,"f1"]); } function f2(a){ alert([this,a,"f2"]); } f1.jsCall.jsCall(f2,11);//11,,f2在執(zhí)行f1.jsCall.jsCall(f2,11);時(shí)返回11,,f2,為什么會(huì)返回這個(gè)結(jié)果,重點(diǎn)來了:)
f1.jsCall方法:alert(f1.jsCall); //返回 //function jsCall(oThis) { // var argsNew = [].slice.call(arguments, 1); // return this.apply(oThis, argsNew); //}所以f1.jsCall.jsCall可以替換成jsCall.jsCall看一下執(zhí)行結(jié)果
function jsCall(oThis){//這里的jsCall就是Call var argsNew = [].slice.call(arguments,1) return this.apply(oThis,argsNew); } Function.prototype.jsCall = jsCall; function f1(a){ alert([this,a,"f1"]); } function f2(a){ alert([this,a,"f2"]); } jsCall.jsCall(f2,11);//11,,f2接著分析
jsCall在執(zhí)行的過程中,return this.apply(oThis,argsNew);里的this被替換成了
f2,11做為參數(shù)傳給了(oThis,argsNew),變成了f2.apply(11);function jsCall(oThis){//這里的jsCall就是Call var argsNew = [].slice.call(arguments,1) return this.apply(oThis,argsNew); } Function.prototype.jsCall = jsCall; function f1(a){ alert([this,a,"f1"]); } function f2(a){ alert([this,a,"f2"]); } f2.apply(11);//11,,f2返回結(jié)果跟f1.jsCall.jsCall(f2,11)一樣。
回過頭來看function f1(){ alert(1); } function f2(){ alert(2) } var f3 = f1.call; f1.call(f2);//1 f3.call(f2);//2這樣就不難理解f1.call.call(f2)實(shí)現(xiàn)時(shí),f1.call執(zhí)行過程中call中的this被f2替換成了
f2.call();因?yàn)?b>f2里沒有this的引用所以執(zhí)行結(jié)果是2.
f2.call()//2
需要十分注意的是f1.call是方法,f1是函數(shù)對(duì)象,這兩者在call時(shí)是有區(qū)別的。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/78549.html
摘要:剩下的兩個(gè),我們分別改變了他們的執(zhí)行環(huán)境,分別指向了和,于是結(jié)果就是顯示對(duì)象各自的值。如果你仍然對(duì)和沒有清晰的認(rèn)識(shí),可以試著這樣理解。 在Javascript中,每個(gè)函數(shù)都包含兩個(gè)非繼承而來的方法,call和apply。這兩個(gè)方法的用途都是在特定的作用域中調(diào)用函數(shù),實(shí)際上等于設(shè)置函數(shù)體內(nèi)的this對(duì)象的值。摘自《JavaScript高級(jí)程序設(shè)計(jì)》 apply方法接收兩個(gè)參數(shù),第一個(gè)參數(shù)...
摘要:理解文章中已經(jīng)比較全面的分析了在中的指向問題,用一句話來總結(jié)就是的指向一定是在執(zhí)行時(shí)決定的,指向被調(diào)用函數(shù)的對(duì)象。與和直接執(zhí)行原函數(shù)不同的是,返回的是一個(gè)新函數(shù)。這個(gè)新函數(shù)包裹了原函數(shù),并且綁定了的指向?yàn)閭魅氲摹? 理解 JavaScript this 文章中已經(jīng)比較全面的分析了 this 在 JavaScript 中的指向問題,用一句話來總結(jié)就是:this 的指向一定是在執(zhí)行時(shí)決定的,...
摘要:的作用在中,方法和方法都是為了改變函數(shù)運(yùn)行時(shí)上下文而存在的,換句話說就是為了改變函數(shù)體內(nèi)部的指向。歡迎前端大牛糾正錯(cuò)誤,如有錯(cuò)誤我會(huì)及時(shí)改正。 寫在前面: 隔了很長(zhǎng)時(shí)間了,也不知道寫點(diǎn)什么。最近一直在研究ES6,一直想寫出來的文章能對(duì)初學(xué)者或者是在學(xué)習(xí)JS路上有所幫助的。這就是我的初衷。 call、apply的作用 在JavaScript中,call()方法和apply()方法都是為了...
摘要:那么,它到底是如何工作的呢讓我們從一種更簡(jiǎn)單的實(shí)現(xiàn)開始實(shí)際上這種實(shí)現(xiàn)代碼更短,并且更易讀是函數(shù)原型中的一個(gè)函數(shù),它調(diào)用函數(shù),使用第一個(gè)參數(shù)作為參數(shù),并傳遞剩余參數(shù)作為被調(diào)用函數(shù)的參數(shù)。 原文:The Most Clever Line of JavaScript 作者:Seva Zaikov 原文 最近 一個(gè)朋友 發(fā)給我一段非常有趣的 JavaScript 代碼,是他在某個(gè) 開源庫中...
摘要:面向?qū)ο缶幊陶Z言的對(duì)象體系,不是基于類的,而是基于構(gòu)造函數(shù)和原型鏈。一語言使用構(gòu)造函數(shù)作為對(duì)象的模板。構(gòu)造函數(shù)之所以叫構(gòu)造函數(shù),就是說這個(gè)函數(shù)的目的,就是操作一個(gè)空對(duì)象即對(duì)象,將其構(gòu)造為需要的樣子。 Javascript 前言:關(guān)于javascript我總有些疑問,是不是一門面向?qū)ο蟮恼Z言,總結(jié)了很久:Javascript是一種基于對(duì)象(object-based)的語言,你遇到的所有東...
摘要:返回值使用調(diào)用者提供的值和參數(shù)調(diào)用該函數(shù)的返回值。這個(gè)匿名函數(shù)的主要目的是給每個(gè)數(shù)組元素對(duì)象添加一個(gè)方法,這個(gè)方法可以打印出各元素在數(shù)組中的正確索引號(hào)。嚴(yán)格模式下,的值將會(huì)是。 Function.prototype.call() 概念 call()方法使用一個(gè)指定的this值和單獨(dú)給出的一個(gè)或多個(gè)參數(shù)來調(diào)用一個(gè)函數(shù)。 注意:該方法的語法和作用與apply()方法類似,只有一個(gè)區(qū)別,就...
閱讀 1597·2021-11-22 15:33
閱讀 1743·2021-11-15 18:01
閱讀 681·2021-10-09 09:43
閱讀 2621·2021-09-22 16:03
閱讀 767·2021-09-03 10:28
閱讀 3569·2021-08-11 10:22
閱讀 2731·2019-08-30 15:54
閱讀 1770·2019-08-30 14:21