如何使用点表示法在JavaScript中向数组和对象原型添加console.log方法？

Question

How can you create a log method on arrays and objects in javascript using the dot notation?

 function log(...k){ console.log.apply(console, k) } log('hello') //=> prints hello //I want to do this for arrays and objects using the dot notation ['hello','world'].log() //=> prints ['hello', 'world'] {'hello':'world'}.log() //=> prints {'hello', 'world'} 

Answer 1

You could add this method to the prototype of arrays, like below:

 var array = ['hello','world']; Array.prototype.log = function(){ (this).forEach(function(item){ console.log(item); }); }; array.log(); 

Regarding an object you could do the same by adding you function to the object prototype:

 var obj = { 'hello' : 'world' }; Object.prototype.log = function(){ Object.keys(this).forEach(function(key){ console.log(key); console.log((obj[key])); }); }; obj.log(); 

Answer 2

Just like you said, modify the prototypes.

 function log(...k) { console.log.apply(console, k); } Array.prototype.log = function() { log.apply(null, ['['].concat(this).concat([']'])); }; Object.prototype.log = function() { let vals = ['{']; for (var key in this) { if (this.hasOwnProperty(key)) { vals.push(key, this[key]); } } vals.push('}'); log.apply(null, vals); }; ['hello', 'world'].log(); ({ hello: 'world' }).log(); 

Answer 3

Please don't just munge native prototypes indiscriminately. This can (and most likely will) cause you massive headaches. Instead use Object.defineProperty() and define your new methods properly.

 Array.prototype.log = Array.prototype.log; if(Array.prototype.log === undefined) { Object.defineProperty(Array.prototype, 'log', { enumerable: false, value: function () { (this).forEach(function(item){ console.log(item); }); } }); } Object.prototype.log = Object.prototype.log; if(Object.prototype.log === undefined) { Object.defineProperty(Object.prototype, 'log', { enumerable: false, value: function (el, offset) { var self = this; Object.keys(this).forEach(function(key){ console.log(key + ':', (self[key])); }); } }); } var testArr = [1, 2, 'foo', 'bar']; var testObj = {one: 1, two: 2, foo: 'bar'}; testArr.log(); testObj.log(); 

Answer 4

In javascript there is what is been called prototypes . Prototypes are also objects , that you can assign members ( methods properties )to. In your case , if you want to create a function that works for a particular primitive value, you have to add that particular function as a method to the prototype of the constructor function of the primitive value. For example in your case, you have to create a function as a method on the prototype of the Array and Object constructor functions

example

Array.prototype.log = function() {    
    for ( let __elements of this ) {
        // uh
        // incase it's an array of array
        if ( Array.isArray(__elements) ) {
            __elements.log();
        } else {
            console.log(__elements);
        }
    } 
};



Object.prototype.log = function() {
    for ( let _prop in this ) {
        // typeof [] always returns an object
        if ( this.hasOwnProperty(_prop) ) {
            if ( typeof this[_prop] === 'object' && ! 
                Array.isArray(this[_prop]) ) {
                this[_prop].log();
            } else {
                console.log(this[_prop]);
            }
        }
    }
};


[1,2,3,4].log();

[[1,2,[3,4]],3,[2]].log();

let obj = {
    name:"victory",
    surname: "osikwemhe",
    life: {
        occupation: ["accontant","programmer"],
        hobbies: "danching gnamgnam style",
        hates: "sharing my wifi",
        tvshows: {
            "cw": ["the flash"],
            "hbo": ["silicon valley"],
            "history": ["vikings"]
        }        
    } 
};


obj.log();

in case you are worthering what the this point to, this points to the primitive value we use the log method on