该例子使用了两种继承方式,详情可参见https://segmentfault.com/a/11...
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>继承模式</title>
<head>
<body>
<button onclick="sub()">click me</button>
</body>
</html>
<script type="text/javascript">
//叶子对象的父类
var Field = function(id) {
this.id = id;
}
Field.prototype.save = function() {
sessionStorage.setItem(this.id, this.getValue());
console.log(sessionStorage.getItem(this.id));
}
//因select和textarea的取值方式和input不一样
//所以单独抽离获取值的方法
//如果子类不覆盖此方法,save就会出错,所以用抛异常的方式,保证子类覆盖
Field.prototype.getValue = function() {
throw new Error('you should override this method');
}
//叶子对象的子类InputField
var InputField = function(label, id, type) {
//继承父类的id属性,相当于在InputField加上了this.id = id
Field.call(this, id);
//创建input节点
this.input = document.createElement('input');
this.input.id = id;
this.input.type = type;
//创建文本节点
this.label = document.createElement('label');
var labelTextNode = document.createTextNode(label);
this.label.appendChild(labelTextNode);
//创建div节点
this.divElement = document.createElement('div');
this.divElement.className = 'input-field';
//添加到div节点
this.divElement.appendChild(this.label);
this.divElement.appendChild(this.input);
}
//开始继承
function extend(newobj, obj) {
var F = function() {};
F.prototype = obj.prototype;
newobj.prototype = new F();
newobj.prototype.constructor = newobj;
}
//先得到父类的prototype上的方法
extend(InputField, Field);
//覆盖父类的方法,如果不覆盖,会抛异常
InputField.prototype.getValue = function() {
return this.input.value;
}
//实验一下
var input = new InputField('用户名', 'userName', 'text');
document.body.appendChild(input.divElement);
function sub() {
input.save()
}
</script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。