什么是原型，$ .extend和“返回此”必须做什么？

Question

我正在研究遗留项目，我对此做了什么感到困惑

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?
        }
    });
});

我有开发木偶应用程序的经验，但上面的代码仍然让我困惑。没有文档和执行此操作的人已离开。

Answer 1

继承和调用父函数

首先，一些信息：

• 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来覆盖它。

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

复制对象

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

这是一个新对象，其中复制了options的属性。这是使用jQuery's extend并且它是一个浅表副本。

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

1. 确保this.widgetOptions是一个对象，
2. 它是一个副本，因此您可以安全地修改属性，而不会影响收到的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;
},