Có thể ghi đè hàm toString () của JavaScript để cung cấp đầu ra có ý nghĩa cho việc gỡ lỗi không?

Khi tôi console.log()là một đối tượng trong chương trình JavaScript của mình, tôi chỉ thấy đầu ra [object Object], điều này không hữu ích lắm trong việc tìm ra đối tượng (hoặc thậm chí là loại đối tượng) đó là gì.

Trong C #, tôi đã quen với việc ghi đè ToString()để có thể tùy chỉnh biểu diễn trình gỡ lỗi của một đối tượng. Có điều gì tương tự mà tôi có thể làm trong JavaScript không?

Bạn cũng có thể ghi đè toStringtrong Javascript. Xem ví dụ:

function Foo() {}

// toString override added to prototype of Foo class
Foo.prototype.toString = function() {
  return "[object Foo]";
}

var f = new Foo();
console.log("" + f); // console displays [object Foo]

Xem thảo luận này về cách xác định tên loại đối tượng trong JavaScript.

Ghi đè đầu tiên toStringcho đối tượng của bạn hoặc nguyên mẫu:

var Foo = function(){};
Foo.prototype.toString = function(){return 'Pity the Foo';};

var foo = new Foo();

Sau đó chuyển đổi thành chuỗi để xem biểu diễn chuỗi của đối tượng:

//using JS implicit type conversion
console.log('' + foo);

Nếu bạn không thích nhập thêm, bạn có thể tạo một hàm ghi các biểu diễn chuỗi của các đối số của nó vào bảng điều khiển:

var puts = function(){
    var strings = Array.prototype.map.call(arguments, function(obj){
        return '' + obj;
    });
    console.log.apply(console, strings);
};

Sử dụng:

puts(foo)  //logs 'Pity the Foo'

puts(foo, [1,2,3], {a: 2}) //logs 'Pity the Foo 1,2,3 [object Object]'

Cập nhật

E2015 cung cấp cú pháp đẹp hơn nhiều cho nội dung này, nhưng bạn sẽ phải sử dụng trình chuyển tiếp như Babel :

// override `toString`
class Foo {
  toString(){
    return 'Pity the Foo';
  }
}

const foo = new Foo();

// utility function for printing objects using their `toString` methods
const puts = (...any) => console.log(...any.map(String));

puts(foo); // logs 'Pity the Foo'

Một cách dễ dàng để có được đầu ra có thể gỡ lỗi trong trình duyệt JS là chỉ cần tuần tự hóa đối tượng thành JSON. Vì vậy, bạn có thể thực hiện một cuộc gọi như

console.log ("Blah: " + JSON.stringify(object));

Vì vậy, ví dụ, alert("Blah! " + JSON.stringify({key: "value"}));tạo ra một cảnh báo với văn bảnBlah! {"key":"value"}

Nếu bạn đang sử dụng Node, nó có thể đáng xem xét util.inspect.

var util = require('util')

const Point = {
  x: 1,
  y: 2,
  [util.inspect.custom]: function(depth) { return `{ #Point ${this.x},${this.y} }` }

}

console.log( Point );

Điều này sẽ mang lại:

