JS中的toString()方法

墨蓝 2022-10-29 09:18 204阅读 0赞

你是否遇到这样的疑惑？  
代码：

<!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8" />
    	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
    	<title>Document</title>
    	<script type="text/javascript">
    		function Person(name,age,sex){
    			this.name = name;
    			this.age = age;
    			this.sex = sex;
    		}
    		var one = new Person("草莓",10,"女");
    		var two = new Person("车厘子",20,"女");
    		console.log(one);
    		console.log(two);
    	</script>
    </head>
    <body>
    	
    </body>
    </html>

输出结果是这样的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]  
其实这个输出的是该对象的toString（）方法的返回值，你瞧：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]  
那我要输出详细信息，我只要修改返回值呀：  
因此我这样：

<!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8" />
    	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
    	<title>Document</title>
    	<script type="text/javascript">
    		function Person(name,age,sex){
    			this.name = name;
    			this.age = age;
    			this.sex = sex;
    		}
    		var one = new Person("草莓",10,"女");
    		var two = new Person("车厘子",20,"女");
    		one.toString = function(){
    			return "姓名：" + this.name + ",年龄：" + this.age + ",性别：" + this.sex;
    		}
    		console.log(one);
    		console.log(two);
    	</script>
    </head>
    <body>
    	
    </body>
    </html>

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]  
那我就修改上一级：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]  
修改好了如下：

<!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8" />
    	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
    	<title>Document</title>
    	<script type="text/javascript">
    		function Person(name,age,sex){
    			this.name = name;
    			this.age = age;
    			this.sex = sex;
    		}
    		var one = new Person("草莓",10,"女");
    		var two = new Person("车厘子",20,"女");
    		Person.prototype.toString = function(){
    			return "姓名：" + this.name + ",年龄：" + this.age + ",性别：" + this.sex;
    		}
    		console.log(one);
    		console.log(two);
    		
    	</script>
    </head>
    <body>
    	
    </body>
    </html>

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]: /images/20221024/74468f5bf8d94bcda8fb3f4731da4f6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]: /images/20221024/9888b22452124682bc1ad5013cdf7b17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]: /images/20221024/67c7ec635f0e459d8a96b89170f3dca6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]: /images/20221024/d10abac596aa47f28b4e77162b338e05.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 4]: /images/20221024/f5e729046e67430b8c951564dc0d85a4.png