将方法分配给变量时，ES6会丢失范围

Question

我发现了意外的行为。任何人都可以解释为什么当一个方法引用变量时，“this”会丢失，如下例所示？

class Foo {
  static bar() {
   return 'bar'; 
  }
  
  baz() {
   return this.constructor.bar(); 
  }
}

const foo = new Foo();

foo.baz(); // works fine

const baz = foo.baz;

baz(); // TypeError: Cannot read property 'constructor' of undefined

要点：https://gist.github.com/sznowicki/c076c52a0242c77a3044f4a79e9af4c3

Answer 1

而不是：

const baz = foo.baz;

你可以这样做：

const baz = foo.baz.bind(foo);

这将确保您在运行时foo在方法调用中绑定到this：

baz();

有关详细信息，请参阅文档：

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Answer 2

将this视为传递给带有调用方法对象的方法的额外参数。
因此：foo.baz()上调用foo，foo调用this。baz()。 但是this只是一个函数（不是方法，因为它不记得之前定义的对象）。这里很难说出const foo = bar.bind(instance)将保持的值（也取决于'use strict';）。

如何处理

1. 绑定它：bar.apply(instance, ...)。
2. 使用bar.call(instance, ...)或const foo = function() { instance.bar() }。
进行调用
3. 在功能中包裹实例：const foo = () => instance.bar()或this。
4. 请记住，箭头函数可以处理普通函数中的Pkg.clone("https://github.com/sylvaticus/LAJuliaUtils.jl.git") using DataFrames, LAJuliaUtils df = DataFrame( c1 = ['a','b','c','a','b','c'], c2 = ["aa","aa","bb","bb","cc","cc"], c3 = [1,2,3,10,20,30], ) customSort!(df, [(:c2,["bb","cc"]),(:c1,['b','a','c'])]) 6×3 DataFrames.DataFrame │ Row │ c1 │ c2 │ c3 │ ├─────┼─────┼──────┼────┤ │ 1 │ 'a' │ "bb" │ 10 │ │ 2 │ 'c' │ "bb" │ 3 │ │ 3 │ 'b' │ "cc" │ 20 │ │ 4 │ 'c' │ "cc" │ 30 │ │ 5 │ 'b' │ "aa" │ 2 │ │ 6 │ 'a' │ "aa" │ 1 │ differently。