JavaScript 继承与 Array 对象(需要解释才能理解)

Question

我一直在努力理解 Javascript 中的继承，到目前为止我已经阅读了很多关于它的网站(包括 javascript.info 和 Crockford 的 Javascript Good parts)——但我似乎无法理解像数组继承这样简单的东西.

也许如果我用一个例子来证明，有人可以纠正我并告诉我我做错了什么。

function ExtendedArray() {
    Array.call(this, arguments);

    this.test = function () {
        return 'something';
    }
}

//I think this is the most standard way to extend a class?
ExtendedArray.prototype = [];
ExtendedArray.prototype.constructor = ExtendedArray;

$scope = {};

$scope.arr = new Array(1, 2, 3);
$scope.concatArr = [].concat($scope.arr);

$scope.x = new ExtendedArray(1, 2, 3);    //empty | instanceof Array = true
$scope.concatX = [].concat($scope.x);     //empty

$scope.y = new ExtendedArray();          //instanceof Array = true
$scope.y.push(1, 2, 3);                  //works - elements are added!
$scope.concatY = [].concat($scope.y);    //concats it like a object

这是相同的 JS-Fiddle:

http://jsfiddle.net/superasn/pq2j139c/

一些问题:

1. 如何修改此代码，使 ExtendedArray 的行为与 Array 一样？
2. 如您所见，$scope.x 是空的。为什么构造函数不起作用？
3. push 功能有效!？但是 concat 失败了吗？如何使 concat 工作？
4. 我看到有一些库可以扩展类，这是更好的 JS 继承方法吗？

非常感谢您的建议!

Answer 1

您只需在构造函数中调用 [].push.apply(this, arguments);:

angular.module('myApp', [])
.controller('mainCtrl', ['$scope', function($scope) {

    var __extends = this.__extends || function (d, b) {
                for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
                function __() { this.constructor = d; }
                __.prototype = b.prototype;
                d.prototype = new __();
            };
    
    function ExtendedArray() {
        Array.call(this, arguments);
        
        [].push.apply(this, arguments);
        
        this.test = function () {
            return 'something';
        }
    }
    
    __extends(ExtendedArray, Array);

    $scope.arr = new Array(1, 2, 3);
    $scope.concatArr = [].concat($scope.arr);
    
    $scope.x = new ExtendedArray(1, 2, 3);    
    $scope.concatX = [].concat($scope.x);
    
    $scope.y = new ExtendedArray();    
    $scope.y.push(1, 2, 3);
    $scope.concatY = [].concat($scope.y);
    
    $scope.isArray = function(v) {
        return v instanceof Array;
    }
    
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="mainCtrl">
   <div class="content">
       Arr: Val = {{arr}} / Concat = {{concatArr}} / Is Array? {{isArray(arr)}}
       
       <hr/>

       X: Val = {{x}} / Concat = {{concatX}} / Is Array? {{isArray(x)}}

       <hr/>

       Y: Val = {{y}} / Concat = {{concatY}} / Is Array? {{isArray(y)}}
       
    </div>
</div>