Question

我有一个Person构造函数，我想添加一个应该添加朋友的方法。我想允许我的用户传递可变数量的朋友，所以我想到了新的＆＃34;休息＆＃34; ES6的特点。可悲的是，我无法找到出路。这是我的第一次尝试（错误：＆＃34;未捕获的TypeError：f.addFriends不是函数（...）＆＃34;）：

// Persons creator
function Person(name){
    this.name = name;
    this.friends = [];
    this.addFriends = function(...a){
      a.forEach(function(d){this.friends.push(d)});
    }
}

// Create three persons
f = new Person("Fanny");
e = new Person("Eric");
j = new Person("John");

// add Eric & Fanny as friends of Fanny
f.addFriends(e,j);

我还尝试了以下代码（没有错误，但没有添加任何朋友）：

// Persons creator
function Person(name){
    this.name = name;
    this.friends = [];
}

Person.prototype.addFriends = function(...a){
   a.forEach(function(d){this.friends.push(d)});
}


// Create three persons
f = new Person("Fanny");
e = new Person("Eric");
j = new Person("John");

// add Eric & Fanny as friends of Fanny
f.addFriends(e,j);

我做错了什么？非常感谢你的帮助！

Answer 1

forEach进行回调，通常在全局上下文中调用（回调中为window）。您需要将当前this传递给forEach作为第二个参数。

或者可以完全避免整个this问题而只是concat数组：

function Person(name){
    this.name = name;
    this.friends = [];
    this.addFriends = function(...a){
      this.friends = this.friends.concat(a);
    }
}

Answer 2

this，在传递给forEach的回调中，不是此代码中Person的实例：

Person.prototype.addFriends = function(...a){
   a.forEach(function(d){this.friends.push(d)});
}

您可以使用新的箭头功能来获得正确的上下文：

Person.prototype.addFriends = function(...a){
   a.forEach((d) => {this.friends.push(d)});
}

但这里有一个更优雅的解决方案：

Person.prototype.addFriends = function(...a){
   this.friends.push(...a);
}

Answer 3

由于您在forEach内使用了回调，因此this不会引用该对象。将回调绑定到this：

Person.prototype.addFriends = function(...a){
   a.forEach(function(d){this.friends.push(d)}.bind(this));
}

由于我们使用的是ES6，您可以使用arrow function代替。箭头函数在词法上绑定this值：

Person.prototype.addFriends = function(...a){
   a.forEach((d) => this.friends.push(d));
}

Answer 4

您可以使用ECMAScript 6中的新功能 - ＆gt;的类

定义你的课程：

class Person {

constructor(name) { this.name = name; this.friends = []; } addFriends(friends) { // do someting with friends this.friends = friends }

}

然后您就可以创建Person的新实例

var p = new Person("Jack");

并添加一些新朋友

p.addFriends(....)

如何使用ES6 Rest向JS对象添加方法

4 个答案: