前端js中This2021-09-10

this指window

简单说说this指向

全局中的this 指 window；

普通函数中的this指 window；

自调用函数中的this window；

定时器中的this指 window；

事件函数中的this 指的是 事件源；

箭头函数中的this 指的是 上一级中的this；

对象方法中的this指的是 对象；

改变this的指向：

this 指向：
1. 全局上下文（函数外）
无论是否为严格模式，均指向全局对象。注意:严格模式下全局对象为undifined
2. 函数上下文（函数内）
默认的，指向函数的调用对象，且是最直接的调用对象：
简单调用，指向全局对象注意:严格模式下全局对象为undifined，某些浏览器未实现此标准也可能会是window

说这么多那我们就来段代码玩玩this指向
改变this指向的方式：
1. 第一种： new关键字改变this指向

//构造函数版this
function Fn(){
    this.user = "李某";
}
var a = new Fn();
console.log(a.user); //李某
/*----------------------------------------*/
2. 第二种： call()
// 把b添加到第一个参数的环境中，简单来说，this就会指向那个对象
var a = {
    user:"李某",
    fn:function(){
        console.log(this.user); //李某
    }
}
var b = a.fn;
b.call(a);  //若不用call，则b()执行后this指的是Window对象
/*----------------------------------------*/
3. 第三种：apply()
// apply方法和call方法有些相似，它也可以改变this的指向，也可以有多个参数，但是不同的是，第二个参数必须是一个数组
var a = {
    user:"李某",
    fn:function(){
        console.log(this.user); //李某
    }
}
var b = a.fn;
b.apply(a);
/*----------------------------------------*/
4. 第四种：bind()
// bind方法返回的是一个修改过后的函数,
// bind也可以有多个参数，并且参数可以执行的时候再次添加，但是要注意的是，参数是按照形参的顺序进行的。
var a = {
    user:"张三",
    fn:function(){
        console.log(this.user); //张三
    }
}
var b = a.fn;
var c = b.bind(a);
c();

bind()方法主要就是将函数绑定到某个对象，
bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()第一个参数的值

箭头函数this:

由于箭头函数不绑定this， 它会捕获其所在（即定义的位置）上下文的this值， 作为自己的this值
1. 所以 call() / apply() / bind() 方法对于箭头函数来说只是传入参数，对它的 this 毫无影响。
2. 考虑到 this 是词法层面上的，严格模式中与 this 相关的规则都将被忽略

作为方法的箭头函数this指向全局window对象，而普通函数则指向调用它的对象