普通函数

  • 分析this所在的函数是哪个对象直接调用的,this指向该对象,没调用相当于window调用,所以指向window

示例1

var obj={};
obj.x = 10;
obj.y = function(){console.log(this.x)};
obj.y(); //console 输出10

示例2

    var click = function() {
    alert( this.x); 
    };
    var x = 'this is a property of window';

    var obj = {};
    obj.x = 100;
    obj.y = function(){ alert( this.x ); };

    var obj2 = obj.y;

    obj.y();   //弹出 100
    click();    //弹出 this is a property of window
    obj2();    //弹出 this is a property of window

这里obj.y()是直接调用的this所在函数所以this指向obj,x是obj里的x,输出100
click()是相当于window.x,输出this is a property of window
obj2()非直接调用,还是相当于window.x

apply、call

  • 通过apply,call重新定义 this的指向

示例3

function change(type,value){
    this.style[type] = value;
}
var one = document.getElementById('oen');
change.call( one , 'fontSize' , '100px' );//本来change(),this指向windowd,但call三个参数,第一个指定了该函数被哪个对象调用,这里是one,所以this指向one
  • apply与this类似,只不过后两个参数写成['fontSize' , '100px' ]变成1个。

嵌套函数

示例4


var obj = {
    x : 100,
    y : function(){
        setTimeout(
            function(){ alert(this.x); }    
         , 2000);
    }
};

    obj.y(); //undefined

  • 这里的this指向的是window对象,并不是我们期待的obj,所以会弹出undefined,要在外层函数就放一个this传就可以了 如下:\

var obj = {
    x : 100,
    y : function(){
        var that = this;
        setTimeout(
            function(){ alert(that.x); }
         , 2000);
    }
};

obj.y();    //弹出100

this 在构造函数中表示正在创建的对象
在方法中表示正在调用方法的对象

posted on 2016-07-28 10:04  sxy宇  阅读(94)  评论(0编辑  收藏  举报