javascript学习笔记(十) js对象 继承_Javascript教程-查字典教程网
javascript学习笔记(十) js对象 继承
javascript学习笔记(十) js对象 继承
发布时间:2016-12-30 来源:查字典编辑
摘要:1.原型链//很少单独使用复制代码代码如下:ViewCode//定义SuperClass类,有一个属性property和一个方法getSup...

1.原型链

//很少单独使用

复制代码 代码如下:

View Code

//定义 SuperClass类,有一个属性property和一个方法getSuperValue

function SuperClass() {

this.property = true;

}

SuperClass.prototype.getSuperValue = function() {

return this.property;

}

//定义SubClass类,有一个属性subproperty和后来添加的一个方法getSubValue

function SubClass() {

this.subproperty = false;

}

//SubClass类继承SuperClass类

SubClass.prototype = new SuperClass();

//SubClass类添加一个方法getSubValue

SubClass.prototype.getSubValue = function() {

return this.subproperty;

}

//创建SubClass类的实例

var instance = new SubClass();

alert(instance.getSuperValue());

2. 确定原型与实例的关系

第一种方式用 instanceof 操作符,用来测试实例和原型链中出现过的构造函数

复制代码 代码如下:

alert(instance instanceof Object); //true ,instance是Object的实例吗?

alert(instance instanceof SuperClass); //true ,instance是SuperClass的实例吗?

alert(instance instanceof SubClass); //true,instance是SubClass的实例吗?

第二种方式用 isPrototypeOf()方法,测试原型链中出现的原型

复制代码 代码如下:

alert(Object.prototype.isPrototypeOf(instance)); //true

alert(SuperClass.prototype.isPrototypeOf(instance)); //true

alert(SubClass.prototype.isPrototypeOf(instance)); //true

3. 用原型链继承定义方法时的注意点

定义方法是的顺序:

复制代码 代码如下:

View Code

function SuperClass() {

this.property = true;

}

SuperClass.prototype.getSuperValue = function() {

return this.property;

}

function SubClass() {

this.subproperty = false;

}

//SubClass继承SuperClass

SubClass.prototype = new SuperClass(); //这个要先写,新添加的方法和重写超类的方法要写在后面,否则重写的超类方法将永远无法调用

//添加新方法

SubClass.prototype.getSubValue = function() {

return this.subproperty;

}

//重写超类的方法

SubClass.prototype.getSuperValue = function() {

return false;

}

var instance = new SubClass();

alert(instance.getSuperValue()); //fales,这里SubClass的实例调用了SubClass的getSuperValue()方法,而屏蔽了SuperClass的getSuperValue()方法,

//使用SuperClass的方法会调用SuperClass的getSuperValue()方法

原型链继承的缺点:1)共享超类中的属性,2)在创建子类时不能向超类的构造函数传递参数。所有很少单独使用原型链

4.借用构造函数

//很少单独使用

优点:可以向超类传递参数 。缺点:函数无法复用,所有类都要使用构造函数模式

复制代码 代码如下:

View Code

function SuperClass(name) {

this.name = name;

}

function SubClass(){

SuperClass.call(this,"RuiLiang"); //继承了SuperClass,同时向SuperClass传递了参数

this.age = 29; //实例属性

}

var instance = new SubClass();

alert(instance.name); //RuiLiang

alert(instance.age); //29

6.组合继承

//最常用的继承模式

复制代码 代码如下:

View Code

//创建SuperClass

function SuperClass(name) {

this.name = name;

this.colors = ["red","blue","green"];

}

SuperClass.prototype.sayName = function() {

alert(this.name);

}

////创建SubClass

function SubClass(name,age) {

SuperClass.call(this,name); //继承属性

this.age = age; //自己的属性

}

SubClass.prototype = new SuperClass(); //继承方法

SubClass.prototype.sayAge = function() { //SubClass添加新方法

alert(this.age);

};

//使用

var instance1 = new SubClass("RuiLiang",30);

instance1.colors.push("black");

alert(instance1.colors); //"red,blue,green,black"

instance1.sayName(); //"RuiLiang"

instance1.sayAge(); //30

var instance2 = new SubClass("XuZuNan",26);

alert(instance2.colors); //"red,blue,green"

instance2.sayName(); //"RuiLiang"

instance2.sayAge(); //30

7.其它继承模式

原型式继承、寄生式继承、寄生组合式继承

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类