箭头函数的缺点 #

const fn1 = () => {
    console.log('this', arguments) // 报错，arguments is not defined
}
fn1(100, 200)

const fn1 = () => {
    console.log('this', this) // window
}
fn1.call({ x: 100 })

const multiply = (a, b) => b === undefined ? b => a * b : a * b

const obj = {
    name: '锋哥',
    getName: () => {
        return this.name
    }
}
console.log( obj.getName() )

const obj = {
    name: '锋哥'
}
obj.__proto__.getName = () => {
    return this.name
}
console.log( obj.getName() )

const Foo = (name, age) => {
    this.name = name
    this.age = age
}
const f = new Foo('张三', 20) // 报错 Foo is not a constructor

const btn1 = document.getElementById('btn1')
btn1.addEventListener('click', () => {  
    // console.log(this === window)
    this.innerHTML = 'clicked'
})

{
    data() { return { name: '锋哥' } },
    methods: {
        getName: () => {
            // 报错 Cannot read properties of undefined (reading 'name')
            return this.name
        },
        // getName() {
        //     return this.name // 正常
        // }
    },
    mounted: () => {
        // 报错 Cannot read properties of undefined (reading 'name')
        console.log('msg', this.name)
    },
    // mounted() {
    //     console.log('msg', this.name) // 正常
    // }
}

class Foo {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    getName = () => {
        return this.name
    }
}
const f = new Foo('张三', 20)
console.log('getName', f.getName())

export default class HelloWorld extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '锋哥'
        }
    }
    render() {
        return <p onClick={this.printName}>hello world</p>
    }
    printName = () => {
        console.log(this.state.name)
    }
}