在VueJS绑定功能含义

Question

我这是在VueJS使用绑定方法的脚本。该过滤器的目的是返回的人基础上的性别或全部。

我的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));
        }
    }

});

我不太明白什么绑定（这）确实在这种情况下。谁能解释一下？谢谢，

Answer 1

因此，这是关于封锁和this的背景。如果绑定（本）于函数时，它改变了上下文（或“词法作用域”）this的至结合的功能内，this保持在外罩而不是绑定在函数内部，从而使方法和属性可用从外部范围。

在你的榜样，你正在Vue公司的数据属性“性别”（等于“全部”） - 你为this.gender引用 - 可用的性别（）函数的闭包内，而否则将是不确定的。

作为一个说明，这是与ES5很常见的模式。但是，如果你移动到箭头ES6的功能，因为它是如此普遍，这种结合实际上是默认。您的性别（）函数将被写成这ES6。

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

更简洁，无需在this绑定:)

更新日期：2019 - 我也不会用一个变量，并具有相同名称的函数 - this.gender（变量）和this.gender（）（函数）。

Answer 2

箭头功能会更有意义

person => person.gender == this.gender

箭头函数总是绑定到声明它们的对象，正常功能都会有这个绑定到调用它们的对象。