题目1

image.png

  1. function Teacher() {
  2. this.student = 500;
  3. this.skill = ["JS", "JQ"];
  4. }
  5. var teacher = new Teacher();
  6. Student.prototype = teacher;
  7. function Student() { }
  8. var student = new Student();
  9. student.student++;
  10. student.skill.push("HTML", "CSS");
  11. console.log(student);
  12. console.log(teacher);

image.png

解析

  1. //student.student++;
  2. // 等价于
  3. student.student=student.student+1;

子类不可以修改原型上的属性和方法,但我还想改变student对象上的student属性,这就只能在对象上新建student属性,在自己上新建属性,再给其取值,这样可以不在原型上找student属性,在自己身上找student属性,这只针对原始值
想让student.student的结果从500,变成501,改变不了student.protostudent的值,只能在student.student上做文章,新建student.student属性,给其赋值student.protostudent的值,并加一

第二个student.student+1是取值了,可以取原型上面的值,再加1

  1. console.log(student.student);

image.png
这是取值

原始值存的是值,引用值存的是引用,push操作的还是源数组,引用没有发生变化的前提下,不叫改变了原型的属性,如果=号就是重新赋值,改变引用

  1. // student.skill.push("HTML", "CSS");
  2. student.skill=["HTML","CSS"];
  1. function Teacher() {
  2. this.student = 500;
  3. this.skill = ["JS", "JQ"];
  4. }
  5. var teacher = new Teacher();
  6. Student.prototype = teacher;
  7. function Student() { }
  8. var student = new Student();
  9. //student.student++;
  10. // 等价于
  11. // student.student=student.student;
  12. console.log(student.student);
  13. // student.skill.push("HTML", "CSS");
  14. student.skill=["HTML","CSS"];
  15. console.log(student);
  16. console.log(teacher);

image.png

image.png
image.png

综合题目

原型与this

  1. function Parent() {
  2. this.a = 1;
  3. this.b = [1, 2, this.a];
  4. this.c = { demo: 5 };
  5. this.show = function () {
  6. console.log(this.a, this.b, this.c.demo);
  7. }
  8. }
  9. function Child() {
  10. this.a = 2;
  11. this.change = function () {
  12. this.b.push(this.a);
  13. this.a = this.b.length;
  14. this.c.demo = this.a++;
  15. }
  16. }
  17. Child.prototype = new Parent();
  18. var parent = new Parent();//1 [1,2,1],5
  19. var child1 = new Child();//11 1,[1,2,1],5
  20. var child2 = new Child();//12 1,[1,2,1],5
  21. child1.a = 11;
  22. child2.a = 12;
  23. parent.show();//1 [1,2,1],5
  24. // 通过new Parent执行,
  25. child1.show();//11,[1,2,1],5
  26. child2.show();//12,[1,2,1],5
  27. child1.change();//5,[1,2,1,11],4
  28. child2.change();//6,[1,2,1,11,12],5
  29. parent.show();//1,[1,2,1],5
  30. child1.show();//5,[1,2,1,11,12],5
  31. child2.show();//6,[1,2,1,11,12],5

image.png
image.png

解析

  1. function Parent() {
  2. this.a = 1;
  3. this.b = [1, 2, this.a];
  4. this.c = { demo: 5 };
  5. this.show = function () {
  6. console.log(this.a, this.b, this.c.demo);
  7. }
  8. }
  9. function Child() {
  10. this.a = 2;
  11. this.change = function () {
  12. this.b.push(this.a);
  13. this.a = this.b.length;
  14. this.c.demo = this.a++;
  15. }
  16. }
  17. Child.prototype = new Parent();
  18. //先把new之后的对象parent的a、b、c的值写出来
  19. //不涉及原型
  20. var parent = new Parent();//1 [1,2,1],5
  21. //涉及原型自身a是2,经过child1.a = 11变成11,child1.b中的.a,在new Child时,b的值已经确定,因为a是原始值,会新建一个变量,变量值为2存在b里
  22. var child1 = new Child();//2 1,[1,2,1],5 -> 11 1,[1,2,1],5
  23. var child2 = new Child();//2 1,[1,2,1],5 -> 12 1,[1,2,1],5
  24. child1.a = 11;
  25. child2.a = 12;
  26. parent.show();//1 [1,2,1],5
  27. // 调用的show方法是Child.protoype上面的,但this指向child1实例对象,谁调用就指向谁,不看是不是原型还是本身的方法,相当于child1.a,child1.b,child1.c。
  28. child1.show();//11,[1,2,1],5
  29. child2.show();//12,[1,2,1],5
  30. //child1没有引用值.b,拿父类的,
  31. //b.push(a) 11,[1,2,1,11],5 ->a=b.length 4,[1,2,1,11],5 ->c.demo=a++ =>c.demo=a;a=a+1; 5,[1,2,1,11],4
  32. child1.change();//11,[1,2,1,11],5 -> 4,[1,2,1,11],5 ->
  33. //child1本身只有一个原始值a,b与c都是原型上的引用值,child1改变了原型上的引用值,child2用的原型指向的地址与child1一样,原型指向,原型地址一样
  34. //12,[1,2,1,11],4->b.push(a) 12,[1,2,1,11,12],4->a=b.length 5 ,[1,2,1,11,12],4 -> 6,[1,2,1,11,12],5
  35. child2.change();//6,[1,2,1,11,12],5
  36. //改变的是Child.prototype = new Parent();的new Parent()对象的值,与 var parent = new Parent()互不影响
  37. parent.show();//1,[1,2,1],5
  38. //a是child1.a,b是child1.prototype.b,c是child1.prototype.c,是引用值
  39. child1.show();//5,[1,2,1,11,12],5
  40. child2.show();//6,[1,2,1,11,12],5

原型

image.png
全是true

image.png
instanceof会遍历原型链

image.png
全是true

image.png
image.png