宝哥软件园

理解Javascript_05_原型继承原理

编辑:宝哥软件园 来源:互联网 时间:2021-10-22

Prototype和[[prototype]]在有表面对象基础的前提下看一段代码:复制代码如下: //Animal构造函数函数animal (name) {this。name=name} //Animal原型对象Animal . prototype={ id : ' Animal ',sleep : function(){ alert(' sleep ');}} var dog=新动物('王采');alert(dog . name);//王采警报(dog . id);//Animal dog.sleep()//sleep其对应的简单内存分配结构图:

现在我们来解释一下这个记忆图的来龙去脉:首先明确[[prototype]]和prototype不是一回事。先看原型。每个函数对象都有一个显示的原型属性,它代表对象的原型,更具体地说,是由函数对象(构造函数)创建的对象的原型。结合这个例子,Animal.prototype就是狗的原型,狗引用的对象将继承Animal.prototype引用的对象的属性和方法.每个对象都有一个名为[[原型]]的内部属性,该属性指向其对应的原型对象。在这个例子中,狗的[[prototype]]指向了Animal.prototype,众所周知,animal.prototype也是一个对象,也就是说它还必须有[[prototype]]属性指向其对应的原型对象,从而形成链表结构,这就是原型链的概念。更重要的是,不同的JS引擎实现者可以用任何名称来命名内部[[Prototype]]属性,并设置其可见性,这仅在JS引擎内部使用。虽然内部[[Prototype]]不能在JS代码中访问(因为Mozilla已经公开了,所以可以称为__proto__了),但是可以通过使用对象的isPrototypeOf()方法进行测试。注意,这种方法将在整个原型链中进行判断。注意:函数对象的具体内容将在后续的博文中说明。属性访问原则使用obj.propName访问对象的属性时,请遵循以下步骤(假设obj的内部[[Prototype]]属性名为__proto__): 1。如果obj具有propName属性,则返回属性值,否则返回2。if obj。__proto__ _为空,返回未定义,否则为3。返回对象。_ _ proto _ _ .propName .调用对象的方法与访问属性搜索过程相同,因为方法的函数对象是对象的属性值。提示:在上述步骤中隐含了一个递归过程。__proto__是步骤3中的另一个对象,因此将使用与步骤1、2和3相同的步骤来搜索propName属性。

这是基于Prototype的继承和共享。object1的方法fn2来自object2。从概念上讲,object2重写了object3的方法fn2。JavaScript对象应该都是通过原型链链接的,顶层是Object,也就是对象都是从Object类型派生出来的。结合上面的理论,我们来看一个比较复杂的例子,它清晰地解释了prototype、[[prototype]]、prototype链和属性访问的相关点, Copy代码如下://Animal构造函数Animal(name){ this . name=name;} //Animal原型对象Animal . prototype={ id : ' Animal ',sleep : function(){ alert(' sleep ');} }函数人类(姓名、年龄){ Animal.call(this,姓名);this.age=年龄;}人类.原型=新动物();Human . prototype . id=' Human ';human . prototype . say=function(){ alert('大家好,我叫' this.name ',我叫' this.age ',我是' this . id ');}//人类调用var jxl=new Human('白痴',25);alert(jxl . name);//白痴警报(jxl . id);//Human jxl . say();//大家好,我叫白痴,今年25岁,是人类警戒(animal . prototypeof . is prototypeof(jxl));//true alert(object . prototype . isprototypeof(jxl));//true根据上面的代码,可以画出相应的内存图吗?好的,我们来看看:

注意:原型的根是Object.prototype,Object.prototype的内部[[prototype]]属性为空。其实这里还是有很多要讲的,但是它的原理就在这个图中,所以尽量调整代码的顺序,比如把Human . prototype . id=' Human ';在人类中,原型=新动物();通过查看运行结果并解释原因,您可以学到很多东西。我发现通过内存展示程序内部操作的细节真的很完美!

更多资讯
游戏推荐
更多+