javascript - 原型(prototype)，$。extend和“返回此”必须做什么？

我正在做一个遗留项目，对此感到困惑

define(['jquery', 'components/BaseComponent', 'bootstrap'], function(
    $, BaseComponent, bootstrap
) {
    'use strict';

    return BaseComponent.extend({

        initialize: function(options) {

            BaseComponent.prototype.initialize.call(this, options); // what is this man?
            this.widgetOptions = $.extend({}, options); // what is this man?

            return this; // what is this man?
        },

        render: function() {

            BaseComponent.prototype.render.call(this); //again?


            return this; //again?
        }
    });
});

我有开发木偶应用程序的经验，但是上面的代码仍然让我感到困惑。没有文档，没有这样做的人。

最佳答案

继承和调用父函数

首先，一些信息：


OOP简介concepts
Inheritance
OOP in javascript
Inheritance with Backbone

BaseComponent.prototype.initialize.call(this, options);  // what is this man?

BaseComponent是构造函数（understanding javascript constructors），具有Backbone's extend helper function。此辅助函数包装了prototypal inheritance的某些复杂性。
BaseComponent.prototype是包含函数和属性的父类的原型。
BaseComponent.prototype.initialize是父类（BaseComponent）的函数，我们通过为此模块定义一个新的initialize来覆盖它。


prototype property内部包含“类”的功能。通过对父代原型中的函数使用.call function，我们可以在当前对象的上下文中调用该函数。

复制对象

this.widgetOptions = $.extend({}, options); // what is this man?

这是一个新对象，其中复制了options的属性。这正在使用jQuery's extend并进行浅表复制。

这是一个很好的模式，因为：


它确保this.widgetOptions是一个对象，
它是一个副本，因此您可以安全地修改属性，而不会影响接收到的options对象（可以被调用代码重用）。


链接函数调用

return this; // what is this man?

这适用于chain function calls，如下所示：

myView.render().lookImChaining().functionCalls();

在render函数内部，它是Backbone标准。但是在初始化中，这是没有意义的，因为您实际上从未真正手动调用过初始化。

从Backbone's doc：


  一个好的约定是在渲染结束时返回此值以启用
  连锁电话。


default view render：

render: function() {
    return this;
},