『Javascript基础重点』5.以toString()为例学习JS中的“java方法重写”

---

欢迎关注 『Javascript基础重点』 专栏，持续更新中
欢迎关注 『Javascript基础重点』 专栏，持续更新中
介绍一些Javascript的基础重点知识，包括并不限于函数作用域与提前声明和对象的构造函数等问题。

本节学习前需要掌握部分关于原型对象的知识，详情可见前面的博文
3. 了解原型对象优雅地构造函数の“JS中的Java继承” 提高运行效率，优雅地使用对象

1. 平时我们的console.log()打印的是什么呢？

• 我们新建的Person类也是有自己的“父类”，其实我们控制台输出的信息默认是调用的"父类"的toString()方法的返回值。
• 如果我们希望在输出对象时不输出[object Object]，可以为对象添加一个toString()方法。
• 谷歌浏览器比较特殊，对打印做了一些优化，实际上按照JS的设计，不应该输出对象本身，这里可能是谷歌浏览器为了便于开发者重写过toString()。

    <script>
      //非谷歌浏览器内核
      console.log(per); //[object Object]
      console.log(per.toString()); //[object Object]
      //谷歌浏览器内核
      console.log(per); //对象本身
      console.log(per.toString()); //[object Object]
    </script>

因为大家现在用的谷歌浏览器内核多，下面我们都默认输出对象时带上**.toString()**。

---

2. 重写单个对象的toString()例程

重写了per的toString()

    <script type="text/javascript">
      function Person(name, age, gender) {
        this.name = name;
        this.age = age;
        this.gender = gender;
      }
      //创建一个Person实例
      var per = new Person("孙悟空", 18, "男");
      var per2 = new Person("猪八戒", 28, "男");
      //只修改了per对象的toString方法，所以per和per2有区别
      per.toString = function () {
        return (
          "Person[name=" +
          this.name +
          ",age=" +
          this.age +
          ",gender=" +
          this.gender +
          "]"
        );
      };
      console.log("per-----" + per.toString());
      console.log("per2-----" + per2.toString());
    </script>

---

3. 重写类的toString()例程

重写了Person类的toString()

    <script type="text/javascript">
      function Person(name, age, gender) {
        this.name = name;
        this.age = age;
        this.gender = gender;
      }
      //创建一个Person实例
      var per = new Person("孙悟空", 18, "男");
      var per2 = new Person("猪八戒", 28, "男");
      //只修改了per对象的toString方法，所以per和per2有区别
      Person.prototype.toString = function () {
        return (
          "Person[name=" +
          this.name +
          ",age=" +
          this.age +
          ",gender=" +
          this.gender +
          "]"
        );
      };
      console.log("per-----" + per.toString());
      console.log("per2-----" + per2.toString());
    </script>

---

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2023 mzh

Crated：2023-3-1

欢迎关注 『Javascript基础重点』 专栏，持续更新中
欢迎关注 『Javascript基础重点』 专栏，持续更新中
『1.提前声明问题，你苦恼写了js函数代码但是不会生效的问题吗？』
『2.易错点之函数形参与函数作用域的坑』
『3.了解原型对象优雅地构造函数の“JS中的Java继承” 提高运行效率，优雅地使用对象』
『4.JS垃圾回收机制简析』
『5.以toString()为例学习JS中的java方法重写』
『6.数组的常用方法与数组遍历』
『7.函数进阶之call()和apply()与arguments』
『8.Date类与利用时间戳来测试代码的执行的性能』
『9.Math类方法』
『10.包装类』
『11.字符串的方法』
『12.正则表达式介绍 邮件正则表达式写法』
『13.dom的应用』
『未完待续』

---