JavaScript中继承是依赖于原型prototype链实现的,只有一条原型链,所以理论上是不能继承多个父类的,但JavaScript是灵活的,可以一些技巧方法实现多个对象的属性多继承。
一、单继承extend实现
看一下用来继承单对象属性的extend方法:
1 // 对象属性extends方法:浅复制
2 // 单继承 属性复制
3 var extend = function(target, source) {
4 // 遍历源对象中的属性
5 for (var property in source) {
6 // 将源对象中的属性复制到目标对象中
7 target[property] = source[property];
8 }
9 // 返回目标对象
10 return target;
11 }
12
13 var book = {
14 name: 'JavaScript设计模式',
15 alike: ['css', 'html', 'JavaScript']
16 }
17 var anotherBook = {
18 color: 'blue'
19 }
20 extend(anotherBook, book);
21 console.log(anotherBook.name); // JavaScript设计模式
22 console.log(anotherBook.alike); // ["css","html","JavaScript"]
23
24 anotherBook.alike.push('ajax');
25 anotherBook.name = '设计模式';
26 console.log(anotherBook.name); // 设计模式
27 console.log(anotherBook.alike); // ["css","html","JavaScript","ajax"]
28 console.log(book.name); // JavaScript设计模式
29 console.log(book.alike); // ["css","html","JavaScript","ajax"]
注:extend是一个浅复制的过程,所以对于引用类型的属性它是无能为力的。
二、多继承mix实现
既然上面的方法可以实现对一个对象属性的复制继承,那么多个对象属性继承也是同样的道理。
1 // 多继承 属性复制
2 var mix = function() {
3 var i = 1, // 从第二个参数起为被继承的对象
4 len = arguments.length, // 获取参数长度
5 target = arguments[0], // 第一个对象为目标对象
6 arg; // 缓存参数对象
7 // 遍历被继承的对象
8 for(; i < len ; i++) {
9 // 缓存当前对象
10 arg = arguments[i];
11 // 遍历被继承对象中的属性
12 for (var property in arg) {
13 target[property] = arg[property];
14 }
15 }
16 // 返回目标对象
17 return target;
18 }
mix方法的作用就是将传入的多个对象的属性复制到源对象中,这样即可实现对多个对象属性的继承。当然也可以将它绑定到原生对象Object上,这样所有的对象就可以拥有这个方法了。
1 // 将mix方法绑定到原生对象Object,这样所有的对象就可以拥有这个方法了
2 Object.prototype.mix = function() {
3 var i = 0, // 从第二个参数起为被继承的对象
4 len = arguments.length, // 获取参数长度
5 arg; // 缓存参数对象
6 for(; i < len ; i++) {
7 // 缓存当前对象
8 arg = arguments[i];
9 // 遍历被继承对象中的属性
10 for (var property in arg) { // 不仅遍历对象自身的属性,还遍历继承的属性。所以mix方法也会赋值到
11 this[property] = arg[property];
12 }
13 }
14 }
15
16 var threeBook = {
17 size: 10
18 },
19 otherBook = {};
20 otherBook.mix(anotherBook, threeBook);
21 console.log(otherBook); /* {
22 alike: (4) ["css", "html", "JavaScript", "ajax"]
23 color: "blue"
24 mix: ƒ ()
25 name: "设计模式"
26 size: 10
27 */
参考书籍:《JavaScript设计模式》