JavaScript学习(一)将实例状态存储在实例对象中,方法存储在原型中

最近受到一位前辈的启发,萌生了写技术博客的想法。一来巩固自己的知识,查漏补缺,不断提高;二来一家之见总是片面,博采众长,接受批评才能更好的进步。下面是最近在完成一个框架的扩展时所接触到的一些知识中的一点的总结,也从一些经典的书籍、网友的博客中汲取了很多的灵感,辅以自己的理解,分享出来,如果有幸能让大家有所收获,那就再好不过;如果出现错误,还请大家指正。

我们在使用js进行类式编程的时候,常常会需要给new出来的实例添加属于当前实例的独有的属性,在不理解原型与实例关系的情况下,我们可能会写成如下这样:

//定义一个Person构造函数,我们可以把它理解为类
    function Person(name){
      this.name=name;
    }
    //为Person的原型增加方法和属性
    Person.prototype={
      age:[],
      setAge:function(age){
        this.age.push(age);
      }
    }
    //实例化xm对象,并赋值输出
    var xm=new Person("小明");
    xm.setAge(19);
    console.log(xm.name+":"+xm.age);//小明:19
    //实例化xh对象,并赋值输出,发现已经改变
    var xh=new Person("小华");
    xh.setAge(16);
    console.log(xh.name+":"+xh.age);//小华:19,16

很明显,这样为实例添加属性是不恰当的。因为我们在对不同的实例进行setAge操作时影响到了其他的实例,这样实例的属性会失去独立性,也失去了意义。
出现这样的情况原因是Person的prototype对象是所有实例共享的,任何实例对其中的属性 进行操作都会影响到其他的实例。所以若要添加只属于某个实例的自己的属性,我们应当将这样的属性存储到实例对象自身当中,如下:

//定义一个Person构造函数,我们可以把它理解为类
    function Person(name){
      this.name=name;
      this.age=[];
    }
    //为Person的原型增加方法和属性
    Person.prototype={s
      setAge:function(age){
        this.age.push(age);
      }
    }
    //实例化xm对象,并赋值输出
    var xm=new Person("小明");
    xm.setAge(19);
    console.log(xm.name+":"+xm.age);//小明:19
    //实例化xh对象,并赋值输出
    var xh=new Person("小华");
    xh.setAge(16);
    console.log(xh.name+":"+xh.age);//小华:16

这样,实例的属性就成为了相互独立的,任何实例操作自身的属性都不会影响到其他实例的属性。
通常来说,实例独有的属性我们会存储到实例对象自身当中。一些永远不需要改变的属性或者本身就需要改变的属性会存储到原型对象当中。
通常来说,方法是没有状态的,并且各个实例对象之间也可以共享,因此方法一般会被放在原型对象之中。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值