您的位置:首页 > Web前端 > JavaScript

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

2016-05-18 15:00 531 查看
与其他编译语言的继承相比,javascript也有一套继承实现方式,即使用prototype原型及其链的方式。

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

(http://img.blog.csdn.net/20160518145959323)

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的基本用法有个简单的了解,如果各位看客有什么意见请留言,谢谢!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: