This这个高科技

126 阅读2分钟

由于运行期绑定的特性,JavaScript 中的 this 含义非常多,它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式

随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象

如果直接调用这个函数里的this 这个this就是Windows

在函数被直接调用时this绑定到全局对象。在浏览器中,window 就是该全局对象

console.log(this);

function fn1(){
    console.log(this);
}

fn1();
这个this就是Windows

内部函数

函数嵌套产生的内部函数的this不是其父函数,仍然是全局变量

function fn0(){
    function fn(){
        console.log(this);
    }
    fn();
}

fn0();
这里的this还是Windows 背下来就完事了

在setTimeout、setInterval中

document.addEventListener('click', function(e){
    console.log(this);
    //这里的this是document
    setTimeout(function(){
        console.log(this);
    }, 200);
}, false);

如果出现了回调函数那么这个this 80-90%都会变掉

作为构造函数调用

所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象

new 运算符接受一个函数 F 及其参数:new F(arguments...)。这一过程分为三步:

1 创建类的实例。这步是把一个空的对象的 proto 属性设置为 F.prototype 。 初始化实例。

2 函数 F 被传入参数并调用,关键字 this 被设定为该实例。

3 返回实例。

举个例子

function Person(name){
    this.name = name;
    //这里的this就是P1
}
Person.prototype.printName = function(){
    console.log(this.name);
    //这里的this还是其调用的对象P1
};

var p1 = new Person('Byron');
var p2 = new Person('Casper');
var p3 = new Person('Vincent');

p1.printName();
p2.printName();
p3.printName();

作为对象方法调用

看例子

var obj1 = {
    name: 'Byron',
    fn : function(){
        console.log(this);
        //这里还是obj1调用了这个函数所以这个this就是obj1
        //注意调用this不要重名不然很有可能把属性覆盖掉
    }
};

obj1.fn();

小陷阱

var fn2 = obj1.fn;

fn2();
注意这里打印的this绝对就是windows 因为讲其引用给了FN2所以导致了
地址的变更所以这里的THIS就是Windows