浅谈JS中this的几种用法

来源:互联网 发布:星海牌萨克斯淘宝网 编辑:程序博客网 时间:2024/06/06 02:51
作为对象方法调用
在JS中,函数也是对象,因此函数可以作为一个对象的属性,此时该函数被称为该对象的方法.在使用这种调用方式时,this被自然绑定到该对象.
清单 
var point = {
 x : 0; //设置属性x的初始属性值为0
 y : 0; //设置属性y的初始属性值为0    
 
 moveTo : function(x,y){ //设置属性moveTo的属性值为一个函数对象 此时                            //moveTo为point对象的方法函数
   this.x = this.x + x; //this是point对象的x属性值为point的x初始属性值                          +传入的参数x的值
   this.y = this.y + y;  
 }
};
point.moveTo(1,1); //this绑定的是当前对象,即point对象
document.write(point.x) 打印输出1
document.write(point.y) 打印输出1


作为函数调用 
函数也可以直接被调用,此时this绑定到的是全局对象,在浏览器中,window就是该全局对象,this被绑定到全局对象,赋值语句相当于隐式的声明了一个全局变量。
function makeNoSense(x){
  this.x = x;  //this相当于全局对象window对象 浏览器中window对象就是全局对象
 }
 makeNoSense(5); //调用函数
 document.write(x); //输出5 全局变量可以在函数外直接访问


对于内部函数
 var point = {
      x:0,
 y:0,
 moveto : function(x,y){
        var moveX = function(x){
  this.x = x; //this指向window对象 相当于window.x 
};
var moveY = function(y){
  this.y = y;  //this指向window对象
};   
  moveX(x); //调用内部函数 此时内部函数的this为全局对象浏览器全局对象也就是window对象
  moveY(y);            
      }
     };
point.moveto(1,1); //调用moveto方法传递参数1,1 
point.x; //输出0  this指向全局对象 内部函数this的赋值 隐式声明一个全局变量 此时point.x属性值并未被赋值 还是初始值0 属性y同理
point.y; //输出0
x; //输出1 
y; //输出1 


//此段代码如果需要制定this为当前对象那么需要改进 将this赋值给变量that
var point = {
x : 0,
y : 0,
moveto : function(x,y){
 var that = this; //this对象赋值给that变量
 var moveX = function(x){
  that.x = x; //that变量的x属性赋值为传入的参数x值
 }
 var moveY = function(y){
      that.y = y;
 }  
 moveX(x); //输出1 调用函数moveX
 moveY(y);  
}
};
 point.moveto(1,1);
 point.x; //输出1 相当于that.x
 point.y; //输出


作为构造函数调用
  function Point(x,y){ //创建一个构造函数
  this.x = x; 
  this.y = y;
 }
 point = new Point(1,1); // 使用new将构造函数实例化为point新对象
 document.write(point.x); //输出1 函数内this的x属性 this绑定到新建的对象 this.x = point.x x的参数为1
 document.write(point.y); 

0 0