jinx

个人站

欢迎来到我的个人站~


JavaScript继承

在校期间用的都是C++或Java这类编程语言,刚开始接触JavaScript这种基于原型的编程语言感受还是很不一样的,尤其是在继承方面。

查阅了一些资料之后简单地罗列一下学习到的JavaScript继承方式。

构造函数的继承

比如,现在有一个”动物”对象的构造函数。

function Animal(){
	this.species = "动物";
}

还有一个”猫”对象的构造函数。

function Cat(name,color){
	this.name = name;
	this.color = color;
}

方法一:构造函数绑定

function Cat(name,color){
	Animal.apply(this, arguments);
	this.name = name;
	this.color = color;
}
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物

方法二:prototype模式

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物

方法三: 利用空对象作为中介

先将Animal对象改写: function Animal(){ } Animal.prototype.species = “动物”;

然后:

var F = function(){};
F.prototype = Animal.prototype;
Cat.prototype = new F();
Cat.prototype.constructor = Cat;

我们将上面的方法,封装成一个函数,便于使用。

function extend(Child, Parent) {
	var F = function(){};
	F.prototype = Parent.prototype;
	Child.prototype = new F();
	Child.prototype.constructor = Child;
	Child.uber = Parent.prototype;
}

使用的时候,方法如下

extend(Cat,Animal);
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物

方法四:拷贝继承

首先,还是把Animal的所有不变属性,都放到它的prototype对象上。

function Animal(){}
Animal.prototype.species = "动物";

然后,再写一个函数,实现属性拷贝的目的。

function extend2(Child, Parent) {
	var p = Parent.prototype;
	var c = Child.prototype;
	for (var i in p) {
		c[i] = p[i];
	}
	c.uber = p;
}

这个函数的作用,就是将父对象的prototype对象中的属性,一一拷贝给Child对象的prototype对象。

使用的时候,这样写:

extend2(Cat, Animal);
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物

非构造函数的继承

比如,现在有一个对象,叫做”中国人”。

var Chinese = {
	nation:'中国'
};

还有一个对象,叫做”医生”。

var Doctor ={
	career:'医生'
}

方法一:object()方法

function object(o) {
	function F() {}
	F.prototype = o;
	return new F();
}

这个object()函数,其实只做一件事,就是把子对象的prototype属性,指向父对象,从而使得子对象与父对象连在一起。

使用的时候,第一步先在父对象的基础上,生成子对象:

  var Doctor = object(Chinese);

然后,再加上子对象本身的属性:

  Doctor.career = '医生';

这时,子对象已经继承了父对象的属性了

alert(Doctor.nation); //中国

方法二:深拷贝

function deepCopy(p, c) {
	var c = c || {};
	for (var i in p) {
		if (typeof p[i] === 'object') {
			c[i] = (p[i].constructor === Array) ? [] : {};
			deepCopy(p[i], c[i]);
		} else {
			c[i] = p[i];
		}
		}     	return c;
}

使用的时候这样写:

  var Doctor = deepCopy(Chinese);

现在,给父对象加一个属性,值为数组。然后,在子对象上修改这个属性:

Chinese.birthPlaces = ['北京','上海','香港'];
Doctor.birthPlaces.push('厦门');

这时,父对象就不会受到影响了。

alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港

目前,jQuery库使用的就是这种继承方法。

打赏一个呗

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