Question

我正在使用一些方法构建一个库，我有一个方法extend和一个方法load。我喜欢它像这样工作：

Core.extend('name',function(message){
  this.innerHTML = message;
});

然后实际运行这个你做：

Core.load('name','Hey!');

Core.extend()根据名称创建一个具有唯一ID的<div>元素。我想让this ==生成的<div>。

我明白知道.call()和.apply()，但它不会改变this它只会更改extend中的回调参数。这是扩展和加载的代码：

Core.extend（）

var extend = function(name,func){
  name = name || '';
  func = func || function(){};
  if(typeof extensions[name] == 'undefined'){
    extensions[name] = func;
  }
  else{
    if(errors){
      throw new Error('Core extend() error: the extension "'+name+'" already exists');
    }
  }
}

Core.load（）

请注意，这是主线：extensions[name].call(this,widgetElement,params);

var load = function(name,params,sel){
  name = name || '';
  params = params || '';
  sel = sel || '';
  if(typeof extensions[name]  !== 'undefined'){
    var widgetElement = document.createElement(settings.widgetWrapperElement);
    widgetElement.setAttribute('id',settings.prefixOnWidgetId+name);
    sel.appendChild(widgetElement);
    extensions[name].call(this,widgetElement,params);
  }
  else{
    if(errors){
      throw new Error('Core load() error: the extension "'+name+'" doesn\'t exist');
    }
  }
}

Answer 1

Function.call函数的第一个参数应该是您要设置为this对象的内容。

这意味着，你应该改变

extensions[name].call(this, widgetElement, params);

到

extensions[name].call(widgetElement, params);

以便将widgetElement作为this对象传递。

Answer 2

为了正确设置this，您可以使用.call()或.apply()执行回调函数，并传入您想要的this。

因此，在Core.extend()或Core.load()内，当您要调用传入函数时，您将使用fn.call(xxx, message)，其中fn是传递给{{1}的函数作为参数，Core.extend()是您刚刚创建的div元素。

我并未完全遵循您要做的所有操作，但您使用xxx或this设置.call()点。您可以看到它们如何运作here和here。在您的代码中，您似乎应该更改此内容：

.apply()

到此：

extensions[name].call(this,widgetElement,params);

因为extensions[name].call(widgetElement, params);的第一个参数是你想要的.call指针，第二个参数是你希望传递给函数的函数，你的函数中的函数只需要一个参数所以我认为这就是你所需要的一切。

在JavaScript中更改函数“this”值

2 个答案: