javascript:在可重用的 d3js 图表中广泛使用 'this'

Question

在可重用 d3 库的源代码中(代码位于: https://github.com/bugzu/reD3/blob/master/src/area.js )，几乎每一行都包含对 this 的引用。网站首页:http://bugzu.github.io/reD3/#/

示例:

(function(global) {

    global.reD3 = global.reD3 || {};

    function Area(element, options) {
        this.element = element;
        this.options = options;
        this.init();
    }

    Area.prototype = {

        init: function() {
            var options = this.options,
            width = options.width || 960,
            height = options.height || 500,
            oMargin = options.margin;

            var margin = {
                top: 20,
                right: 30,
                bottom: 30,
                left: 40
            },

            margin = reD3.util.mixin(margin, oMargin);

            width = this.width = width - margin.left - margin.right;
            height = this.height = height - margin.top - margin.bottom;
            var xValue = this.xValue = options.xValue || 'date';
            var yValue = this.yValue = options.yValue || 'value';

如此频繁使用此功能的目的是什么？对于可重用(图表)组件来说，这种技术的优点/缺点是什么？

Answer 1

由于 Area 是一个类(您可以通过在构造函数中使用“this”来判断，并且调用它时将使用 new 关键字)，因此使用 this 修改对象而不是局部或全局变量。无论库是用于图表还是其他任何东西，使用 this 都会鼓励封装，尽管它确实比其他带有类的语言不那么明显。