zoukankan      html  css  js  c++  java
  • (O)js核心:this

    什么是this

       this是js中的一个关键词,它总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的,而非函数被声明时的环境。

       当函数被调用时,this被添加到作用域中,例如:

    function add(num1,num2) {
        var sum = num1 + num2;
        return sum;
    }
    var total = add(5,10);

       add的作用域链如下图所示,我们可以看到作用域链中的两个this(一个全局作用域中的this和add作用域中的this,后面我们将明白为何两个this都指向window):

     

    this的指向

    this总是指向所属函数的拥有者对象,具体分为3种情况

    1.作为对象的方法调用:  当函数作为对象的方法被调用时,this指向该对象。

    var obj={
        a:1,
        getA:function(){
            alert(this===obj);
            alert(this.a);
        }    
    };
    obj.getA();  //分别输出ture和1

    2.作为普通函数调用:  当函数不作为对象的属性被调用时,也就是我们常说的普通函数方式,此时的this总是指向全局对象。

    window.name='jacksplwxy';
    var getName=function(){
        return this.name;
    };
    console.log(getName());  //输出jacksplwxy

    3.构造器调用:  当用new调用构造函数时,该构造函数会返回一个对象,一般情况下,this就会指向这个返回对象。

    var myClass=function(){
        this.name='jacksplwxy';
    };
    var obj=new myClass();
    console.log(obj.name);  //输出:jacksplwxy

    this实战

       技巧:this总是指向所属函数的拥有者对象

    //实战1:
    var obj={
        myName:'jacksplwxy',
        getName:function(){
            return this.myName;
        }
    };
    console.log(obj.getName());  //输出: jacksplwxy
    
    var getName2=obj.getName;
    console.log(getName2());  //输出:undefined
    
    
    /*解析:
       当调用obj.getName时,getName方法作为obj对象的属性被调用的,根据this指向情形1规律,此时this
    指向obj对象,所示输出jacksplwxy。
       当用另外一个变量getName2来引用obj.getName,并调用getName2时,根据this指向情形2规律,此时是
    普通函数调用方式,this是指向全局window的。所以输出undefined。*/
    //实战2:
    var foo = "window";
    var obj = {
        foo : "obj",
        getFoo : function(){
            return function(){
                return this.foo;
            };
        }
    };
    var f = obj.getFoo();
    f(); //window
    
    /*解析:
    执行var  f = obj.getFoo()返回的是一个匿名函数,相当于:
    var f = function(){
         return this.foo;
    }
    f()相当于window.f(), 因此f中的this指向的是window对象,this.foo相当于window.foo, 所以f()返回"window" 
    */
    //实战3:
    var foo = "window";
    var obj = {
        foo : "obj",
        getFoo : function(){
            var that = this;
            return function(){
                return that.foo;
            };
        }
    };
    var f = obj.getFoo();
    f(); //obj
    
    /*解析:
    执行var f = obj.getFoo() 同样返回匿名函数,即:
    var f = function(){
         return that.foo;
    }
    唯一不同的是f中的this变成了that, 要知道that是哪个对象之前,先确定f的作用域链:f->getFoo->window 并在该链条上查找that,此时可以发现that指代的是getFoo中的this, getFoo中的this指向其运行时的调用者,从var f = obj.getFoo() 可知此时this指向的是obj对象,因此that.foo 就相当于obj.foo,所以f()返回"obj"
    */

    转载请注明文章出处:http://www.cnblogs.com/jacksplwxy/p/6701874.html

  • 相关阅读:
    des加密
    http请求报错
    js生成二维码(jquery自带)
    tomcat跨域请求
    jsp读取properties文件
    spring+mybatis整合读取不了配置文件
    svn提交报e200007错误
    firefox兼容性问题
    Oracle学习笔记(2)
    Spring设置定时器:quartz
  • 原文地址:https://www.cnblogs.com/jacksplwxy/p/6701874.html
Copyright © 2011-2022 走看看