JS继承一
来源:互联网 发布:php开源在线考试系统 编辑:程序博客网 时间:2024/05/24 05:03
1、构造函数方式写类,通过方法调用复制父类属性/字段到子类 实现继承
这里父类,子类都采用构造函数方式写,不用原型。子类调用父类函数来复制父类的属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/**
* 父类Polygon:多边形
* @param {Object} sides
*/
function
Polygon(sides) {
this
.sides = sides;
this
.setSides =
function
(s) {
this
.sides=s;}
}
/**
* 子类Triangle:三角形
*/
function
Triangle() {
this
.tempfun = Polygon;
//父类引用赋值给子类的一个属性tempfun
this
.tempfun(3);
//调用
delete
this
.tempfun;
//删除该属性
this
.getArea =
function
(){};
}
//new个对象
var
tri =
new
Triangle();
console.log(tri.sides);
//继承的属性
console.log(tri.setSides);
//继承的方法
console.log(tri.getArea);
//自有的方法
//缺点是对于Triangle的实例对象用instanceof为父类Polygon时是false
console.log(tri
instanceof
Triangle);
//true
console.log(tri
instanceof
Polygon);
//false
因为 JavaScript中具名函数的多种调用方式 ,子类还可以有以下的多种实现方式。只是在子类中调用父类方法不同而已。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function
Triangle() {
Polygon.call(
this
,3);
//call方式调用父类
this
.getArea =
function
(){};
}
function
Triangle() {
Polygon.apply(
this
,[3]);
//apply方式调用父类
this
.getArea =
function
(){};
}
function
Triangle() {
var
temp =
new
Polygon(3);
//new方式调用父类
for
(atr
in
temp) {
//全部复制给子类
this
[atr] = temp[atr];
}
this
.getArea =
function
(){};
}
这种方式的缺点是子类的实例对象用instanceof检查父类时总是false。这与java中继承"is a "的关系是违背的。
2、原型方式写类,原型方式继承
core JS自身的对象系统就是采用原型方式(prototype based)继承的。或者说core JS没有采用常见的类继承(class based)系统,而是使用原型继承来实现自己的对象系统。工作中我们也可以用原型方式来实现继承,代码复用以构建自己的功能模块。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/**
* 父类Polygon:多边形
*
*/
function
Polygon() {}
Polygon.prototype.sides = 0;
Polygon.prototype.setSides =
function
(s) {
this
.sides=s;}
/**
* 子类Triangle:三角形
*/
function
Triangle() {}
Triangle.prototype =
new
Polygon();
//这是原型继承关键的一句
Triangle.prototype.getArea =
function
(){}
//new个对象
var
tri =
new
Triangle();
console.log(tri.sides);
//继承的属性
console.log(tri.setSides);
//继承的方法
console.log(tri.getArea);
//自有方法
//instanceof测试
console.log(tri
instanceof
Triangle);
//true,表明该对象是三角形
console.log(tri
instanceof
Polygon);
//true,表明三角形也是多边形
虽然从输出可以看出子类继承了父类Polygon的属性sides和方法setSides,但sides是0,怎么会是三角形呢。还得调用下tri.setSides(3)使之成为三角形。这样似乎很不方便。不能传参数,即是原型方式的缺点。优点是正确的维护了"is a"的关系。
3、组合构造函数/原型方式写类,采用前面种方式继承
这种方式父类,子类的属性都挂在构造函数里,方法都挂在原型上。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/**
* 父类Polygon:多边形
*/
function
Polygon(sides) {
this
.sides = sides;
}
Polygon.prototype.setSides =
function
(s) {
this
.sides=s;}
/**
* Triangle 三角形
* @param {Object} base 底
* @param {Object} height 高
*/
function
Triangle(base,height) {
Polygon.call(
this
,3);
//复制父类属性给自己
this
.base = base;
this
.height = height;
}
Triangle.prototype =
new
Polygon();
//复制父类方法给自己
Triangle.prototype.getArea =
function
(){
//最后定义自己的方法
return
this
.base*
this
.height/2;
}
//new个对象
var
tri =
new
Triangle(12,4);
console.log(tri.sides);
//继承的属性
console.log(tri.setSides);
//继承的方法
console.log(tri.base);
//自有属性
console.log(tri.height);
//自有属性
console.log(tri.getArea);
//自有方法
//instanceof测试,表明正确的维护了"is a"的关系
console.log(tri
instanceof
Triangle);
//true,表明该对象是三角形
console.log(tri
instanceof
Polygon);
//true,表明三角形也是多边形
- JS继承一
- 浅谈JS继承(一)
- JS继承(一)
- JS OO继承、多继承一法
- js继承封装(一)
- 关于JS中的继承(一)
- 廖雪峰老师JS教程读书笔记(一):JS继承
- JS继承--组合继承
- JS继承-类继承
- Js继承。
- js继承
- js继承
- js 继承
- js继承
- JS 继承
- JS 继承
- js继承
- js继承
- linux常用命令全集
- 带着项目学PHP第六讲 - ecshop增加广告和广告位的方法
- Android中可展开的列表组件(ExpandableListView)的使用
- 批量scp脚本——从多台机器拷贝相同文件
- 一个简单的AVR测试程序
- JS继承一
- 单例模式
- JS继承二
- “快排”笔记
- Android 类ListView下拉刷新控件实现 .
- JS继承三
- 开机自检程序在FAT32上做的检查与修复工作
- Asp.net 图片验证码示例
- java中调用web浏览器类库之jdic的配置及简单运用