值为箭头函数的属性

假设我们要设计一个 Person 类，代码如下

class Person {
    name: string
    age: number
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    logName = function(name: string) {
        console.log('my name is ' + name)
    }
    getName = function() {
        this.logName(this.name)
    }
}
const p1: Person = new Person('Richard', 12);
const { getName } = p1; // 通过对象的解构赋值，提取出 getName 
p1.getName(); // my name is Richard
getName(); // TypeError: this.logName is not a function

当我们将 getName 函数单独提取出来使用的时候，this 会指向 getName 运行时所在的作用域，这时候会因为找不到 logName 方法而报错。
一个可行的解决方案是用 bind 方法来为 getName 绑定作用域

class Person {
    name: string
    age: number

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    logName = function(name: string) {
        console.log('my name is ' + name)
    } // 利用 bind 方法为 logName 绑定作用域

    getName = function() {
        this.logName(this.name)
    }.bind(this)
}

const p1: Person = new Person('Richard', 12);
const { getName } = p1; // 通过对象的解构赋值，提取出 getName 

p1.getName(); // my name is Richard
getName(); // my name is Richard

与 bind 方法相比，更简明的方法是利用 ES6 中提供的箭头函数。

class Person {
    name: string
    age: number

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    logName=function (name: string)  {
        console.log('my name is ' + name)
    } // 利用箭头函数为 logName 绑定作用域

    getName = () =>{
        this.logName(this.name)
    }
}

const p1: Person = new Person('Richard', 12);
const { getName } = p1 // 通过对象的解构赋值，提取出 getName 

p1.getName(); // my name is Richard
getName(); // my name is Richard