zoukankan      html  css  js  c++  java
  • 学习javascript的动态this指针与动态绑定 call与apply函数的应用

    javascript作为一门松散型的脚本语言和动态语言,最明显就是那个dynamic this。它一般都是作为函数调用者存在。

    在javascript,所有关系都可以作为对象的一个关联数组元素而存在。那么函数就是被掰成两部分储存于对象,一是其函数名(键),一是函数体(值)。

    那么函数中的this一般都指向函数所在的对象。但这是一般而已,在全局调用函数时,我们并没有看到调用者,或者这时就是window。不过,函数声明后,其实并没有绑定到任何对象,因此我们可以用call apply这些方法设置调用者。


    一个简单的例子:
    window.name = "window";
    var run = function() {
      alert("My name is " + this.name);
    }
    run();
    这里你不能说run是作为window的一个属性而存在,但它的确是被window属性调用了。实质上大多数暴露在最上层的东西都则window接管了。在它们需要调用时被拷贝到window这个对象上(不过在IE中window并不继承对象),于是有了window['xxx']与window.xxx性能上的差异。这是内部实现,不深究了。

    另一个例子,绑定到一个明确的对象上 


    window.name = "window";
    object = {
      name: "object", 
      run: function() {
        alert("My name is " + this.name);
      }
    };

    object.run(); 

    答案显然易见,this总是为它的调用者。但如果复杂一点呢? 


    window.name = "window";
     object = {
       name: "object",
       run: function() {
         var inner = function(){
           alert("My name is " + this.name);
         }
         inner();
       }
     };

    object.run(); 


    尽管它是定义在object内部,尽管它是定义run函数内部,但它弹出的既不是object也不是run,因为它既不是object的属性也不是run的属性。它松散在存在于run的作用域用,不能被前两者调用,就只有被window拯救。window等原生对象浸透于在所有脚本的内部,无孔不入,只要哪里需要到它做贡献的地方,它都义不容辞。但通常我们不需要它来帮倒忙,这就需要奠出call与apply两大利器了。 


    window.name = "window";
    var object = {
      name: "object",
      run: function() {
        inner = function() {
         alert( this.name);
        }
        inner.call(this);
      }
    }
    object.run();
    call与apply的区别在于第一个参数以后的参数的形式,call是一个个,aplly则都放到一个数组上,在参数不明确的情况,我们可以借助arguments与Array.slice轻松搞定。

    JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别。 

     先来看看JS手册中对call的解释:

    call 方法
    调用一个对象的一个方法,以另一个对象替换当前对象。

    call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

    参数
    thisObj
    可选项。将被用作当前对象的对象。

    arg1, arg2,  , argN
    可选项。将被传递方法参数序列。

    说明
    call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
    如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。 

    说明白一点其实就是更改对象的内部指针,即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。 


     举个现成的例子,运行后自然就明白其道理:

    <input type="text" id="myText"   value="input text">  
    <script>  
        
    function Obj(){this.value="对象!";}  
        
    var value="global 变量";  
        
    function Fun1(){alert(this.value);}  
      
        window.Fun1();   
    //global 变量  
        Fun1.call(window);  //global 变量  
        Fun1.call(document.getElementById('myText'));  //input text  
        Fun1.call(new Obj());   //对象!  

    </script>  


    call函数和apply方法的第一个参数都是要传入给当前对象的对象,及函数内部的this。后面的参数都是传递给当前对象的参数。
    运行如下代码:


    <script>  
       
    var func=new function(){this.a="func"}  
        
    var myfunc=function(x){  
            
    var a="myfunc";  
            alert(
    this.a);  
            alert(x);  
        }  
        myfunc.call(func,
    "var");  
    </script>  

    这里,分别弹出了 func 和 var 。到这里就对call的每个参数的意义有所了解了。 

    对于apply和call两者在作用上是相同的,但两者在参数上有区别的。
    对于第一个参数意义都一样,但对第二个参数:
    apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。
    如 func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3])
    同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入。

    感兴趣的朋友可以继续学习下 bind() 方法, 这里不作深入

     function bind(context,fn) {

      var args = Array.prototype.slice.call(arguments, 2);
      return args.length == 0 ? function() {
        return fn.apply(context, arguments);
      } : function() {
        return fn.apply(context, args.concat.apply(args, arguments));
      };
    };


    总结:


    this 的值取决于 function 被调用的方式,一共有四种:
    第一种:

    如果一个 function 是一个对象的属性,该 funtion 被调用的时候,this 的值是这个对象。

    第二种: 

    如果 function 调用的表达式包含句点(.)或是 [],this 的值是句点(.)或是 [] 之前的对象。如myObj.func 和myObj["func"] 中,func 被调用时的 this 是myObj。

    第三种: 

    如果一个 function 不是作为一个对象的属性,那么该 function 被调用的时候,this 的值是全局对象。

    当一个 function 中包含内部 function 的时候,如果不理解 this 的正确含义,很容易造成错误。这是由于内部 function 的 this 值与它外部的 function 的 this 值是不一样的。解决办法是将外部 function 的 this 值保存在一个变量中,在内部 function 中使用它来查找变量。

    第四种: 

    如果在一个 function 之前使用 new 的话,会创建一个新的对象,该 funtion 也会被调用,而 this 的值是新创建的那个对象。如function User(name) {this.name = name}; var user1 = new User("Alex"); 中,通过调用new User("Alex") ,会创建一个新的对象,以user1 来引用,User 这个 function 也会被调用,会在user1 这个对象中设置名为name 的属性,其值是Alex 。


    可以通过 function 的 apply 和 call 方法来指定它被调用的时候的 this 的值。 apply 和 call 的第一个参数都是要指定的 this 的值。由于它们存在,我们得以创建各种有用的函数。

     下面贴出运行的例子,大家可以在firefox跟踪参数的变化情况。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        
    <title></title>
        
    <script src="jquery.min.js" type="text/javascript"></script>
        
    <script type="text/javascript">

            window.name 
    = "window";

            
    var run = function () {
                alert(
    "run name is " + this.name);
            }

            
    var run_obj = {
                name: 
    "run_obj",
                run: 
    function () {
                    alert(
    "run_obj name is " + this.name);
                }
            };

            
    var run_obj_second = {
                name: 
    "run_obj_second",
                run: 
    function () {
                    
    var inner = function () {
                        alert(
    "run_obj_second name is " + this.name);
                    };
                    inner();
                }
            };

            
    var run_obj_three = {
                name: 
    "run_obj_three",
                run: 
    function () {
                    
    var inner = function () {
                        alert(
    "run_obj_three name is " + this.name);
                    };
                    inner.call(
    this);
                }
            };

            jQuery(document).ready(
    function () {

                $(
    "#btntest").click(function () {

                    run();

                    run_obj.run();

                    run_obj_second.run();

                    run_obj_three.run();

                });


                
    var message = 'Spoon!';
                $(
    '#foo').bind('click', { msg: message }, function (event) {
                    alert(event.data.msg);
                });
                message 
    = 'Not in the face!';
                $(
    '#bar').bind('click', { msg: message }, function (event) {
                    alert(event.data.msg);
                });

            });

            


        
    </script>
    </head>
    <body>
        
    <div>
            
    <input type="button" value="test" id="btntest" />
        
    </div>
        
    <div id="foo">foo</div>
        
    <div id="bar">bar</div>
    </body>

    </html> 

  • 相关阅读:
    Scala实现Mapreduce程序4-----数据去重
    Scala实现Mapreduce程序3----数据排序
    Scala实现Mapreduce程序2-----Top5
    Scala实现Mapreduce程序1-----求平均数
    scala学习--难点
    scala基础--01
    平台调优方案
    beeline on spark 自动重启--脚本
    安装rundeck脚本
    杀死所有的kitchen进程
  • 原文地址:https://www.cnblogs.com/taoqianbao/p/2017409.html
Copyright © 2011-2022 走看看