原型对象使用的注意点

最新推荐文章于 2022-02-12 11:32:56 发布

嚣张.miner

最新推荐文章于 2022-02-12 11:32:56 发布

阅读量254

点赞数 1

分类专栏： JavaScript 文章标签：构造函数原型属性面向对象 javascript 前端

本文链接：https://blog.csdn.net/zm_miner/article/details/79298333

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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

原型对象使用的注意点

### 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);//飞船