js原型链上面的炕：通过实例对象修改原型（链）上面的属性

js原型链上面的炕：通过实例对象修改原型（链）上面的属性

js：通过实例对象修改原型（链）上面的属性
1 原型对象属性是基本数据类型
2 原型对象的属性为引用类型
3 总结（只是把前面的copy一下，方便记忆）

js：通过实例对象修改原型（链）上面的属性

我是在学习原型链继承的时候发现的，学习真能让人发现问题。
这里分原型对象中属性为基本数据类型和引用数据类型两种。
而引用数据类型又分为整体修改还是只是修改引用类型的属性（注意不是原型的属性，而是原型属性（引用类型）的属性，是原型中引用类型的属性。）两种。下面先分别说明，最后总结。

1 原型对象属性是基本数据类型

当原型对象的属性为基本数据类型时，通过实例对象修改原型上面的属性，并不会修改原型对象的属性，而是在该实例对象创建了一个同名属性。

//构造函数
 
  function SuperType(age) {
    this.age = age;
}
  //重写构造函数的原型
  SuperType.prototype = { //原型是一个对象
    name: "super"
    color: ["red", "blue", "yellow"],
    printName: function () {
        console.log(name);
    }
}
 
  //创建实例对象
  let obj__1 = new SuperType(16);  //实例对象1
  let obj__2 = new SuperType(18); //实例对象2
 
 
//通过实例对象修改原型上面的属性（属性为基本类型），并不是修改，而是在该实例对象创建了一个同名属性
  console.log(obj__1.name);  //super
  console.log(obj__2.name);  //super
  obj__1.name = "obj__1";  //修改属性
 
  console.log(obj__1.name);  //obj__1   通过上面的这条语句修改，是在实例对象obj__1里面添加了属性name，对原型没有影响。读取obj__1.name时，会先读取自己有的属性
  console.log(obj__2.name);  //super  读取obj__2.name时，先看obj__2，因为obj__2没有name属性，所以从原型上面读取

2 原型对象的属性为引用类型

1）当原型对象的属性为引用类型时，如果通过实例对象整体修改该引用类型（直接将另外的值赋给它），并不会修改原型对象对应的引用类型，而是在该实例对象创建了一个同名属性。

//构造函数
 
  function SuperType(age) {
 
    this.age = age;
 
}
 
 
 
  //重写构造函数的原型
 
  SuperType.prototype = { //原型是一个对象
 
    name: "super",
 
    color: ["red", "blue", "yellow"],
 
    printName: function () {
 
        console.log(name);
 
    }
 
}
 
 
 
  //创建实例对象
 
  let obj__1 = new SuperType(16);  //实例对象1
 
  let obj__2 = new SuperType(18); //实例对象2
 
 
 
//通过实例对象修改原型上面的引用类型,如果整体修改该引用类型，并不是修改，而是在该实例对象创建了一个同名属性，不改变原型上面的引用类型
 
  console.log(obj__1.color);  //[ 'red', 'blue', 'yellow' ]
 
  console.log(obj__2.color);  //[ 'red', 'blue', 'yellow' ]
 
  obj__1.color = [ "white", "black" ];  //整体修改引用类型，===实例对象创建了一个同名属性
 
  console.log(obj__1.color);  //[ 'white', 'black' ]  先访问实例对象的本身属性color，发现有该属性
 
  console.log(obj__2.color);  //[ 'red', 'blue', 'yellow' ]  先访问实例对象的本身属性color，发现没有该属性，访问原型上面的color

2）当原型对象的属性为引用类型时，如果通过修改该引用类型（也称对象，每一个对象都是键值对的组合）的属性，会直接修改原型上面的引用类型。

//构造函数
 
  function SuperType(age) {
 
    this.age = age;
 
}
 
 
 
  //重写构造函数的原型
 
  SuperType.prototype = { //原型是一个对象
 
    name: "super",
 
    color: ["red", "blue", "yellow"],
 
    printName: function () {
 
        console.log(name);
 
    }
 
}
 
 
 
  //创建实例对象
 
  let obj__1 = new SuperType(16);  //实例对象1
 
  let obj__2 = new SuperType(18); //实例对象2
 
 
 
//通过实例对象修改原型上面的引用类型,如果修改该引用类型（也称对象，每一个对象都是键值对的组合）的属性，会修改原型上面的引用类型
 
  console.log("______________分割线____________________");
 
  console.log(obj__1.color);  //[ 'red', 'blue', 'yellow' ]
 
  console.log(obj__2.color);  //[ 'red', 'blue', 'yellow' ]
 
  obj__1.color[1] = "white";  //修改引用类型其中的属性（也可以使用能直接改变原数组的数组方法改变color），===改变了原型上面的引用类型
 
  console.log(obj__1.color);  //[ 'red', 'white', 'yellow' ]  先访问实例对象的本身属性color，发现没有该属性，访问原型上面的color
 
  console.log(obj__2.color);  //[ 'red', 'white', 'yellow' ]  先访问实例对象的本身属性color，发现没有该属性，访问原型上面的color

3 总结（只是把前面的copy一下，方便记忆）

当原型对象的属性为基本数据类型时，通过实例对象修改原型上面的属性，并不会修改原型对象的属性，而是在该实例对象创建了一个同名属性。

当原型对象的属性为引用类型时，会有两种情况：如果通过实例对象整体修改该引用类型（直接将另外的值赋给它），并不会修改原型对象对应的引用类型，而是在该实例对象创建了一个同名属性；如果通过修改该引用类型（也称对象，每一个对象都是键值对的组合）的属性，会直接修改原型上面的引用类型。

原文链接：https://blog.csdn.net/abc1194474469/article/details/107335756