码迷,mamicode.com
首页 > Web开发 > 详细

js中的prototype和基于prototype的继承总结

时间:2014-09-29 18:12:12      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:js   prototype   

  与其他编译语言的继承相比,javascript也有一套继承实现方式,即使用prototype原型及其链的方式。

1、我们先用一个简单的例子先理解原型链,

    function superClass(){

     this.value = "super"; 

    }

    superClass.prototype.getSuperValue = function(){

     return this.value;

    }

    

    function subClass(){

     this.subClassValue = "sub";

    } 

    subClass.prototype = new superClass();

    subClass.prototype.getSubValue = function(){

     return this.subClassValue;

    }

    

    var s = new subClass();

    alert(s.getSuperValue());

    我们声明了俩个构造方法:subClass 和superClass,每个构造函数都有一个原型属性(本地无法访问)指向该构造方法的原型对象,

    原型对象有个constructor属性指向构造方法,实例中prototype属性指向原型。我们还知道所有对象都是继承

    Object的,其实在每个构造方法的原型对象中还有一个指向Object.prototype的属性,object.prototype中的constructor又指向

    object,这样就形成了一个prototype链。

    

    现在我们来分析subClass.prototype = new superClass(); subClass.prototype 指向superClass的实例意味着什么呢,意味着

    subClass.prototype指向了superClass的prototype,所以就能访问到原型中的属性和方法。

    

    这时的弹出框消息为"super". 这下应该就很明白为什么了吧。

2、还有一种实现继承的方式,就是借用构造方法

    function superClass(){

     this.name = [‘Eason‘]

    }

    function subClass(){

     superClass.call(this);//实现继承

    }

    var sub =  new subClass();

    alert(sub.name);

    sub.name.push(‘hou‘);

    alert(sub.name)

    3、组合继承:就是将原型链继承还构造函数继承结合在一起,使用原型链对原型属性和方法的继承,使用构造方法来实现对实例属性的继承

    原型继承的缺点:原型中定义的属性被多个实例共享

    构造方法的确定:方法都在构造方法中定义,复用率几乎为0

    function superClass(name){

     this.name = name;

     this.color= [‘red‘,‘yellow‘];

    }

    superClass.prototype.sayName = function(){

     return this.name;

    }

    function subClass(name,age){

     superClass.call(this,name);

     this.age = age;

    }

    subClass.prototype = new superClass();

    subClass.prototype.sayAge = function(){

     return this.age;

    }


    var sub = new subClass(‘Eason‘,26);

    alert(sub.color);

    alert(sub.sayName());

    alert(sub.sayAge());

4、还有一种比较常用的就是原型是继承,思想就是原型可以基于已有的对象创建新的对象,

    我们先构造一个工具方法:

    function createObj(o){

     function fun(){

    

     }

     fun.prototype = o;

     return new fun();

    }

    用法:

    var obj = {

     name : ‘Eason‘,

    }

    var o = createObj(obj);

    alert(o.name);

    o.name = ‘hou‘;

    alert(o.name);

通过上面的例子可以对prototype的基本用法有个简单的了解,如果各位看客有什么意见请留言,谢谢!

本文出自 “Eason's hcc” 博客,请务必保留此出处http://hcc0926.blog.51cto.com/172833/1559339

js中的prototype和基于prototype的继承总结

标签:js   prototype   

原文地址:http://hcc0926.blog.51cto.com/172833/1559339

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!