{ #Point 1,2 }

Trong khi phiên bản không có bản in kiểm tra:

{ x: 1, y: 2 }

Chỉ cần ghi đè toString()phương thức.

Ví dụ đơn giản:

var x = {foo: 1, bar: true, baz: 'quux'};
x.toString(); // returns "[object Object]"
x.toString = function () {
    var s = [];
    for (var k in this) {
        if (this.hasOwnProperty(k)) s.push(k + ':' + this[k]);
    }
    return '{' + s.join() + '}';
};
x.toString(); // returns something more useful

Nó thậm chí còn tốt hơn khi bạn xác định một kiểu mới:

function X()
{
    this.foo = 1;
    this.bar = true;
    this.baz = 'quux';
}

X.prototype.toString = /* same function as before */

new X().toString(); // returns "{foo:1,bar:true,baz:quux}"

Nếu đối tượng do chính bạn xác định, bạn luôn có thể thêm ghi đè toString.

//Defined car Object
var car = {
  type: "Fiat",
  model: 500,
  color: "white",
  //.toString() Override
  toString: function() {
    return this.type;
  }
};

//Various ways to test .toString() Override
console.log(car.toString());
console.log(car);
alert(car.toString());
alert(car);

//Defined carPlus Object
var carPlus = {
  type: "Fiat",
  model: 500,
  color: "white",
  //.toString() Override
  toString: function() {
    return 'type: ' + this.type + ', model: ' + this.model + ', color:  ' + this.color;
  }
};

//Various ways to test .toString() Override
console.log(carPlus.toString());
console.log(carPlus);
alert(carPlus.toString());
alert(carPlus);

Với các ký tự mẫu :

class Foo {
  toString() {
     return 'I am foo';
  }
}

const foo = new Foo();
console.log(`${foo}`); // 'I am foo'

Thêm thuộc tính 'Symbol.toStringTag' vào đối tượng hoặc lớp tùy chỉnh.

Giá trị chuỗi được gán cho nó sẽ là mô tả chuỗi mặc định của nó vì nó được truy cập nội bộ bởi Object.prototype.toString()phương thức.

Ví dụ:

class Person {
  constructor(name) {
    this.name = name
  }
  get [Symbol.toStringTag]() {
    return 'Person';
  }
}

let p = new Person('Dan');
Object.prototype.toString.call(p); // [object Person]

class Person {
  constructor(name) {
    this.name = name
  }
  get[Symbol.toStringTag]() {
    return 'Person';
  }
}

let p = new Person('Dan');
console.log(Object.prototype.toString.call(p));

Một số loại Javascript như Bản đồ và Lời hứa có một toStringTagký hiệu tích hợp được xác định

Object.prototype.toString.call(new Map());       // "[object Map]"
Object.prototype.toString.call(Promise.resolve()); // "[object Promise]"

Vì Symbol.toStringTaglà một biểu tượng nổi tiếng , chúng tôi có thể tham chiếu nó và xác minh rằng các loại trên có thuộc tính Symbol.toStringTag -

new Map()[Symbol.toStringTag] // 'Map'
Promise.resolve()[Symbol.toStringTag] // 'Promise'

Nhật ký bảng điều khiển Chrome cho phép bạn kiểm tra đối tượng.

- Thao tác này mất nhiều thời gian để hoàn thành và việc sử dụng nó không được khuyến khích theo tài liệu của mozilla: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/proto

-Hình như, các trình duyệt hiện đại không dùng .prototype và ECMA6 chỉ định bằng cách sử dụng thích hợp__proto__ thay thế.

Vì vậy, ví dụ: nếu bạn đang xác định bạn sở hữu vị trí địa lý đối tượng, bạn nên gọi thuộc tính __proto__ thay vì .prototype :

var  geoposition = {

        lat: window.pos.lat,
        lng: window.pos.lng
    };

geoposition.__proto__.toString = function(){ return "lat: "+this.lat+", lng: "+this.lng }
console.log("Searching nearby donations to: "+geoposition.toString());

Dưới đây là ví dụ về cách xâu chuỗi đối tượng Bản đồ:

  Map.prototype.toString = function() {

    let result = {};

    this.forEach((key, value) => { result[key] = value;});

    return JSON.stringify(result);
  };

Bạn có thể cung cấp cho bất kỳ đối tượng tùy chỉnh nào các phương thức toString của riêng chúng hoặc viết một phương thức chung mà bạn có thể gọi trên đối tượng bạn đang xem-

Function.prototype.named= function(ns){
    var Rx=  /function\s+([^(\s]+)\s*\(/, tem= this.toString().match(Rx) || "";
    if(tem) return tem[1];
    return 'unnamed constructor'
}

function whatsit(what){
    if(what===undefined)return 'undefined';
    if(what=== null) return 'null object';
    if(what== window) return 'Window object';
    if(what.nodeName){
        return 'html '+what.nodeName;
    }
    try{
        if(typeof what== 'object'){
            return what.constructor.named();
        }
    }
    catch(er){
        return 'Error reading Object constructor';
    }
    var w=typeof what;
    return w.charAt(0).toUpperCase()+w.substring(1);
}

Thay vì ghi đè toString(), nếu bạn bao gồm Thư viện JavaScript nguyên mẫu , bạn có thể sử dụngObject.inspect() để có được một biểu diễn hữu ích hơn nhiều.

Hầu hết các khuôn khổ phổ biến bao gồm một cái gì đó tương tự.

Bạn có thể mở rộng hoặc ghi đè trong JS

String.prototype.toString = function() {
    return this + "..."
}
document.write("Sergio".toString());

A simple format Date function using Javascript prototype, it can be used for your purpose

https://gist.github.com/cstipkovic/3983879 :

Date.prototype.formatDate = function (format) {
    var date = this,
        day = date.getDate(),
        month = date.getMonth() + 1,
        year = date.getFullYear(),
        hours = date.getHours(),
        minutes = date.getMinutes(),
        seconds = date.getSeconds();

    if (!format) {
        format = "MM/dd/yyyy";
    }

    format = format.replace("MM", month.toString().replace(/^(\d)$/, '0$1'));

    if (format.indexOf("yyyy") > -1) {
        format = format.replace("yyyy", year.toString());
    } else if (format.indexOf("yy") > -1) {
        format = format.replace("yy", year.toString().substr(2, 2));
    }

    format = format.replace("dd", day.toString().replace(/^(\d)$/, '0$1'));

    if (format.indexOf("t") > -1) {
        if (hours > 11) {
            format = format.replace("t", "pm");
        } else {
            format = format.replace("t", "am");
        }
    }

    if (format.indexOf("HH") > -1) {
        format = format.replace("HH", hours.toString().replace(/^(\d)$/, '0$1'));
    }

    if (format.indexOf("hh") > -1) {
        if (hours > 12) {
            hours -= 12;
        }

        if (hours === 0) {
            hours = 12;
        }
        format = format.replace("hh", hours.toString().replace(/^(\d)$/, '0$1'));
    }

    if (format.indexOf("mm") > -1) {
        format = format.replace("mm", minutes.toString().replace(/^(\d)$/, '0$1'));
    }

    if (format.indexOf("ss") > -1) {
        format = format.replace("ss", seconds.toString().replace(/^(\d)$/, '0$1'));
    }

    return format;
};