Thay đổi giá trị "này" chức năng trong JavaScript

Question

Tôi đang xây dựng thư viện với một số phương pháp và tôi có phương thức extend và phương thức load. Tôi muốn nó hoạt động như thế này:

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

Sau đó, để thực sự chạy này, bạn sẽ làm:

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

Core.extend() tạo ra một yếu tố <div> với một id duy nhất dựa vào tên. Tôi muốn thực hiện this == số <div> được tạo.

Tôi biết về .call() và .apply(), hiển nhiên, nhưng nó không thay đổi this nó chỉ thay đổi thông số gọi lại mở rộng. Dưới đây là đoạn code cho mở rộng và tải:

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()

Lưu ý đây là dòng chính: 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

Đối số đầu tiên của hàm Function.call phải là thứ bạn muốn đặt làm this đối tượng.

Điều đó có nghĩa, bạn nên thay đổi

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

để

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

để thông qua widgetElement như đối tượng this.

Answer 2

Để có được this bộ một cách thích hợp, bạn thực hiện các chức năng gọi lại với một trong hai .call() hoặc .apply() và vượt qua trong this mà bạn muốn.

Vì vậy, bên trong Core.extend() hoặc Core.load(), khi bạn muốn gọi thông qua vào chức năng, bạn sẽ sử dụng fn.call(xxx, message) nơi fn là hàm truyền cho Core.extend() như một tham số, xxx là phần tử div bạn vừa tạo ra.

Tôi không theo dõi chính xác những gì bạn đang cố gắng làm, nhưng bạn đặt điểm this với .call() hoặc .apply(). Bạn có thể xem cách họ làm việc here và here. Trong mã của bạn, có vẻ như bạn nên thay đổi này:

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

này:

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

kể từ khi số đầu tiên để .call là những gì bạn muốn con trỏ this được và số thứ hai là gì bạn muốn được chuyển đến hàm và hàm của bạn trong ví dụ của bạn chỉ lấy một tham số vì vậy tôi cho rằng đó là tất cả những gì bạn cần.