JavaScript ES5 模拟实现“继承”

2023-12-13 11:57:43

本文尝试用JavaScript(ES 5)模拟实现,面向对象语言中的“继承”机制。

继承/覆写父类的方法,追加子类自身特有的方法,一个都不少。

Input模拟“父类”

先用js中的一等公民function仿写一个Input类。

function Input(maxlen) {
	var value = "";
	this.getMaxLen = function() {
		return maxlen;
	}
	this.value = function(v) {
		if(v == undefined) {
			return value;
		} else {
			value = v;
		}
	}
	return this;
}

这个Input类能够指定最大输入长度,能够通过value()方法存/取内部的值。

NumberInput模拟“子类”

function NumberInput(min, max, maxlen) {
	var base = Input(maxlen);
	// “继承”了Input中的getMaxLen()方法
    
    // 追加子类自身的方法getMin()
	base.getMin = function() {
		return min;
	}
    // 追加子类自身的方法getMax()
	base.getMax = function() {
		return max;
	}
    
	// 要覆写value()方法之前,留存父类的value()方法
    // 便于需要的时候调用。
	var _supperValue = base.value;
	base.value = function(v) {
		if(typeof v === 'number') {
			_supperValue(v);
		} else {
			var v = _supperValue()||'0';
			return parseInt(v);
		}
	}
	return base;
}

NumberInput“子类”,不光实现了自己特有的getMin()/getMax()方法,还继承了父类的getMaxLen()方法,并且覆写了父类的value()方法。这不就是实现了面向对象语言中的继承么!

验证代码

var x = NumberInput(1, 100, 10);
x.getMaxLen();//10
x.getMin();//1
x.getMax();//100
x.value();//0
x.value(88);
x.value();//88

文章来源:https://blog.csdn.net/linysuccess/article/details/134966951
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。