javascript - VueJS 中绑定(bind)函数的含义

Question

我有一个在 VueJS 中使用绑定(bind)方法的脚本。过滤器的目的是根据性别或全部返回人员。

我有 HTML 代码:

<div id="demo">
        <div class="radio">
            <label>
                <input type="radio" name="gender" v-model="gender" value="all"> All
            </label>
        </div>

        <div class="radio">
            <label>
                <input type="radio" name="gender" v-model="gender" value="male"> Male
            </label>
        </div>

        <div class="radio">
            <label>
                <input type="radio" name="gender" v-model="gender" value="female"> Female
            </label>
        </div>

        <ul>
            <!-- Don't forget about Vue's filterBy filter. This is only for ex. -->
            <li v-for="person in people | gender">{{ person.name }}: {{ person.gender }}</li>
        </ul>
    </div>

下面是 JavaScript 代码:

new Vue({
    el: '#demo',

    data: {
        gender: 'all',

        people: [
            { name: 'Jeff', gender: 'male' },
            { name: 'Jack', gender: 'male' },
            { name: 'Steven', gender: 'male' },
            { name: 'Kate', gender: 'female' },
            { name: 'Susan', gender: 'female' },
            { name: 'Claire', gender: 'female' }
        ]
    },

    filters: {
        gender: function(people) {          
            if (this.gender == 'all') return people;

            return people.filter(function(person) {
                return person.gender == this.gender;

            }.bind(this));
        }
    }

});

我不太明白 bind(this) 在这种情况下做了什么。谁能给我解释一下？谢谢，

Answer 1

所以这是关于this 的闭包和上下文。当您将 (this) 绑定(bind)到一个函数时，它将 this 的上下文(或“词法范围”)更改为绑定(bind)函数内，this 保留在外部闭包中，而不是而不是在绑定(bind)的函数内部，从而使方法和属性在该外部范围内可用。

在您的示例中，您正在使 Vue 的数据属性“性别”(等于“全部”)——您将其引用为 this.gender——在 gender() 函数的闭包中可用，否则它将是未定义的。

请注意，这是 ES5 中非常常见的模式。但是如果你转到 ES6 的箭头函数，因为它很常见，这个绑定(bind)实际上是默认的。你的 gender() 函数在 ES6 中会这样写。

gender (people) => {
  if (this.gender == 'all') return people
  return people.filter((person) => person.gender === this.gender)
}

更加简洁，无需绑定(bind) this :)

更新:2019 - 我也不会使用同名的变量和函数 - this.gender(变量)和 this.gender()(函数)。