JavaScript Inheritance and the Array Object (requires explanation to understand)
I'm trying to understand inheritance in Javascript and so far I've read many sites about it (including javascript.info and Javascript), but I can't figure out what's as simple as array inheritance.
Perhaps if I demonstrate with an example, someone can correct me and teach me that I am wrong.
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
Here's a JS-Fiddle for that:
http://jsfiddle.net/superasn/pq2j139c/
Some questions:
- How do I fix this code to
ExtendedArray
behave like an array? - As you can see, it is
$scope.x
empty. Why isn't the constructor working? - The functions
push
work !? But thenconcat
fails? How to get the job doneconcat
? - I see there are several libraries for extending classes, is this the best approach to JS inheritance?
Your advice is appreciated!
+3
source to share
1 answer
You just have to call [].push.apply(this, arguments);
in the constructor:
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>
0
source to share