beanutils.copyproperties属性值丢失_在JavaScript中使用call(), apply(), bind()设置this的值

当我们使用new运算符来调用构造函数时，this的值表示的是该构造函数的实例对象，但是如果我们想自定义this的值该如何做？

使用 call()

语法： fun.call(thisArg, arg1, arg2, ...) call()调用一个函数，第一个参数为指定的 this值，其他参数是分别的提供的参数，用逗号分隔

来看看MDN给的示例：

在一个子构造函数中，你可以通过调用父构造函数的 call方法来实现继承，使用 Food和 Toy构造函数创建的对象实例都会拥有在 Product构造函数中添加的 name属性和 price属性，但 category属性是在各自的构造函数中定义的。

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

function Toy(name, price) {
  Product.call(this, name, price);
  this.category = 'toy';
}

var cheese = new Food('fete', 5);
var fun = new Toy('robot', 40);

这就是call()发挥强大功能的地方，使用call()允许我们从对象中借用方法。让我们来分析：当我们new Food('fete',5)构造函数时，Product.call(this, name, price)被执行，由于我们指定了this值为Food构造函数的实例本身，所以this.name,this.price的值会被cheese这个对象访问。
通俗来讲，call()把父函数在子函数中运行了一遍，但是this是子函数的实例

使用 apply()

apply()和call()使用上是一致的，唯一的区别call()方法接受若干个参数的列表，而apply()方法接受的是一个包含多个参数的数组。

funciton Toy(name, price) {
  Product.apply(this, [name, price]);
  this.category = 'toy';
}

请注意，传递给call()和apply()的第一个参数是相同的(即绑定this值的对象)。

回调和 this

当涉及到回调函数时，this的值会有一些作用域的问题，首先我们来看看this的值，一般有几种情况：

• 如果使用new运算符调用构造函数，this的值被设置为新创建的对象
• 如果在对象上调用方法，this的值为对象本身
• 如果简单的调用一个函数，this的值为全局对象：window

那么我们来看看：

function doSomething(cb) {
  cb();
  cb();
}

const dog = {
  age: 5;
  growOneYear: function() {
    this.age += 1;
  }
}

调用dog.growOneYear() age正常从5加一为6，但是将dog.growOneYear作为回调函数，this的指向会有问题：

doSomething(dog.growOneYear);
// undefined

因为这里是函数调用，this指向全局window对象，我们可以使用闭包来解决这个问题：

doSomething(function() {
    dog.growOneYear();
})

在匿名函数中，growOneYear()方法仍然会被dog对象调用，由于这是很常见的模式，JavaScript提供了比较简洁的方式：bind()方法

使用 bind()

bind()也是在函数上调用方法，不同于call()和apply()，它回返回一个新的函数，该函数将this设置为我们赋给它的值：

// mdn demo
this.x = 9; // 在浏览器中this指向全局的 window 对象
var module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 81

var retrieveX = module.getX;
retrieveX();
// 返回9 - 因为函数是在全局作用域中调用的

// 创建一个新函数，把this绑定都module对象上
var bondGetX = retrieveX.bind(module);
bondGetX(); // 81

JavaScript新手经常犯的错误是将一个方法从对象中拿出来，然后再调用，期望方法中的this是原来的对象，如果不做特殊处理，一般会丢失原来的对象。