JavaScript的面向对象编程（OOP）（二）—

关于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中无法实现多继承。

关于继承的问题尽量都在代码和代码描述里，要在实例中理解，不能只看概念，不然只能是云里雾里，有疑问的地方多敲一下测试代码，就能理解。

巴特西

JavaScript的面向对象编程（OOP）（二）——原型

JavaScript原型模式

1.什么是原型？

2.那什么是对象呢？

3.关于原型的继承

最新文章

热门文章