this关键字

• 普通函数
• apply、call
• 嵌套函数

普通函数

• 分析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 在构造函数中表示正在创建的对象
在方法中表示正在调用方法的对象

转载于:https://www.cnblogs.com/gatinul/p/5713467.html