JavaScript代码重用模式的详细说明

代码重用及其原则

代码复用，顾名思义，就是将曾经编写的部分甚至全部代码复用，从而构建一个新的程序。当谈到代码重用时，我们首先想到的是继承。代码重用的原则是：

在js中最好使用对象组合而不是类继承。因为没有类的概念，所以实例的概念没有意义。js中的对象是简单的键值对，可以动态创建和修改。

然而，在js中，我们可以使用构造函数和新的操作符来实例化一个对象，这类似于其他在语法中使用类的编程语言。

例如：

var trig kit 4=new Person()；js调用构造函数Person时，看似是一个类，但实际上还是一个函数，这给了我们一些基于类的开发思路和继承模式，我们可以称之为“类继承模式”。

传统的继承模式需要class关键字。我们假设上面的类继承模式是现代的继承模式，这是一种不需要作为类来考虑的模式。

类继承模式

请看下面两个构造函数Parent()和Child()的例子：

脚本类型='text/javascript '函数Parent(name){ this . name=name | | ' Allen '；} parent . prototype . say=function(){ return this . name；} function Child(name){} //使用Parent构造函数创建一个对象，并将该对象分配给Child原型，以继承functioninherit (c，p){ c . prototype=new p()；//原型属性应该指向对象，而不是函数。}//调用声明的继承函数inherit(Child，Parent)；/script当使用new Child()语句创建对象时，它将通过原型从Parent()实例获取其函数，例如：

var kid=new Child()；kid . say()；//艾伦原型链

为了讨论类继承模式中原型链的工作原理，我们将对象视为内存中某个包含数据和对其他块的引用的块。使用新的Parent()语句创建对象时，将在下图左侧创建一个保存name属性的块。如果我们想访问say()方法，我们可以通过指向构造函数Parent()的prototype属性的隐式链接_ _ prototype _ _来访问正确的块Parent.prototype。

那么，当用var kid=new Child()创建一个新对象时会发生什么呢？下图：

除了隐式链接__proto__之外，使用新的Child()语句创建的对象几乎是空的。在这种情况下，__proto__指向在inherit()函数中使用新的Parent()语句创建的对象

执行kid.say()时，他会通过原型链查询中间的block对象，因为左下角的block对象没有say()方法。但是中间的block对象也没有say()方法，所以他查询了原型链上最右边的block对象，正好有say()方法。完成了吗？

这里的处决还没有结束。this.name在say()方法中被引用，该方法指向构造函数创建的对象。这里，它指向新的子块()。但是，新的Child()中没有名称属性。因此，将查询中间块，中间块只有名称属性。至此，原型链的查询完成。

关于更详细的讨论，请查看我的文章：javascript研究笔记(5)原型和原型链细节

共享原型

这种模式的规则是，可重用的成员应该被转移到原型中，而不是放在这个原型中。因此，为了继承的目的，任何值得继承的东西都应该在原型中实现。因此，您可以将子对象的原型设置为与父对象的原型相同，如下例所示：

函数继承(C，P){ C . prototype=P . prototype；}

子对象和父对象共享同一个原型，并且可以平等地访问say()方法。但是，子对象不继承名称属性

原型继承

原型继承是一种“现代”的无类继承模式。请参见以下示例：

脚本类型='text/javascript' //要继承的对象var parent={name : 'Jack' //这里不能有分号}；//新对象var子对象=对象(父对象)；alert(child . name)；//Jack/script在原型模式下，不需要使用对象文字来创建父对象。如下面的代码所示，构造函数可以用来创建父对象，这样，它自己的属性和构造函数原型的属性将被继承。

脚本类型='text/javascript' //parent构造函数functionperson () {this。name=' trigkit4}//添加到属性person . prototype . getname=function(){ returnthis . name；};//新建Person类对象var obj=new Person()；//继承var kid=Object(obj)；alert(kid . getname())；//trigkit4/script在这种模式下，可以选择只继承现有构造函数的原型对象。无论父对象是如何创建的，对象都从对象继承，如下例所示：

脚本类型='text/javascript' //parent构造函数functionperson () {this。name=' trigkit4}//添加到属性person . prototype . getname=function(){ returnthis . name；};//新建Person类对象var obj=new Person()；//继承var kid=Object(person . prototype)；console . log(type of kid . getname)；//函数，因为它在原型console.log中(type of kid . name)；//未定义，因为只有原型继承/脚本