对象继承的五种方法及浅拷贝与深拷贝

本文详细介绍了五种JavaScript实现继承的方法:使用call或apply、通过继承原型对象、直接继承原型对象、利用空对象作为中介及拷贝继承。每种方法都有具体示例,并对比了它们之间的优缺点。

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

        1-----第一种方法也是最简单的方法,使用call或apply方法,将父对象的构造函数绑定在子对象上,即在子对象构造函数中加一行:

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); // 动物

2-----通过继承某个对象的实例来继承此对象的原型对象,第二种方法更常见,使用prototype属性。
        如果"猫"的prototype对象,指向一个Animal的实例,那么所有"猫"的实例,就能继承Animal了。

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

第二行是什么意思呢?
        原来,任何一个prototype对象都有一个constructor属性,指向它的构造函数。如果没有"Cat.prototype = new Animal();"这一行,Cat.prototype.constructor是指向Cat的;加了这一行以后,Cat.prototype.constructor指向Animal。

3-----直接继承原型对象(原型继承),第三种方法是对第二种方法的改进。由于Animal对象中,不变的属性都可以直接写入Animal.prototype。所以,我们也可以让Cat()跳过 Animal(),直接继承Animal.prototype。

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

优点:1 效率高 2 省内存
            缺点是 Cat.prototype和Animal.prototype现在指向了同一个对象,那么任何对Cat.prototype的修改,都会反映到Animal.prototype。

        4-----利用空对象作为中介

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

5-----拷贝继承,上面是采用prototype对象,实现继承。我们也可以换一种思路,纯粹采用"拷贝"方法实现继承。简单说,如果把父对象的所有属性和方法,拷贝进子对象,不也能够实现继承吗?这样我们就有了第五种方法。
        首先,还是把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:'医生'
		 }

        1-------object()方法

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

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

        使用的时候,第一步先在父对象的基础上,生成子对象:
        var Doctor = object(Chinese);
        然后,再加上子对象本身的属性:
        Doctor.career = '医生';
        这时,子对象已经继承了父对象的属性了。
         alert(Doctor.nation); //中国

        2-----除了使用"prototype链"以外,还有另一种思路:把父对象的属性,全部拷贝给子对象,也能实现继承。

function extendCopy(p) {
			    var c = {};
			    for (var i in p) { 
			      c[i] = p[i];
			    }
			    c.uber = p;
			    return c;
			 }

但是,这样的拷贝有一个问题。那就是,如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,而不是真正拷贝,因此存在父对象被篡改的可能。
        请看,现在给Chinese添加一个"出生地"属性,它的值是一个数组。
         Chinese.birthPlaces = ['北京','上海','香港'];
        /所以,extendCopy()只是拷贝基本类型的数据,我们把这种拷贝叫做"浅拷贝"。这是早期jQuery实现继承的方式。

3-----深拷贝
        所谓"深拷贝",就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难,只要递归调用"浅拷贝"就行了。(递归思想)

 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库使用的就是这种继承方法。

本文摘自阮一峰的博客

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值