zoukankan      html  css  js  c++  java
  • 理解JavaScript中的this

    在JavaScript中,this关键字是用来引用 调用该函数的 那个对象的。看几个栗子:

    var name="Window";
    var obj={
        name:"Object",
        funObj:function(){
                console.log(this.name);
        }  
    };
    //
    var funObjCopy=obj.funObj;
    function a(){
        console.log(this.name);
    }
    obj.aCopy=a;
    
    //Object
    obj.funObj();
    //Window
    funObjCopy();
    //Window
    a();
    //Object
    obj.aCopy();

    从上面的例子可以看出,this引用的是 调用该函数时“.”前面的那个对象(如 obj.funObj()、obj.aCopy() );如果没有通过“.”的方式而是直接调用,那么this引用的就是全局对象,换句话说,如果这个对象是一个函数调用对象或者全局对象,那么将得到对全局对象的引用;

    接下来是个在嵌套函数中使用this的栗子:

    var name="Window";
    function test(){
        var name="test01";
        console.log(name);
        console.log(this.name);
        function funF(){
            var name="test02";
            console.log(name);
            console.log(this.name);
        }
        funF();
    }
    
    //test01 Window  test02 Window
    test();

    注意funF函数中打印this.name得到的依然是Window;再来看一个类似例子:

    var name="Window";
    var obj={
        name:"Object",
        funObj:function(){
            var name="Function";
            function funF(){
                return this;
            }
            console.log(name);
            console.log(this.name);
            console.log(funF().name);
        }
    };
    
    //Function  Object  Window
    obj.funObj();

    注意这个例子中funF函数返回的是window对象,所以打印的结果依然是Window;由此我们可以得出:在方法内嵌套的函数中使用this,仍然会得到对全局对象的引用(除了通过“.”方式调用的)。

    突然想到了call()和apply()方法,顺便记一下了

    每个函数都包含两个非继承而来的方法:call()和apply();这两个方法的作用是一样的,都是为了在特定的作用域中调用函数,换句话说其实就是设置函数体内this对象的值。区别就在于apply()只接受两个参数,第一个和call()一样,都是指定this对象的值,另一个是必须是参数数组(可以是Array的实例,也可以是arguments对象);而call()方法的参数则必须逐个列举出来,将就第一个例子来看看:

    var name="Window";
    var obj={
        name:"Object",
        funObj:function(){
            var name="Function";
            console.log(this.name);
        }
    };
    function a(){
        console.log(this.name);
    }
    
    //Window
    a();
    //Object
    a.call(obj);
    //Object
    a.bind(obj);
  • 相关阅读:
    后端返回文件前端实现下载功能
    Oracle 树操作(select…start with…connect by…prior)
    javascript异步加载的三种解决方案
    百度地图 异步加载
    jQuery中的siblings
    Jquery点击表格单位时选中其中的Radio的三个方法
    Oracle自增长ID
    Oracle修改时间报:ORA-01830: 日期格式图片在转换整个输入字符串之前结束的解决办法
    Oracle sqlldr导入导出txt数据文件详解
    SQL Server 2012大数据导入Oracle的解决方案
  • 原文地址:https://www.cnblogs.com/lazychen/p/5287599.html
Copyright © 2011-2022 走看看