详谈javascript的toString()方法

版权声明:EGEEK https://blog.csdn.net/qq_41604269/article/details/82996821

toString方法

作用

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

强制数据类型转换

toString做强制类型转换,我在另一篇文章javascript的强制数据类型转换有详细的介绍,这里不做述赘。

默认为对象的返回值

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

例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的真实位置并修改其返回值

前提创建了类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);

猜你喜欢

转载自blog.csdn.net/qq_41604269/article/details/82996821