js-认识this

2020-10-09

在js语言中，this不总是指向一个对象，有时候它会指向window对象，有时候，它会指向调用方法的那个对象，有时候也可以自己将对象绑定到this上。

观察下面的例子。

<script>
    var o = {
        name: "zhou",
        func1: function () {
            if (this.name) {
                console.log(this.name)
            } else {
                console.log("can't find")
            }
        },
        func2: function () {
            return function () {
                if (this.name) {
                    console.log(this.name)
                } else {
                    console.log("can't find")
                }
            }
        },
        func3: function () {
            return () => {
                if (this.name) {
                    console.log(this.name)
                } else {
                    console.log("can't find")
                }
            }
        },
        func4: function () {
            return function () {
                if (this.name) {
                    console.log(this.name)
                } else {
                    console.log("can't find")
                }
            }.bind(this)
        },
    }
    o.func1();
    o.func2()();
    o.func3()();
    o.func4()();
</script>

最后的输出是：

zhou 
can't find
zhou
zhou

func1中的this指向对象o；func2中的this指向window对象。

箭头函数可以将词法作用域绑定到外层对象，所以，func3中的匿名对象中的this指向外层对象o，否则，this指向window对象。

使用js中原生的Function.bind方法，可以将方法中的this绑定到你想指定的对象，在func4中，将匿名对象中的this和对象o绑定。.bind(this) 里面的this指的就是对象o。