Javascript 实例上下文原型(prototype)

Question

抱歉，主题标题不太好。不知道怎么命名。

我需要这个例子的帮助，我完全迷路了。

因此，当函数 fillView 被调用时，一切都很好，但是第二次当它被调用以重新调整大小时，它就不起作用了，因为在渲染函数内部“this”定义了一个窗口，而不是 localClass 的实例。我需要解释如何解决这个问题。请写一个例子。

(function ($) { 
var localClass = function(options) {
    this.a = 123;
};

localClass.prototype.render = function() {
    console.log(this.a);
}

$.fn.fillView = function(options){
    var view = new localClass(options);
    view.render(); //this prints to console 123

    $(window).resize(view.render); //this doesn't print 123 
                                     because 'this' is now - Window

    }
})(jQuery)

Answer 1

替换

$(window).resize(view.render);

与

$(window).resize(function(){view.render()});

如果您只针对新浏览器(即您不需要与 IE8 兼容)，您也可以使用 bind :

$(window).resize(view.render.bind(view));

---

工作原理:

1) 当您传递一个函数时，您只是将另一个属性的值设置为该函数。这就像做

var f = view.render.

当这个函数被调用时，它是这样调用的:

f(); 

那么函数中的 this 没有理由成为 view 可能会更清楚。在这里，实际上是 window。更准确地说，函数中的 this 不是函数的初始“所有者”，而是接收者，这取决于您如何调用函数。

事实上，它可能是另一个对象:如果你执行

f.call(someObject)

然后 f(即 render)中的 this 将是 someObject。

2) 但是当你传递一个函数时

var f = function(){ view.render() }

那么你如何调用 f 并不重要，因为 render 是用 view 作为接收者调用的。

3) 还有其他解决方案:bind 或 $.proxy 都构建了一个嵌入您的新函数但确保 this 始终是您传递的对象。