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

    一直对js的this不怎么理解,最近看了JavaScript 语言精髓的相关章节,有点清晰的理解了,记录记录
    /*
    
     来自: JavaScript 语言精髓
    
     方法:当一个函数被定义为对象的一个属性时,我们称它为一个方法.
    
     this : 在函数访问this时,this被绑定到了 全局对象.
    
     */
    
    //全局函数
    var log = function(msg){
        document.writeln("<br>" + msg + "<br>");
    };
    
    log("**************thistest.js***************");
    
    //定义一个全局变量
    var value = 100;
    
    //函数
    var add = function(a, b){
        var value = 11;
        //访问内部变量
        log("add:value = " + value); // 输出 add:value = 11
        //此时访问this时,this绑定的全局对象,如 this.value 可以访问到上面定义的 value
        log("add:this.value = " + this.value); // 输出 100
        return a + b;
    }
    
    // add是一个函数,在add里访问 this ,this绑定到的是全局对象
    
    add(1, 2);
    //输出:
    //add:value = 11
    //add:this.value = 100

    下面定义一个对象

    //对象
    var myObj = {
    
        //对象的属性
        value:0,
    
        //方法
        increment:function(inc){
    
            //此时访问this时,this绑定的时myObj对象
            log("myObj.increment():myObj.value = " + this.value);//输出 myObj.value 的值
    
            //调用一次 value的值增加1
            this.value += typeof inc ==='number'?inc : 1;
    
        }
    
    };

    有时候我们在方法内部会定义函数,那么函数怎么调用对象属性呢,如果在函数内容直接用this是访问不到对象的

    //对象
    var myObj = {
    
        //对象的属性
        value:0,
    
        //方法
        increment:function(inc){
    
            //此时访问this时,this绑定的时myObj对象
            log("myObj.increment():myObj.value = " + this.value);//输出 myObj.value 的值
    
            //调用一次 value的值增加1
            this.value += typeof inc ==='number'?inc : 1;
    
            //定义内部函数,注意还是函数,所以函数内部访问this还是只能访问到 全局对象
            var inFun = function(){
                //此时访问this时,this绑定的全局对象,如 this.value 可以访问到上面定义的 value
                log("myObj.increment.inFun:this.value = " + this.value);
            };
            inFun();
        }
    
    };

    为了能在inFun函数内访问到myObj对象,我们先把myObj对象保存在一个变量里,

    //对象
    var myObj = {
    
        //对象的属性
        value:0,
    
        //方法
        increment:function(inc){
    
            //把当前对象myObj引用保存在self变量,随后的函数就可以访问self 来代替访问myObj对象
            var self = this;
    
            //此时访问this时,this绑定的时myObj对象
            log("myObj.increment():myObj.value = " + this.value);//输出 myObj.value 的值
    
            //调用一次 value的值增加1
            this.value += typeof inc ==='number'?inc : 1;
    
            //定义内部函数,注意还是函数,所以函数内部访问this还是只能访问到 全局对象
            var inFun = function(){
                //此时访问this时,this绑定的全局对象,如 this.value 可以访问到上面定义的 value
                log("myObj.increment.inFun:this.value = " + this.value);
                //
                log("myObj.increment.inFun:myObj.value = " + self.value);
            };
            inFun();
        }
    
    };

    给 myObj增一个double方法

    myObj.double = function(){
        var self = this;
        var helper = function(){
            //此处不能用 this.value 访问到myObj.value的值
            //add函数前的this可以省略,也可以用 this.add(a,b);
            self.value = add(self.value, self.value);
        };
        helper();
    };

    调用double方法,即可使用myObj.value的值翻倍

  • 相关阅读:
    hdu 1015 Safecracker 暴力搜索
    hdu 1239 Calling Extraterrestrial Intelligence Again 枚举
    hdu 3747 Download 菜鸟杯
    hdu 3744 A Runing Game 菜鸟杯
    Request.QueryString 使用时候应该注意的地方。
    图片 上一张 下一张 链接效果
    ASP.NET 输出缓存的移除
    RSS 消费
    RSS 订阅功能的实现
    创建型模式单件模式(1)
  • 原文地址:https://www.cnblogs.com/imzhstar/p/4175177.html
Copyright © 2011-2022 走看看