什么是原型，$.extend和“返回此"?必须去做? [英] What are prototype, $.extend, and "return this" have to do?

问题描述

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

I'm working on a legacy project, I'm confused with what this does

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

我有开发木偶应用程序的经验，但是上面的代码仍然让我感到困惑.没有任何文档，而做此工作的人已经离开.

I have experience developing marionette app but above code still confused me. No documentation and the one who did this has left.

推荐答案

继承和调用父函数

首先，一些信息:

Inheritance and calling parent functions

First, some informations:

• OOP简介 继承
• JavaScript中的OOP
• 通过主干继承

• Introduction to OOP concepts
• Inheritance
• OOP in javascript
• Inheritance with Backbone

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

• BaseComponent 是构造函数(理解javascript构造函数)，它具有主干网extend辅助功能.此辅助函数包装了原型的一些复杂性继承.

  • BaseComponent is a constructor function (understanding javascript constructors), which has the Backbone's extend helper function. This helper function wraps some of the complexity of prototypal inheritance.

    BaseComponent.prototype 是包含函数和属性的父类的原型.

    BaseComponent.prototype is the prototype of the parent class containing functions and properties.

    BaseComponent.prototype.initialize 是父类(BaseComponent)的函数，我们将为此模块定义一个新的initialize来覆盖它.

    BaseComponent.prototype.initialize is a function of the parent class (BaseComponent), which we are overriding by defining a new initialize for this module.

    类"的功能包含在 prototype属性.通过使用 .call函数在父对象原型中的函数上，我们可以在当前对象的上下文中调用该函数.

    Functions of a "class" are contained inside the prototype property. By using the .call function on a function from the parent's prototype, we can call the function in the context of the current object.

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

    这是一个新对象，其中复制了options的属性.这是使用 jQuery的extend 进行的浅表复制.

    This is making a new object, in which properties of options are copied over. This is using jQuery's extend and it makes a shallow copy.

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

    This is a good pattern because:

    1. 它确保this.widgetOptions是一个对象，
    2. 它是一个副本，因此您可以安全地修改属性，而不会影响收到的options对象(可以被调用代码重用).
    1. it ensures that this.widgetOptions is an object,
    2. it's a copy so you can safely modify the properties without affecting the received options object (which could be reused by the calling code).

    链接函数调用

    return this; // what is this man?
    

    这用于链函数调用，如下所示:

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

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

    Inside the render function, it is a Backbone standard. But in the initialize, it makes no sense since you never actually call the initialize manually.

    从主干文档:

    一个好的约定是在渲染结束时返回此值以启用 链接的呼叫.

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

    默认视图render :

    render: function() {
        return this;
    },
    

    这篇关于什么是原型，$.extend和“返回此"?必须去做?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！