• JS学习之prototype属性


        javascript中的每个对象都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。以A.prototype = new B();为例,

    理解prototype不应把它和继承混淆,A的prototype为B的一个实例,可以理解A将B中的方法和属性全部克隆了一遍,A可以使用B的方法和属性,这里强调的是克隆而不是继承,可以出现这种情况:A的prototype是B的实例,同时B的prototype也是A的实例。

     1 function baseClass()
     2 {
     3   this.showMsg = function()
     4   {
     5      alert("baseClass::showMsg");   
     6   }
     7 }
     8 
     9 function extendClass()
    10 {
    11 }
    12 extendClass.prototype = new baseClass();
    13 var instance = new extendClass();
    14 instance.showMsg(); // 显示baseClass::showMsg
    View Code

        我们首先定义了baseClass类,然后我们要定义extentClass,但是我们打算以baseClass的一个实例为原型,来克隆的extendClass也同时包含showMsg这个对象方法。extendClass.prototype = new baseClass()就可以阅读为:extendClass是以baseClass的一个实例为原型克隆创建的。那么就会有一个问题,如果extendClass中本身包含有一个与baseClass的方法同名的方法会怎么样?

     1 function baseClass()
     2 {
     3     this.showMsg = function()
     4     {
     5         alert("baseClass::showMsg");   
     6     }
     7 }
     8 
     9 function extendClass()
    10 {
    11     this.showMsg =function ()
    12     {
    13         alert("extendClass::showMsg");
    14     }
    15 }
    16 
    17 extendClass.prototype = new baseClass();
    18 var instance = new extendClass();
    19 
    20 instance.showMsg();//显示extendClass::showMsg
    View Code

        实验证明:函数运行时会先去本体的函数中去找,如果找到则运行,找不到则去prototype中寻找函数。或者可以理解为prototype不会克隆同名函数。

    那么又会有一个新的问题:如果我想使用extendClass的一个实例instance调用baseClass的对象方法showMsg怎么办?答案是可以使用call:

    1 extendClass.prototype = new baseClass();
    2 var instance = new extendClass();
    3 var baseinstance = new baseClass();
    4 baseinstance.showMsg.call(instance);//显示baseClass::showMsg
    View Code

         这里的baseinstance.showMsg.call(instance)可以理解为:将instance当做baseinstance来调用,调用它的对象方法showMsg,这里可能有人会问,为什么不用baseClass.showMsg.call(instance);这就是对象方法和类方法的区别,我们想调用的是baseClass的对象方法,假如有下面这种写法:

    ExtendClass.prototype = new BaseClass();指的是ExtendClass的原型指向BaseClass原型的属性

    ExtendClass prototype = BaseClass;指的是ExtendClass的原型执行BaseClass本身。

  • 相关阅读:
    LeetCode题解之Flipping an Image
    LeetCode 之Find Minimum in Rotated Sorted Array
    LeetCode题解Transpose Matrix
    LeetCode 题解之Minimum Index Sum of Two Lists
    LeetCode题解之Intersection of Two Linked Lists
    LeetCode 题解之Add Two Numbers II
    LeetCode题解之Add two numbers
    href="#"与href="javascript:void(0)"的区别
    有关ie9 以下不支持placeholder属性以及获得焦点placeholder的移除
    ie7下属性书写不规范造成的easyui 弹窗布局紊乱
  • 原文地址:https://www.cnblogs.com/sunfie/p/4761841.html
Copyright © 2020-2023  润新知