JavaScript扩展数组无法正常工作，没有错误消息

Question

Hello I am a currently learning JavaScript for my project. I have a question about this short code.

function randomArr(){};
randomArr.prototype = new Array(); 
randomArr.prototype.getRandomValue = function(){
    var index = Math.floor(this.length * Math.random()); // return 0~1  
    return this[index];
}

var arr = new randomArr('seoul', 'tokyo', 'beijing');
console.log(arr.getRandomValue());

When I ran this code in Web-Browser, the output is just undefined.

Answer 1

For me, it's better adding that function to Array type:

Array.prototype.getRandomValue = function(){
    var index = Math.floor(this.length * Math.random()); // return 0~1  
    return this[index];
}

Array arr = new Array('seoul', 'tokyo', 'beijing');
console.log(arr.getRandomValue());

Take a look at this interesting explanation: https://coderwall.com/p/h4xm0w/why-never-use-new-array-in-javascript

According to that link, you should use arrays as follow:

var arr = ['seoul', 'tokyo', 'beijing'];
console.log(arr.getRandomValue());

Hope this helps!

Answer 2

One of the big benefits of ES6 classes is that they can subclass "exotic" classes, such as arrays. It's possible to trick older versions of Javascript into subclassing arrays, but not worth the trouble of explaining here.

Another concern is that you're using an extremely poor pattern of subclassing for pre-ES6 Javascript, to instantiate the base class and adding an instance of the base class to your new class's prototype chain, rather than gluing them first. This is what Typescript does under the hood, but it makes some awful assumptions. In your case, the Array constructor was already invoked long before you provided your list of cities, and created an empty array, so this would have failed even if you could subclass arrays like this.

This code is the modern way to do this. I took the extra step of addressing the concern raised in Eleazar's link by not directly passing the constructor's arguments down to the Array base constructor, but instead letting the base constructor create an empty array, then pushing the values into it.

class randomArr extends Array{
    constructor(..._items){
        super()
        _items.forEach(_=>this.push(_))
    }
    getRandomValue(){
        const index=Math.floor(this.length*Math.random())
        return this[index]
    }
}

let arr=new randomArr('seoul', 'tokyo', 'beijing')
console.log(arr.getRandomValue())

Despite Eleazer's advice, I would avoid adding to core prototypes with named properties. I have found Symbol properties to be perfect for this purpose. Here's what that would look like:

const getRandomValue=Symbol()
Reflect.defineProperty(
    Array.prototype,
    getRandomValue,
    {
        value(){
            const index=Math.floor(this.length*Math.random())
            return this[index]
        }
    }
)

let arr=['seoul', 'tokyo', 'beijing']
console.log(arr[getRandomValue]())

The advantage of the symbol route is that you are guaranteed to not have name clashes with another library also extending the Array prototype.

Answer 3

Here is a method using prototype chain and avoiding adding method directly to Array.prototype .

function randomArr() {                                             
Array.call(this);                                                      
  for (x in arguments) {                                 
  this.push(arguments[x]);                                           
  }                                                                         
}                                                         

randomArr.prototype = Object.create(Array.prototype); 
randomArr.prototype.constructor = randomArr; 

randomArr.prototype.getRandomValue = function(){                          
var index = Math.floor(this.length * Math.random()); // return 0~1     
return this[index];                                         
}                                                                         

var arr = new randomArr('seoul', 'tokyo', 'beijing');      
alert(arr.splice(1,1));  // works as desired     
alert(arr.getRandomValue()); // works fine