对于面向对象自己其实一直都挺糊涂的,就整理了一下面向对象中容易搞糊涂的几点 搞完以后觉得清晰多了

原型对象使用的注意点

1.如何访问原型上面的属性

• a.对象.属性
• b.构造函数.prototype.属性

2.属性的访问原则

• 就近原则,在访问属性的时候,先在对象自身查找(实例属性/方法),如果找到那么就直接使用.如果没有找到就去它们的原型对象身上去找,如果找到就直接使用,如果没有找到就undefined或者报错

3.设置原型属性

• 1.左值:如果是左值,那么在设置对象的属性的时候,不会去原型对象上面去找,查到自己是否有,如果有就修改,如果没有就添加.
• 2,如果是右值,那么在取值的时候就先找自己,找不到就去原型身上找.
  • 左值就是赋值 右值就是取值
  • 列如:p1.hello="hi ;左值
  • console.log(p1.hello); 右值
• 3.设置原型属性的方法
• a.只能通过构造函数.prototype.属性或者直接替换原型对象的方式来设置
• b.如果原型对象的属性是引用类型的，那么通过对象的方式来进行设置

重点来了！！！！！！！

    function Person(){};

     Person.prototype.name='张三';
     Person.prototype.showName=function(){
            console.log(this.name);
     };
    var p1=new Person();
    var p2=new Person();
    p1.showName();//张三
  console.log(p1.name);//张三
    p1.name='李四'; //设置的是对象的实例属性,不能修改原型属性
  console.log(p1.name);//李四
 console.log(p2.name);//张三
    console.log(p1); //实例属性是李四,原型属性还是张三,不能修改原型属性
    console.log(p2); //给p1设置实例属性对p2没任何影响

结果看每行代码后面的注释
上面代码结构很简单 就是根据属性的访问规则:就近原则
p1.name先在实例属性上找name,没有,原型属性上有 拿过来用所以一开始是张三
当p1.name=李四;设置了实例属性,再找name发现实例属性上有,有就拿来用,就不用去原型上找了所以就是李四
但是p2没有设置实例属性,所以p2.name还是原型上的name张三

如果原型对象的属性是引用类型的

 function Person(){};

     Person.prototype.name='张三';
    Person.prototype.car={type:"火车",color:"red"};
    var p1=new Person();
    var p2=new Person();
    /*如果原型对象的属性是引用类型的*/
    console.log(p1.car.type);//火车
    p1.car.type='飞船';
    console.log(p1.car.type);//飞船
    console.log(p2.car.type);//飞船
    

对于 p1.car.type='飞船';代码读取方式是先读取p1.car 取值嘛就是右值,上面说过右值在自身上找 找到了再设置,没有就往原型上找,找到了发现有个car 然后修改car中type中的值改为飞船

QQ截图20170419205540.png

console.log(p1.car.type);//飞船 先读p1.car.自己没有,原型上找有 拿来用一找 找到了飞船
console.log(p2.car.type);//飞船 同理

看看另一种情况

function Person(){};

     Person.prototype.name='张三';
  
    Person.prototype.car={type:"火车",color:"red"};
    var p1=new Person();
    var p2=new Person();

//    /*如果原型对象的属性是引用类型的*/
    console.log(p1.car.type);//火车
    p1.car.type='飞船';
   console.log(p1.car.type);//飞船
 console.log(p2.car.type);//飞船

    p1.car={type:"火箭"};
    console.log(p1.car.type);//火箭
    console.log(p2.car.type);//飞船

p1.car={type:"火箭"}; 左值 自身没有添加并赋值 在自身身上添加和赋值

QQ截图20170419210828.png

console.log(p1.car.type);//火箭 先读p1.car发现自己有 直接用 所以是火箭
console.log(p2.car.type);//飞船 先读p1.car 发现没有 就往原型上找找到了拿来用

通过这几个例子应该明白了吧,最主要是运用左值和右值那么怎么变怎么改都没问题了