js:关于箭头函数this指向和bind

1.bind方法注意事项：

调用 f.bind(someObject) 会创建一个新函数，这个新函数具有与 f 相同的函数体和作用域，但 this 的值永久绑定到 bind 的第一个参数，无论函数如何被调用。

function f() {
  return this.a;
}

const g = f.bind({ a: "azerty" });
console.log(g()); // azerty

const h = g.bind({ a: "yoo" }); // bind 只能生效一次！
console.log(h()); // azerty

const o = { a: 37, f, g, h };
console.log(o.a, o.f(), o.g(), o.h()); // 37 37 azerty azerty

2.关于箭头函数this

函数是作为箭头函数的形式创建的，所以它的 this 永久地绑定到其执行上下文中的 this

const obj = {
  getThisGetter() {
    const getter = () => this;
    return getter;
  },
};
const fn = obj.getThisGetter();
console.log(fn() === obj); // true

这个例子意思是：getter里的this永远指向的是其执行上下文getThisGetter的this就是obj；由于类体具有 this 上下文，因此作为类字段的箭头函数会关闭类的 this 上下文，箭头函数体中的 this 将正确指向实例（对于静态字段来说是类本身）。但是，由于它是一个闭包，而不是函数本身的绑定，因此 this 的值不会根据执行上下文而改变。

class C {
  a = 1;
  autoBoundMethod = () => {
    console.log(this.a);
  };
test(){
    console.log(this.a)
}
}

const c = new C();
c.autoBoundMethod(); // 1
const { autoBoundMethod } = c;
autoBoundMethod(); // 1
c.test() // 报错，this指向undefined

// 如果调用类的普通函数，此时应该是 undefined,因为class类是严格模式；

function a () {
    var a =9;
    return function b() {
        var b=4;
        return () => {console.log(this)}
    }
}
a()()();// window或严格模式下的undefined

   这里箭头函数this指向的是函数b的this；

const obj = {
    name: 1,
    a: {
        name: 2,
        foo: function() {
            console.log(this);   // 这里的 this 是 obj.a
        },
        too: () => console.log(this)  // 这里的 this 是全局对象，window 或 undefined
    }
};
obj.a.foo();   // this指向的是obj.a
obj.a.too();  // 输出全局对象或 undefined（严格模式下）

这里的too的this指向的obj的上下文为全局，
注意：
箭头函数的的上下文是属性和方法时候，this指向是不同的；
上下文是普通函数时候指向取决于函数的调用；
上下文为属性时候this指向obj所坐在的作用域，为全局作用域；

const obj = {
    name: 1,
    a: {
        name: 2,
        foo: function() {
            console.log(this);   // 这里的 this 是 obj.a
        },
        too: () => console.log(this),  // 这里的 this 是全局对象，window 或 undefined
        roo() {
            const test = () => {console.log(this)};
            return test;
        }
    }
};

const roo = obj.a.roo;
roo()();               //指向window；
const roo = obj.a.roo();
roo();                //指向obj.a;

总结：

• 普通函数 的 this 是调用时决定的，谁调用就指向谁。
• 箭头函数 的 this 是定义时决定的，继承外层作用域的 this。