1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

      详解一个小实例理解js原型和继承

       更新时间£º2019年04月24日 09:11:30   作者£º凡尘yang   我要评论

      这篇文章主要介绍了js原型和继承£¬文?#22411;?#36807;示例代码介绍的非常详细£¬对大家的学习或者工作具有一定的参考学习价值£¬需要的朋友们下面随着小编来一起学习学习吧

      导语1£º一个构造函数的原型对象£¬其实就是这个构造函数的一个属性而已£¬属性名叫prototype,值是一个对象£¬对象中有一些属性和方法£¬所以每个构造函数的实例对象都拥有这些属性和方法的使用权¡£

      导语2£º构造函数需要用 new 操作符来调用£¬它本身没有任?#25105;?#20041;£¬只有实例化后才有生命£¬当然你也可以把它当普通函数使用£¬那this就是指向window了£¨意义不大£©¡£

      导语3£º对于构造函数实例化出一个对象经历了什么£¿

      我们看下面这个例子£º

      这个例子充分说明了£¬大佬们创造出构造函数这种东西£¬是有特殊用处的£¬本身没什么意义£¬在实例化后瞬间有了生命¡£

       好了有这些准备工作后£¬我们开始写一个构造函数+原型用法

      废?#23433;?#22810;说直接上代码£¡£¡£¡

       

      1£¬这个例子中有个构造函数£¬名字叫GetElem,参数期望传入的是一个元素的id,可以获取这个id的元素£»

      2£¬实例化一个叫domOne的对象£¬它传入一个实参为£º¡°old¡±;所?#36816;?#21487;以获取这个id为old的元素

      3£¬在构造函数的原型上定义一个方法叫£ºchangeInner 作用是如果传入了实参就用实参来改变元素的内容

      4£¬在构造函数的原型上定义一个方法叫£ºon作用是根据事件类型和对应函数干一些事情£»

      domOne这个实例化对象中并没有这两个方法£¬但是没关系£¬它的原型对象上拥有啊£¡£¡£¡所以可以直接用£»

      您一定会问为何不直接把方法写在构造函数中不就省事了£¿原因是这样的话£¬每实例化一个对象?#23478;?#22312;实例化过程中创建这些方法£¬

      如果实例化太多就消耗性能£¬而放在原型对象上就只需要做一次¡£这也是构造函数+原型优于工厂模式的方面¡£

       最后一张图£º

       

      方法可以链接起来写的原因是  在每个方法中  return this (this指向的是实例对象£¬当然可以继续调用它可以调用的方法啦£¡£¡£¡)

      以上所述是小编给大家介绍的js原型和继承详解整合£¬希望对大家有所帮助£¬如果大家有任?#25105;?#38382;请给我留言£¬小编会及时回复大家的¡£在此也非常感谢大家对脚本之家网站的支持£¡

      相关文章

      最新评论

      3dÊÔ»úºÅÖвÊÍø

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>