javascript - 面向对象的 Javascript 和多个 DOM 元素

Question

我有一个关于如何从面向对象的 Angular 处理特定问题的概念性问题(注意:对于此处命名空间感兴趣的人，我使用的是 Google Closure)。我是 OOP JS 游戏的新手，所以任何和所有的见解都是有帮助的!

假设您想创建一个对象，为页面上匹配类名 .carouselClassName 的每个 DOM 元素启动轮播。

像这样

/*
 * Carousel constructor
 * 
 * @param {className}: Class name to match DOM elements against to
 * attach event listeners and CSS animations for the carousel.
 */
var carousel = function(className) {
  this.className = className;

  //get all DOM elements matching className
  this.carouselElements = goog.dom.getElementsByClass(this.className);
}

carousel.prototype.animate = function() {
  //animation methods here
}

carousel.prototype.startCarousel = function(val, index, array) {
  //attach event listeners and delegate to other methods 
  //note, this doesn't work because this.animate is undefined (why?)
  goog.events.listen(val, goog.events.EventType.CLICK, this.animate);
}

//initalize the carousel for each
carousel.prototype.init = function() {
  //foreach carousel element found on the page, run startCarousel
  //note: this works fine, even calling this.startCarousel which is a method. Why?
  goog.dom.array.foreach(this.className, this.startCarousel, carousel);
}

//create a new instance and initialize
var newCarousel = new carousel('carouselClassName');
newCarousel.init();

第一次接触 JS 中的 OOP，我做了一些观察:

1. 我的构造函数对象 (this.classname) 中定义的属性可通过其他原型(prototype)对象中的 this 操作使用。
2. 在我的构造函数对象或原型(prototype)中定义的方法无法使用 this.methodName(参见上面的评论)。

绝对欢迎对我的方法提出任何其他意见 :)

Answer 1

我建议您不要让 Carousel 对象代表页面上的所有轮播。每一个都应该是 Carousel 的一个新实例。

您遇到的 this 未正确分配的问题可以通过将这些方法“绑定(bind)”到构造函数中的 this 来解决。

例如

function Carousel(node) {
    this.node = node;

    // "bind" each method that will act as a callback or event handler
    this.bind('animate');

    this.init();
}
Carousel.prototype = {
    // an example of a "bind" function...
    bind: function(method) {
        var fn = this[method],
            self = this;
        this[method] = function() {
            return fn.apply(self, arguments);
        };
        return this;
    },

    init: function() {},

    animate: function() {}
};

var nodes = goog.dom.getElementsByClass(this.className),
    carousels = [];

// Instantiate each carousel individually
for(var i = 0; i < nodes.length; i++) carousels.push(new Carousel(nodes[i]));