Mở rộng kế thừa của `this` thành các phương thức/thuộc tính của một` đối tượng`

Question

Tôi không chắc chắn nếu tôi đã đặt đúng tiêu đề câu hỏi một cách chính xác; hãy xem xét những điều sau đây để làm rõ ...

(function() { 
    var foo = { 
     bar: function() { 
      // Is it possible to reference 'this' as the 
      // initializing 'object' aka 'e' and not 'foo' ? 
      // The easy part, currently because 'this' refers to 'foo', 
      // is returning 'this' aka 'foo' so that chaining can occur 
      return this; 
     }, 
     other: function() { 
      return this; 
     } 
    }; 
    Event.prototype.foo = foo; 
}()); 

// usage 
document.onmousemove = function(e) { 
    e.foo.bar().other(); 
}; 

Làm thế nào tôi sẽ đi về việc có quyền truy cập vào this trong phương pháp/đạo cụ của foo nhưng có this tham khảo ban đầu object aka e và không foo?

---

Điều tốt nhất mà tôi đã đưa ra là thế này

(function() { 
    var foo = function() { 
     var _foo = this.foo; 
     _foo._this = this; //recursive reference that I am VERY worried about 
     return _foo; 
    }; 
    foo.bar = function() { 
     var _this = this._this; //_this refers to initial 'object', 'e' 
     return this; //return 'foo' aka 'this' for function chaining 
    }; 
    foo.other = function() { 
     var _this = this._this; 
     return this; 
    }; 
    Event.prototype.foo = foo; 
}()); 

// usage 
document.onmousemove = function(e) { 
    e.foo().bar().other(); 
}; 

---

Những gì tôi hiện có làm việc nhưng tôi lo lắng về một vài điều ...

1. Các tham chiếu đệ quy của chỉ định e đến e.foo._this

và

2. Dự phòng chỉ định e đến e.foo._this, nếu this có thể được truy cập là e thay vì foo nó sẽ làm cho 'vật' hoạt động hiệu quả hơn, đặc biệt liên quan đến một sự kiện như sự kiện mousemove.

jsFiddle Here

---

Ngoài ra, Im cố gắng để tránh một cái gì đó như thế này ...

---

Tất cả các lời đề nghị được đánh giá cao, Cảm ơn bạn đã dành thời gian.

Answer 1

Với một sự thay đổi tinh tế với những gì bạn có, bạn có thể làm cho mọi việc đơn giản hơn:

(function() { 
    var foo = function() { 
     this.foo.event = this; 
     return this.foo; 
    }; 
    foo.bar = function() { 
     /// the event can be found in this.event 
     return this; 
    }; 
    foo.other = function() { 
     /// the event can be found in this.event 
     return this; 
    }; 
    Event.prototype.foo = foo; 
}()); 

// usage 
document.onmousedown = function(e) { 
    e.foo().bar().other(); 
}; 

Tuy nhiên điều này đang thực hiện một sự thay đổi để các đối tượng chia sẻ foo, bạn có thể muốn viết lại những thứ để e.foo() trả về một trường hợp mới thay vào đó, hãy thay thế foo và di chuyển các phương pháp khác của bạn sang nguyên mẫu foo's.

(function() { 
    var foo = function(event) { 
     this.event = event; 
    }; 
    foo.prototype.bar = function() { 
     /// the event can be found in this.event 
     return this; 
    }; 
    foo.prototype.other = function() { 
     /// the event can be found in this.event 
     return this; 
    }; 
    Event.prototype.foo = function() { 
     return new foo(this); 
    }; 
}()); 

Bằng cách này bạn đang tạo ra một thể hiện mới của foo mỗi thời gian, nhưng nó có nghĩa Ngoài ra bạn của event tài sản được bản địa hoá để dụ đó; các phương thức nguyên mẫu sẽ được chia sẻ trên tất cả các trường hợp sao cho nó không quá tệ từ một quan điểm tối ưu hóa.

Answer 2

Có lẽ đó sẽ làm việc cho bạn:

Sử dụng phương pháp apply để thay đổi this bối cảnh trong phương pháp gọi và sử dụng this.foo để chỉ foo:

(function() { 
    var foo = function() { 
     console.log(this); 
     return this.foo; 
    }; 
    foo.bar = function() { 
     console.log(this); 
     return this.foo; 
    }; 
    foo.other = function() { 
     console.log(this); 
     return this.foo; 
    }; 
    Event.prototype.foo = foo; 
}()); 

// usage 
document.onclick = function (e) { 
    console.log(
     e.foo.apply(e).bar.apply(e).other.apply(e) 
    ); 
}; 

FIDDLE

Answer 3

Có thể nó sẽ đơn giản hơn để ràng buộc hàm của bạn với đối tượng của nó:

someElement.onEvent = myObject.myHandlerFunction.bind(myObject); 

vì vậy khi chức năng này được gọi, 'this' sẽ là myObject.

Sau đó, bạn có thể sử dụng e.target để truy cập phần tử.