js多继承实现

最新推荐文章于 2024-01-29 14:51:01 发布

原创最新推荐文章于 2024-01-29 14:51:01 发布 · 2.4k 阅读

CC 4.0 BY-SA版权

这篇博客介绍了JavaScript中如何通过extend和mix方法实现多继承。虽然JavaScript的原型链仅支持单继承，但通过技巧可以实现类似多继承的效果。文章详细展示了extend方法的属性复制，用于单继承，并解释了其浅复制的特性。然后，提出了mix方法作为多继承的解决方案，并讨论了将其绑定到Object.prototype上的可能性，以便所有对象都可以使用这种方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        <h1>2.4老师不止一位——多继承</h1>
	<p>JavaScript中继承是依赖prototype链实现的，只有一条原型链，所以理论上是不能继承多个父类的。
		然而JavaScript是灵活的，通过一些技巧方法你却可以继承多个对象的属性来实现类似多继承。</p>
	<p>讲解多继承之前先说一下当前很流行的一个用来继承单对象属性的extend方法。</p>
	<script>
		//单继承  属性复制
		var extend = function(target, source) {
			//遍历源对象中的属性
			for ( var property in source) {
				//将源对象中的属性值赋值到目标对象中
				target[property] = source[property];
			}
			//返回目标对象
			return target;
		};
		
	</script>
	<p>PS：这个extend方法是一个浅复制过程，他只能复制类型的属性，对于引用类型的属性他无能为力。而jQuery等一些框架实现了深度复制，就是将源对象中引用类型的属性在执行一遍extend方法而实现的。</p>
	<script>
	    var book = {
	       name: "javascript设计模式",
	       alike: [ "css", "html", "javascript" ]
	    };
	    var anotherBook = {
	       color: "red"
	    };
	    
	    extend( anotherBook, book );
	    console.log( anotherBook.name );
	    console.log( anotherBook.alike );
	    anotherBook.alike.push( "ajax" );
	    anotherBook.name = "设计模式";
	    console.log( anotherBook.alike );
	    console.log( anotherBook.name );
	    console.log( book.alike );
	    console.log( book.name );
	    
	</script>
    <script>
       //多继承  属性复制
       var mix = function(){
          var i = 1,
              len = arguments.length,
              target = arguments[ 0 ],
              arg;
          //遍历被继承的对象
          for( ; i < len; i++ ){
             //缓存当前的对象
             arg = arguments[ i ];
             //遍历被继承的对象中的属性
             for( var property in arg ){
                //将被继承对象中的属性复制到目标对象中
                target[ property ] = arg[ property ];
             }
          };
          return target;
       }
    </script>
	<p>这种实现方法固然不错，可是使用的时候需要传入目标对象，当然也可以将它绑定到原生对象Object上，这样所有的对象就可以用这个方法了。</p>
	<script>
	   Object.prototype.mix = function(){
	      var i = 0,                  //从第一个参数起被继承的对象
	          len = arguments.length, //获取参数长度
	          arg;                    //缓存参数对象
          //遍历被继承的对象
          for( ; i < len; i++ ){
            //缓存当前对象
            arg = arguments[ i ];
            for( var property in arg ){
               //将被继承对象的属性复制到目标对象中
               this[ property ] = arg[ property ];
            }
          }
	   }
	</script>
	<p>这样我们就可以直接在对象上调用了。在JavaScript中实现继承是如此的美妙！！！</p>