关于JavaScript的原型模式,下面的是学习后的个人理解,若是有偏差,还请指出,谢谢
JavaScript原型模式
1.什么是原型?
原型是一个对象,其他的对象可以通过它实现属性的继承,所有的对象在默认情况下都只有一个原型,而且原型本身也是一个对象。所以一个类的真正原型是被类内部的[prototype]属性所指出的。如下,我们先看一个空对象和它的原型
//定义一个空对象 function Person(){ } Person.prototype.name = "username"; Person.prototype.getName = function(){ alert(this.name);//此处的this表示调用本方法的一个具体的实例化对象 }
这样,我们给一个Person的空的对象增加了一个原型属性name,和一个原型方法getName();通过 new Person().showName(); 能直接调用它的原型方法,并将原型属性name弹出。我们用对象集的方法表示原型
function Person(){ } Person.prototype = { name : "plum", showName : function(){ alert(this.name); } }
这样便能清晰的表示出原型本身也是一个对象,并且被Person对象(此时这是一个类)所持有的属性prototype所指出。
2.那什么是对象呢?
在JavaScript中,一个对象就是任何的无序的键值对的集合,也就是除了五种的基本数据类型(number,string,boolean,null,undefined)其他的都是对象。
上述的例子中我们用functions定义的对象,那如果我们用var 或者new 直接创建的json对象和用构造函数实例化的对象又是怎么改变原型的引用的呢?
new Person().getName();//弹出username var a = new Person(); a.__proto__.name = "v";//使用__proto__改变原型 a.getName();//弹出v new Person().getName();//弹出v
通过上面一开始弹出的最开始的username,我们使用__proto__属性更改了原型模式之后再运行弹出v,由此我们可以知道使用new关键字的生成出来的对象都持有一个__proto__属性,这个属性保存了创建它的构造函数的prototype的原型的引用。
使用var直接创建的对象的原型引用
var cat = {}; //cat空类 Object.getPrototypeOf(cat).name = "plum"; cat.__proto__.master = "bote"; cat.age = 2;//隐式调用,cat.__proto__.age = 2,即隐藏了__proto__的调用 cat["sex"] = "man"; alert(cat.name+" "+cat.age+" "+cat["sex"]+" "+cat.master);//弹出plum 2 man bote
使用var直接创建的空类无法通过 cat.prototype.name = "plum" 方式来指向原型,只能通过Object.getPrototypeOf()或__proto__这两种方式显示调用 prototype而一般我们都是直接使用 cat.age或cat["age"]这两种隐式调用。
3.关于原型的继承
下面我们通过原型模式实现简单的继承
function per(){ this.getName = function(str){ alert(str); }; } per.prototype.getAge = function(age){ alert(age); } var a = {};//空对象,实现继承上面的类 a.__proto__= per.prototype; a.getAge(2);
这种种方式实现的继承是简单继承,我们如果调用 a.getName("sad"); 此时a.getName is not function,并不能继承per内部的getName方法,所以这种继承是简单的继承,只有当被继承的类是空对象的时候,才能完全继承,只能继承Prototype的属性和方法。
下面我们用简单的方式实现继承
var b = {}; //空对象,是它完全继承上面的per(){} b.__proto__ = new per(); //构造函数(constructor),将b的构造函数,变回他自己本身的构造函数 b.__proto__.constructor = b; b.getAge(1); b.getName("huahua");
这样种方式,我们便将per类完全继承过来了。
下面我们再来看一个完整的继承
//创建一个人员类 function Person(name){ this.name = name; } //创建教师类 function Teacher(name,books){ //call方法可以将一个函数的对象上下文从初始化变成由this来决定 //调用Person的构造函数,因为Person没有new,所以它是个空对象 Person.call(this,name); this.books = books; } //使老师继承人员类 Teacher.prototype = new Person(); Teacher.prototype.constructor = Teacher; Teacher.prototype.getBooks = function(){ return this.name + " " + this.books; } var jim = new Teacher("Tom","JavaScript"); alert(jim.getBooks());
Teacher继承了Person,在原型中添加了getBooks的方法。
我们也可以写出Extend的方法,实现所有的继承
function extend(subClass,superClass){ //1.子类的原型类属性等于父类的原型属性 //初始化一个中间空对象,为了转换子父类关系 var F = function(){}; F.prototype = subClass.prototype; //2.让子类继承F subClass.prototype = new F(); subClass.prototype.constructor = subClass; //3.为子类增加superClass的属性 subClass.superClass = superClass.prototype; //4.如果原型类是超类(object),也要把构造函数的级别降下来 if(subClass.prototype.constructor == Object.prototype.constructor){ superClass.prototype.constructor = subClass; } }
这样我们通过这和extend方法能直接实现继承,下面我们使用这个方法来测试效果
function Author(name,books){ Author.superClass.constructor.call(this,name); this.books = books; this.getBook = function(){ return this.name + " " + this.books; } } extend(Author,Person); var peter = new Author("Peter","javascript"); alert(peter.getBook());
这样,以后便能用extend的方式直接继承,要注意,JavaScript中无法实现多继承。
关于继承的问题尽量都在代码和代码描述里,要在实例中理解,不能只看概念,不然只能是云里雾里,有疑问的地方多敲一下测试代码,就能理解。