zoukankan      html  css  js  c++  java
  • JS进阶,解释this古怪行为

    Douglas Crockford大师把this古怪的行为解释为和函数的调用模式有关。js中有四种调用模式---方法、函数、构造器以及apply调用模式,它们在初始化this时候是不一样的。1)方法模式:简单的说就是使用点表达式或是...
     

       

     

    Douglas Crockford大师把this古怪的行为解释为和函数的调用模式有关。
    js中有四种调用模式---方法、函数、构造器以及apply调用模式,它们在初始化this时候是不一样的。


    1)方法模式:简单的说就是使用点表达式或是下标表达式来调用 这里定然是有对象的 这种情况下 this的绑定发生在调用的时候 绑的自然是调它的那个对象了。
    作为方法调用的函数有一个非常重要的属性:在方法体中,用来调用方法的对象成为关键字this的值


    2)函数模式:这个就更简单了,函数名加调用运算符('()')。不过要小心,这个this绑的可是全局对象,不管你写哪了。(可以理解成  你不给我指明了   我就自己给它加个全局对象)
    当一个函数作为函数调用而不是方法调用时,这个this关键字引用全局对象。容易混淆的是,当一个嵌套的函数(作为函数)在一个包含的函数中调用,而这个 包含的函数是作为方法调用的,这也是成立的:this关键字在包含的函数中有一个值,但是它却(不太直观地)引用嵌套的函数体的内部的全局对象。


    看个例子吧
    var a = 'global';
    var obj = {
        a : 'local',
        test : function(){
            function test1(){
                alert(this.a);//global
            }
            alert(this.a);//local
            test1();
        }
    };
    obj.test();
    /*****************************解决这个问题的方法*****************************/
    var a = 'global';
    var obj = {
        a : 'local',
        test : function(){
            var that = this;
            function test1(){
                alert(that.a);//local
            }
            alert(this.a);//local
            test1();
        }
    };
    obj.test();
     
    3)构造器调用模式  一句话就是用new来调用的  new的时候this就绑定到新对象上了  比较好理解
    (1)new运算符后面必须跟着一个函数调用。new创建了一个新的没有任何属性的对象,然后调用该构造函数,把新的对象作为this关键字的值传递。
    (2)构造函数通常没有返回值。它们初始化作为this的值来传递的对象,并且没有返回值。但一个构造是允许返回一个对象值,并且如果它这么做,返回的对象成为new表达式的值。在此情况下,作为this的值的对象会被抛弃。可参考jQuery构造函数。


    4)apply,call调用模式  apply,call是函数对象的方法,你想把谁绑定到this 就直接把它作为第一个参数传给apply或call就好了。


     ECMAScript规范给所有函数定义了两个方法call()和apply(),使用这两个方法可以像调用其他对象的方法一样调用函数。call()和apply()的第一个参数都是要调用的函数的对象,在函数体内这一参数是关链字this的值。call()的剩余参数是传递给要调用的函数的值。

  • 相关阅读:
    Event bubbling
    input/change event practice
    Form event
    Event_Object
    DOM_this keyword
    Random color generator exercise
    DOM_events_addEventListener
    Spring值SpEL
    Spring之使用外部属性文件
    Spring之Bean的作用域
  • 原文地址:https://www.cnblogs.com/lucky323ping/p/2994038.html
Copyright © 2011-2022 走看看