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