JavaScript中的this

两个例子:


  var name = "The Window";
  var object = {
    name : "My Object",
    getNameFunc : function(){
      return function(){
        return this.name;
      };
    }
  };
    console.log(object.getNameFunc());//function(){return this.name;}
  console.log(object.getNameFunc()());//The Window。上行的函数作为单纯函数调用时(单纯执行return this.name),this指向全局对象(严格模式时,为undefined)

 


  var name = "The Window";
  var object = {
    name : "My Object",
    getNameFunc : function(){
      var that = this;
      return function(){
        return that.name;
      };
    }
  };
    console.log(object.getNameFunc());//function(){return that.name;}
  console.log(object.getNameFunc()());//My Object。函数作为对象的方法调用时(调用that),this指向该对象。

 总结:


  var name = "The Window";
  var object = {
    name : "My Object",
    getNameFunc : function(){
           console.log(this==object); //true
      return function(){
              console.log(this); //Window
        return name//"The Window"
      };
    }
  };
  console.log(object.getNameFunc()());//"The Window"

 

结合闭包


var myObject=(function(){
    console.log(this); //Window
    var _name='sven'//私有变量
    var pp='55';
    return//公开方法
        pp:'66',
        getName:function(){
            console.log(this==myObject); //true
            return _name;
        }
    }
})();
console.log(myObject);//{pp:'66',getName:function(){return _name;}

//单纯地提取出myObject里面的值:
console.log(myObject.pp);//66
console.log(myObject.getName);//function (){return _name;}
console.log(myObject._name);//undefined  不存在的

//执行return _name
console.log(myObject.getName());//sven  通过return读取私有变量

 

如果在公开方法里添加_name


var myObject=(function(){
    console.log(this);//Window
    var _name='sven'//私有变量
    var pp='55'//私有变量
    return//公开方法
        pp:'66',
        _name:'jack',
        getName:function(){
            console.log(this==myObject); //true
            return _name;
        }
    }
})();
console.log(myObject);//{pp:'66',_name:'jack',getName:function(){return _name;}

//单纯地提取出myObject里面的值:
console.log(myObject.pp);//66
console.log(myObject.getName);//function (){return _name;}
console.log(myObject._name);//jack  
//结论:总是会单纯地返回 return得到的myObject里面的属性

//执行return _name
console.log(myObject.getName());//sven  
//如果第一行的私有变量_name未赋值,这里也会变成undefined,所以return _name总是返回私有变量的_name,与其他地方(return里面)的_name无关

如果使用this


var myObject=(function(){
    console.log(this);//Window
    var _name='sven'//私有变量
    var pp='55'//私有变量
    return//公开方法
        pp:'66',
        _name:'jack',
        getName:function(){
            console.log(this==myObject);//true
            return this._name;
        }
    }
})();
//只是function里加多了this,其他与上面的结论没什么变化
console.log(myObject);//{pp:'66',_name:'jack',getName:function(){return this._name;}
console.log(myObject.pp);//66
console.log(myObject.getName);//function (){return this._name;}
console.log(myObject._name);//jack  

//执行return _name
console.log(myObject.getName());//jack  this指向return回来的那个object,其实也就是myObject,只不过私有变量全部隐藏,只有return到的值(object)
//同样地,如果里面的_name:'jack'不存在(未定义),结果就会是undefined
//结论:绑定this后,myObject.getName()等价于myObject._name

 

 

 

 this的使用

情况一:纯粹的函数调用


  var x = 1;
  function test(){
    this.x = 0;
  }
  test(); //window调用test函数,所以this指的就是window
  console.log(x); //0

 

情况二:作为对象方法的调用


  function test(){
    console.log(this.x);
  }
  var myObject = {
        x:1,
        y:test
    };
    myObject.y(); // 1

 

情况三:apply调用


    var x=0;
  function test(){
    console.log(this.x);
  }
  var myObject = {
        x:1,
        y:test
    };
      myObject.y.apply();//0
    //apply()的参数为空时,默认调用全局对象
    myObject.y.apply(myObject); //1

 

情况四:作为构造函数调用


  function test(){
     this.x = 1;
  }
  var myExample = new test();
  console.log(myExample.x); // 1

 

posted @ 2017-03-28 11:02  森森森shen  阅读(154)  评论(0编辑  收藏  举报