javascript 高级——prototyp对象(中)原型的赋值

最新推荐文章于 2021-08-31 00:42:36 发布

原创最新推荐文章于 2021-08-31 00:42:36 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

javascript初识专栏收录该内容

8 篇文章

订阅专栏

本文探讨了JavaScript中构造函数与原型对象的关系，重点讲解了如何处理构造函数Person的实例p1和p2之间的属性共享与独立问题，特别是针对数组属性book的操作进行了详细说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为原型是独立于函数的一个对象，因此有自己独立的空间，在处理两者的关系上一定要认真仔细

function Person(){};
Person.prototype = {
	name:"张三",
	age:"李四",
	say:function(){
		alert(this.name + ":" + this.age);
	}
}
var p1 = new Person();
var p2 = new Person();
p1.say();
p2.say();
/*
* 此时两者的结果都是一样的，没有什么区别
 */

 function Person(){
      };
      Person.prototype = {
          name: "张三",
          age: "李四",
          say: function(){
              alert(this.name + ":" + this.age);
          }
      }
      var p1 = new Person();
      var p2 = new Person();
	  p1.name = "赵六";
      p1.say();  //结果：赵六：李四
      p2.say();  //结果：张三：李四

当直接不通过prototype的时候会在自己的空间中寻找name属性，如果有就覆盖，如果没有就建立并赋值

在查找的时候就直接从自己空间中取得name的值

在原型中一定要区别查找操作和定义操作，或者两者的先后顺序，这对空间中的值有着本质的影响

 function Person(){
      };
      Person.prototype = {
          name: "张三",
          age: "李四",
		  book:["大河","大海"],
          say: function(){
              alert(this.name + ":" + this.age + "-->"+this.book[0]+":"+this.book[1]);
          }
      }
      var p1 = new Person();
      var p2 = new Person();
	  p1.book.push("赵六");
      p1.say();  
      p2.say();

在这里由于操作的对象时数组，对数组进行的是push操作，这个操作时先查找push然后在原来的基础上进行增加因此两者得到同样的答案

张三:李四-->大河:大海

如果像下面一样就不会出现这种情况，两者的值不一样

 function Person(){
      };
      Person.prototype = {
          name: "张三",
          age: "李四",
		  book:["大河","大海"],
          say: function(){
              alert(this.name + ":" + this.age + "-->"+this.book[0]+":"+this.book[1]);
          }
      }
       	var p1 = new Person();
      	var p2 = new Person();
	  p1.book = ["小何","小孩"];
	  alert(p1.book);
      p1.say();  //张三:李四-->小何:小孩
      p2.say();  //张三:李四-->大河:大海