详谈javascript的toString()方法

toString方法

作用

• 强制数据类型转换
• 对象的默认返回值
• 修改toString的返回值

---

强制数据类型转换

toString做强制类型转换，我在另一篇文章javascript的强制数据类型转换有详细的介绍，这里不做述赘。https://blog.youkuaiyun.com/qq_41604269/article/details/82855778

---

对象的默认返回值

当我们直接在页面中打印一个对象时，实际上是输出对象的toString()方法的返回值。

例1:

		function Person(name,gender,age){
			this.name = name;
			this.gender = gender;
			this.age = age;
		}

		var per1 = new Person("张三","男",18);
		//打印per1对象
		alert(per1);

结果为 [object Object]

如果我们不希望在打印对象时出现[object Object]这种信息，可以给对象添加一个toString()方法显示自定义内容。

注意：这是指添加，而不是修改。为什么不是修改呢？因为toString()方法的真正位置在对象的原型的原型里面。此篇文章会详细介绍toString的真实位置并告知如何修改其返回值。想了解原型请戳我的另一篇文章：详谈prototype和__proto__原型

例2：添加toString()方法

		function Person(name,gender,age){
			this.name = name;
			this.gender = gender;
			this.age = age;
		}

		var per1 = new Person("张三","男",18);

		//给per1对象添加toString()方法
		per1.toString= function(){
			alert("这是一个对象");
		}
		//打印per1对象
		alert(per1);

结果为  这是一个对象

 

在例2代码的同一Person类下，再创建一个对象per2，此时打印per2对象仍是返回 [object Object]。怎么样才能在打印这些对象时都返回这是一个对象而不是 [object Object]呢？

解决方法：要先找到toString()方法的具体位置，然后将其返回值由[object Object]修改为这是一个对象即可。

---

 

修改toString的返回值

toString的真实位置并修改其返回值。

toString的真实位置:

前提创建了类Person和实例per1、per2

则真实位置：Person.prototype.toString或者per1.__proto__.toString或者per2.__proto__.toString

 

验证真实位置:Person.prototype.hasOwnProperty("toString")

或者per1.__proto__.hasOwnProperty("toString")或者per2.__proto__.hasOwnProperty("toString")

 

修改toString方法的返回值:

修改Person原型的toString

Person.prototype.toString = function(){

return "这是一个对象";

}

或

per1.__proto__.toString = function(){

return "这是一个对象";

}

或

per2.__proto__.toString = function(){

return "这是一个对象";

}

修改完毕后，打印任意对象返回值皆为这是一个对象

修改代码1：对象返回值固定为 这是一个对象

		function Person(name,gender,age){
			this.name = name;
			this.gender = gender;
			this.age = age;
		}

		var per1 = new Person("张三","男",18);
		var per2 = new Person("李四","男",20);

//修改返回值为 这是一个对象
Person.prototype.toString = function(){

return "这是一个对象";

}
/*
或者

per1.__proto__.toString = function(){

return "这是一个对象";

}

或者

per2.__proto__.toString = function(){

return "这是一个对象";

}
*/
alert(per1);
alert(per2);

修改代码2：对象返回值为 具体对象的具体属性信息

		function Person(name,gender,age){
			this.name = name;
			this.gender = gender;
			this.age = age;
		}

		var per1 = new Person("张三","男",18);
		var per2 = new Person("李四","女",20);

//修改返回值为 具体属性值
Person.prototype.toString = function(){

return "姓名："+this.name+",性别："+this.gender+",年龄："+this.age;

}
/*
或者

per1.__proto__.toString = function(){

return "姓名："+this.name+",性别："+this.gender+",年龄："+this.age;

}

或者

per2.__proto__.toString = function(){

return "姓名："+this.name+",性别："+this.gender+",年龄："+this.age;

}
*/

alert(per1);
alert(per2);