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

資訊專欄INFORMATION COLUMN

Javascript中call的使用

Snailclimb / 1290人閱讀

摘要:中的使用自己感覺蠻糾結(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)}這里的thiscall指定成了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

jsCallf1中的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中的thisf2替換成了
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

相關(guān)文章

  • Javascriptcall和apply理解

    摘要:剩下的兩個(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ù)...

    mrcode 評(píng)論0 收藏0
  • 理解 JavaScript call()/apply()/bind()

    摘要:理解文章中已經(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í)決定的,...

    duan199226 評(píng)論0 收藏0
  • 深入淺出JavaScriptcall()、apply()方法

    摘要:的作用在中,方法和方法都是為了改變函數(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()方法都是為了...

    Cympros 評(píng)論0 收藏0
  • 魔幻語言 JavaScript 系列之 call、bind 以及上下文

    摘要:那么,它到底是如何工作的呢讓我們從一種更簡(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è) 開源庫中...

    cuieney 評(píng)論0 收藏0
  • 對(duì)JavaScript對(duì)象理解

    摘要:面向?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)的語言,你遇到的所有東...

    aboutU 評(píng)論0 收藏0
  • JavaScriptcall()理解

    摘要:返回值使用調(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ū)別,就...

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

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

0條評(píng)論

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