javascript - prototype、$.extend 和 "return this"有什么关系？

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 是包含函数和属性的父类的原型(prototype)。

• BaseComponent.prototype.initialize 是父类 (BaseComponent) 的函数，我们通过定义为此模块新建初始化。

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

复制对象

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 :

A good convention is to return this at the end of render to enable chained calls.

default view render :

render: function() {
    return this;
},