Question

我有一个非常简单的代码。

使用toString覆盖的模型：

policy.ts：

export class Policy {
 public id: number;
 public name: string;
 public description: string;

 toString(): string {
   return this.name + ': ' + this.description;
 }

}

然后我以2种方式绑定使用Policy create-policy.component.html：

...
<input type="text" name="name" [(ngModel)]="policy.name" required>

它涉及组件create-policy.component.ts：

import {Component, OnInit} from '@angular/core';
import {Policy} from '../models/policy';

@Component({
selector: 'app-create-policy',
templateUrl: './create-policy.component.html',
styleUrls: ['./create-policy.component.css']
})
export class CreatePolicyComponent implements OnInit {

policy: Policy
= {
id: 0,
name: "",
description: ""
};
constructor() {}

ngOnInit() {
}
onSubmitPostHttp() {
console.log('Started onSubmitPostHttp');
console.log("policy=" + this.policy.toString());
}
}

仍然在控制台上我没有获得属性，它打印

create-policy.component.ts:23 policy = [object Object]

直接日志记录属性正常运行：

 console.log("policy=" + this.policy.name);

打印：

政策= SS

Answer 1

policy不是Policy的实例，仍使用原生toString方法。

将Policy类用作policy: Policy之类的接口这一事实并未对其进行实例化。由于普通对象符合此接口（它已经有toString方法），因此不会导致类型错误。

可以是：

policy = Object.assign(new Policy, {
  id: 0,
  name: "",
  description: ""
});

此时很明显Policy类不是为它的使用而设计的，最好将属性初始化移动到它的构造函数中：

export class Policy {
  constructor(
   public id: number,
   public name: string,
   public description: string
 ) {}

 toString(): string {
   return this.name + ': ' + this.description;
 }

}

和

policy = new Policy(
  id: 0,
  name: "",
  description: ""
);

Answer 2

您正在创建this.policy作为新对象，而不会覆盖toString（）方法。这就是为什么它在记录结果时仍然使用默认实现。

在创建typescript类时查看生成的javascript代码：

TS代码：

export class Policy {
    public id: number;
    public name: string;
    public description: string;

    toString(): string {
        return this.name + ': ' + this.description;
    }
}

let pol: Policy = {
    id: 0,
    name: "",
    description: ""
};

JS代码：

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Policy = /** @class */ (function () {
        function Policy() {
        }
        Policy.prototype.toString = function () {
            return this.name + ': ' + this.description;
        };
        return Policy;
    }());
    exports.Policy = Policy;
    var pol = {
        id: 0,
        name: "",
        description: ""
    };
});

正如您在此处所看到的，toString（）方法被添加到Policy对象的原型中。你可以阅读很多prototypes in javascript，但关键是除非你使用new运算符，否则不会调用策略的原型。

正如提到的那样; javascript中的所有对象都有一个toString方法it is included in the object prototype。这就是为什么在直接创建对象时没有出现任何错误的原因，它具有策略对象的所有正确属性和方法，这就是typescript允许这种行为的原因。

为什么不根据需要调用TypeScript toString方法

2 个答案: