理解javascript原型继承原理

1、理解 Javascript 原型继承原理prototype 与prototype在有面象对象基础的前提下，来看一段代码：/Animal 构造函数function Animal(name)0304 = name;/Animal 原型对象Atotype = 0708id:Animal,sleep:function()0910alert(sleep);11 12var dog = new Animal(旺才);alert();/旺才alert(dog.id);/Animaldog.sleep()/sleep其对应的简易内存分配结构图：现在让来解释

2、一下这张内存图的来龙去脉：首先明确一点prototype与prototype 并不是同一个东西。那先来看prototype,每一个函数对象都有一个显示的prototype 属性,它代表了对象的原型，更明确的说是代表了由函数对象(构造函数)所创建出来的对象的原型。结合本例，Atotype 就是dog的原型，dog 所的那个对象将从Atotype 所的对象那继承属性与方法。每个对象都有一个名为Prototype的属性，指向于它所对应的原型对象。在本例中dog 的prototype指向Atotype，大家都知道，Atotype

3、也是一个对象，即然是一个对象，那它必然也有prototype属性指向于它所对应的原型对象，由此便了一种链表的结构，这就是原型链的概念。额外的是:不同的 JS 引擎实现者可以将Prototype属性命名为任何名字，并且设置它的可见性，前且只在 JS 引擎。虽然无法在 JS 代码中到Prototype(FireFox 中可以，名字为 proto 因为Mozilla 将它公开了)，但可以使用对象的isPrototypeOf()方法进试，注意这个方在整个Prototype 链上进行判断。注：关于函数对象的具体内容，将在后继的博文中讲解。属性原则使用pName属性名为 proto ):一个

4、对象的属性时，按照下面的步骤进行处理(假设obj 的Prototype如果obj 存在propName 属性，返回属性的值，否则如果obj. proto 为null，返回undefined，否则返回obj. proto .propName调用对象的方法跟属性搜索过程一样，因为方法的函数对象就是对象的一个属性值。提示: 上面步骤中隐含了一个递归过程，步骤 3 中obj. proto 是另外一个对象，同样将采用 1, 2, 3这样的步骤来搜索propName 属性。这就是基于Prototype 的继承和共享。其中object1 的方法fn2 来自object2，概念上即object2 重写了obj

5、ect3 的方法fn2。JavaScript 对象应当都通过prototype 链关联起来，最顶层是Object，即对象都派生自Object 类型。结合是上面的理论，让再来看一个更加复杂的示例，他明确的解释了prototype、prototype、原型链以及属性的相关要点:view sourcepr?/Animal 构造函数function Animal(name)0304 = name;/Animal 原型对象Atotype = 0708id:Animal,sleep:function()0910alert(sleep);11 1213 function

6、 Human(name,age)14Animal.call(this,name);1516 17this.age = age;18 Htotype = new Animal();19 Htotype.id = Human;2021 Htotype.say = function()alert(o everyone,My name is + +,Im +this.age+22and Im a +this.id);23 24/Human 相关调用var jxl = new Human(笨蛋,25); 27 alert(

7、);/笨蛋28 alert(jxl.id);/Human29 jxl.say();/30o everyone,My name is 笨蛋,Im 25 and Im a Humanalert(Atotype.isPrototypeOf(jxl);/truealert(Ototype.isPrototypeOf(jxl);/true根据上面的代码，你能画出相应的内存图吗？好，让来看一下：注：prototype 的根为Ototype,对象Ototype 的prototype属性为null.其实，这里还有很多东西可以讲，但在其原理都在这上了，可试着调整一下代码的次序，如将Human