`

js--call_apply

callapply 
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>call_apply</title>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<meta http-equiv="Content-Type" content="text/html; charset=HZ" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<script language="javascript">
/*
JavaScrtipt动态变换运行时上下文特性
foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)
简直是”无中生有”,对象的方法可以任意指派,（有方法的一方，指派给另一方）。call, apply作用就是借用别人的方法来调用,就像调用自己的一样.
*/

function test0(){

    function print(a, b, c){
        alert(a + b + c );
        //alert(a + b + c + d);
        //alert(a + b + c + d+f);
    }

    function example(a, b , c , d){
        alert(arguments); //成功
        alert(this.arguments);//undefined
        
        //用call方式借用print,参数一个一个处理
        //print.call(this, a, b, c, d);
        print.call(this, a, b, b, b);
        
        //用apply方式借用print, 参数作为一个数组传递,
        print.apply(this, arguments);
        //或者封装成数组
        print.apply(this, [a, b, c, d]);
    }
    
    //下面将显示”背光脚本”
    example("背" , "光" , "脚", "本");
    
}

function test1(){

    function Class1(){
        this.showTxt = function(){alert(this.name)}
    }
    
    var obj = new Object();
    obj.name="test1";
    
    Class1.call(obj);   //只是上下文对象发生了变化 也就是扩展了obj对象(使他  凭空多了些调用方法的接口，顺便相似的内容会被覆盖掉)
    
    obj.showTxt();        //test1  是调用函数  如果没有置换掉 就是自身
    alert(obj.name);
    alert(obj.showTxt);//function(){alert(this.name)}  是对象的属性 toString（）
    
}


function test2(){
    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对象进行动态的赋值设置处理
    alert("Class2.showTxt........"+Class2.showTxt());   //注意：类实例扩展了接口，但是 类并没有扩展对应的接口************下同***********
    
    
    alert(class2.name); //先定义的 class2 而后有被重置为class1
    class2.showTxt();//class1  对象才能调用方法   
    
    class2.name = 'test1';//重定义obj.name值
    alert(class2.showTxt);//对象的属性 就是字符串 function(){alert(this.name)}
    class2.showTxt();//test1
    
}


function test3(){
    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();//扩展了类的接口，但是 没有调用类实例化的设置    （注意:类有扩展，类实例没有扩展处理)
    
    class2 = new Class2();        //此时 在创建的对象 已经不具备代理引用的条件了
    alert(class2.showTxt);                //undefined 没有定义属性
    
}

function test4(){

    function Class1(){
        this.showTxt = function(){alert(this.name)};
        this.showTxt2 = function(){alert(this.name)};
    }
    
    function Class2(){
        this.name = 'class2';
    }
    
    var class1 = new Class1();
    var class2 = new Class2();
    
    class1.showTxt.call(class2);//class2类实例上面的方法的调用是  直接的调用，只是上下文this的引用进行了切换而已。
    //class2类实例 及 类 都没有进行扩展
    
    alert("Class2.showTxt........"+Class2.showTxt);//只是 对象方法的调用  类没有扩展
    alert(class2.showTxt);//undefined （同时调用时一次性的，直接调用） ***********************
    alert(class2.showTxt2);//undefined
    
    Class1.call(class2);                //对象的处理
    class2.showTxt();
    class2.showTxt2();
    
}

function test5(){

    function Class1(){
        this.showTxt = function(){alert(this.name)}
    }
    
    function Class2(){
        this.name = 'class2';
    }
    
    var class1 = new Class1();
    class1.showTxt.call(Class2);//类（也是类实例化）上面的方法的调用是  直接的调用，只是上下文this的引用进行了切换而已。
    //Class2类 都没有进行扩展

    alert(Class2.showTxt);        //undefined   
    var class2 = new Class2();  //创建了新的对象 之前的代理引用 已经不成立了
    alert(class2.showTxt);//undefined   
    
}

function test6(){

    function f1(){
        alert(1);
    }
    function f2(){
        alert(2);
    }
    function f3(){
        alert(3);
    }
    function f4(){
        alert(4);
    }
    
    f1.call(f2);//1       //将f1 中的代理this,替换为 f2 ;要创建一个真实的f1的实例化.。。
    f1.call(f3);//1       //将f1 中的代理this,替换为 f2 ;要创建一个真实的f1的实例化.。。

    
    var ff = f1.call;   //自身的创建代理 不去创建对象 并保持这个引用，
    ff.call(f2);//2           //如果单纯的调用，则 创建thisobj的对象
    ff.call(f3);//3
    ff.call(f4)//4
                          
    ff = f4.call;   
    ff.call(f2);//2
    
}

function test7(){

    function jsCall(oThis){//这里的jsCall就是Call
        var argsNew = [];
        alert("arguments.length......"+arguments.length);
        alert(this);
        
        for(var i=1;i<arguments.length;i++){
            argsNew.push(arguments[i]);
        }
        
        alert("before...........");
        return this.apply(oThis,argsNew);
    }
    Function.prototype.jsCall = jsCall;
    /*
        或简写成
    function jsCall(oThis){//这里的jsCall就是Call
        var argsNew = [].slice.call(arguments,1);
        return this.apply(oThis,argsNew);
    }
    */

    //参数已经传递过来，必须通过显示的定义来接收 a,b,c,d,e....
    function f1(a,b){
        alert(["in f1......","kkkkkkkkkkk"]);
        
        //中括号 多个信息的展示处理
        //f1.jsCall(f2)时，没有参数
        alert([this,"it is param="+a+"....."+b,'f1']);
        
        alert("in f1.......end");
    }
    
    function f2(a,b){
        alert("in f2.....");
        alert(this);//?为什么变成了 4321 有知道的话 回复我啊
        alert([this,a+"..."+b,'f2']);
    }
    
    
    //此时处理的 F1的构造函数中的this参数已经发生了 变化
    //f1.jsCall(f2);      //直接调用处理
    //f1.jsCall(f2,1234);// 1234
    //f1.jsCall(f2,1234," after 000");// 1234..... after 000

    
    var ff = f1.jsCall;
    //alert(ff);
    ff.jsCall(f2,4321,"this's really params"," secord param");//4321,this's really params,f2
    
}

</script>    
<body>
应用一对象的一个方法，用另一个对象替换当前对象。
apply([thisObj[,argArray]])
call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

<br/>
<INPUT TYPE=button value="test0" onclick="test0()">
<INPUT TYPE=button value="test1" onclick="test1()">
<INPUT TYPE=button value="test2" onclick="test2()">
<INPUT TYPE=button value="test3" onclick="test3()">
<INPUT TYPE=button value="test4" onclick="test4()">
<INPUT TYPE=button value="test5" onclick="test5()">
<INPUT TYPE=button value="test6" onclick="test6()">
<INPUT TYPE=button value="test7" onclick="test7()">
</body>
</html>

分享到：
| js-map对象
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    前端大厂最新面试题-bind_call_apply.docx

    _bind、call、apply 是 JavaScript 中的三个函数方法，用于改变函数的执行上下文，即改变函数中的 this 指向。下面我们将详细讲解这三个方法的使用和区别。 作用 _bind、call、apply 三者都是改变函数执行时的上...

    ES规范-ECMA-262_5.1_edition_june_2011.pdf.zip

    同时，`arguments`对象可以被`Function.prototype.call()`和`Function.prototype.apply()`方法的`this`参数替换，增强了函数的灵活性。 6. **JSON支持**：内置了`JSON.parse()`和`JSON.stringify()`两个方法，方便...

    this_scope_call_apply_bind_柯里化 详细分析

    javascirpt this_scope_call_apply_bind_柯里化 详细分析

    33-js-concepts-master.zip_js

    6. this：this的值取决于函数的调用方式，可以是全局对象、对象方法、构造函数或call/apply/bind方法。 7.闭包：闭包是能够访问其自身作用域、外部函数作用域以及全局作用域的函数。 8.原型与原型链：JavaScript的...

    arguments-call-apply.rar_Windows编程_Java_

    在压缩包的文件中，7.6.js、7.7.1.js和arguments-call-apply.js很可能包含了关于这些主题的示例代码和讲解。通过学习这些文件，开发者可以深入理解如何在实际项目中使用`arguments`对象，以及何时选择`call`或`apply...

    JavaScript中call与apply方法

    JavaScript中call与apply方法

    js-object-oriented-bind-call-apply-readme-v-000

    在这段代码中，我们将练习bind ， call和apply 。 您可以使用浏览器的JS控制台进行跟踪，也可以使用httpserver来提供所提供的index.html 。 HTML文件将自动加载index.js并在浏览器中显示您所做的编辑。 目标 使用...

    js代码-generator apply call bind

    在JavaScript编程中，`generator`、`apply`、`call`和`bind`是四个非常重要的概念，它们各自扮演着不同的角色，对于理解和编写高效、灵活的代码至关重要。接下来，我们将详细探讨这些知识点。 首先，`generator`是...

    js-object-oriented-bind-call-apply-this-lab-nyc-web-051418

    绑定，致电，申请实验室目标使用JavaScript的绑定，调用和应用方法来更改函数的范围并正确传递参数指示在本实验中，我们的测试定义了一些函数，然后将这些函数传递给我们要求您编写的函数。 您的函数不仅应调用作为...

    Javascript - 全面理解 caller，callee，call，apply （转载）

    这篇文章将深入探讨四个关键概念：caller、callee、call和apply，它们都是JavaScript函数操作的核心部分，对于理解和使用高级JavaScript编程至关重要。 首先，我们来了解`caller`和`callee`。在JavaScript的函数...

    js-object-oriented-bind-call-apply-this-lab-dumbo-web-042318

    绑定，致电，申请实验室目标使用JavaScript的绑定，调用和应用方法来更改函数的范围并正确传递参数指示在本实验中，我们的测试定义了一些函数，然后将这些函数传递给我们要求您编写的函数。 您的函数不仅应调用作为...

    js代码-JavaScript的call/apply/bind函数实现

    在JavaScript中，`call()`, `apply()`, 和 `bind()` 是三个非常重要的函数，它们都与函数调用有关，但各自有不同的应用场景。本文将深入探讨这三个函数的实现原理及其使用方式。 首先，`call()` 函数允许我们调用一...

    关于Javascript中call与apply的进一步探讨

    在JavaScript中，`call`和`apply`是两个非常重要的方法，它们都用于改变函数调用时的上下文（即`this`的值），并且可以灵活地传递参数。本篇文章将深入探讨这两个方法的用法、区别以及实际应用场景。 `call`方法...

    理解JavaScript的caller callee call apply

    ### 理解JavaScript中的`caller`, `callee`, `call`, `apply` #### Arguments对象：JavaScript函数调用的参数管理器 在JavaScript中，每个函数都有一个隐含参数`arguments`，它允许开发者访问传递给函数的所有参数...

    javascript中apply、call和bind的用法区分_.docx

    ### JavaScript中apply、call和bind的用法区分 在JavaScript编程中，`apply`、`call`和`bind`这三个方法被广泛用于改变函数内部`this`的指向，这对于理解和编写复杂的JavaScript代码至关重要。虽然它们的功能相似，...

    javascript callApply代码示例

    javascript callApply代码示例

    js代码-apply/call/bind的例子（不带参数）

    在压缩包中的`main.js`文件可能包含了使用`apply()`, `call()`, 或 `bind()`的示例代码，`README.txt`可能提供了对这些示例的解释或使用场景。通过阅读和分析这些文件，你可以更好地理解这些方法的实际应用。

    2018-01-01JavaScript设计模式_1

    本篇将探讨JavaScript中的this、call和apply这三个关键知识点。 1. this的指向： - **作为对象的方法调用**：当函数作为对象的一个方法被调用时，`this`关键字会指向那个对象。例如： ```javascript var obj = {...

    浅谈javascript中的call、apply、bind_.docx

    JavaScript 中的 call、apply、bind 方法详解 JavaScript 中的 call、apply、bind 方法是 Function 对象自带的三个方法，这三个方法的主要作用是转变函数中的 this 指向，从而可以达到“接花移木”的效果。下面将对...

Magicbox
Global site tag (gtag.js) - Google Analytics