对JavaScript中继承机制的理解

一、JavaScript中原型对象（构造函数）和实例对象以及protoType的关系：

二、JS中通过构造函数实现继承的五种方式：

1、使用apply()或call()方法：

<script type="text/javascript">
            function Animal () {
                this.species = "动物";
            }
            Animal.prototype.categroy = "猫科";

            function Cat (name, color) {
                //Animal.apply(this, arguments);
                Animal.call(this, name, color);
                this.name = name;
                this.color = color;
            }

            var cat1 = new Cat("tom", "yellow");
            alert(cat1.species);
            //不能继承prototype上的属性和方法
            alert(cat1.categroy);//undefined
        </script>

2、使用prototype对象

<script type="text/javascript">
            function Animal () {
                this.species = "动物";
            }
            Animal.prototype.catagory = "猫科";

            function Cat (name, color) {
                this.name = name;
                this.color = color;
            }
            Cat.prototype.weight = "30";

            Cat.prototype = new Animal();
            alert(Cat.prototype.constructor == Animal);//true，此时constructor指向Animal
            Cat.prototype.constructor = Cat;//将constructor指回Cat

            var cat1 = new Cat("tom", "yellow");
            alert(cat1.constructor == Cat);//true，实例的constructor默认调用prototype对象的constructor属性

            //能继承构造函数内和prototype上的所有属性和方法
            alert(cat1.species);
            alert(cat1.catagory);

            //Cat.prototype上原有的属性和方法将被清除
            alert(Cat.prototype.weight);
        </script>

某一对象使用prototype对象实现继承另一对象后，原对象的constructor属性指向被继承的另一对象，此时必须将原对象constructor属性指回原对象，否则会导致继承链的紊乱。设计继承时务必遵守。如下：

o.prototype = {};
o.prototype.constructor = o;

3、直接继承prototype对象

<script type="text/javascript">
            function Animal () {
                this.species = "动物";
            }
            Animal.prototype.catagory = "猫科";

            function Cat (name, color) {
                this.name = name;
                this.color = color;
            }
            Cat.prototype.weight = "30";


            Cat.prototype = Animal.prototype;            

            /**此时constructor指向Animal**/
            alert(Animal.prototype.constructor);
            alert(Cat.prototype.constructor);
            /****************************************/

            Cat.prototype.constructor = Cat;//将constructor指回Cat
            var cat1 = new Cat("tom", "yellow");
            alert(cat1.constructor == Cat);//true，实例的constructor默认调用prototype对象的constructor属性
            alert(cat1.catagory);

            /**直接使用prototype对象继承后，Animal.prototype.constructor和Cat.prototype.constructor指向同一对象**/
            /**应此对Cat.prototype的修改也会反应到Animal.prototype上**/
            alert(Animal.prototype.constructor == Cat);//true
            Cat.prototype.catagory = "猫科动物";
            alert(Animal.prototype.catagory);//猫科动物
            /***********************************/

            //不能继承构造函数内的属性和方法
            alert(cat1.species);//undefined
        </script>

4、间接继承prototype对象

<script type="text/javascript">
            function Animal () {
                this.category = "猫科";
            }
            Animal.prototype = {species: "动物"};

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

            var f = function() {}

            f.prototype = Animal.prototype;

            Cat.prototype = new f();
            Cat.prototype.constructor = Cat;//将constructor指回Cat

            var cat1 = new Cat("tom", "yellow");
            alert(cat1.constructor == Cat);//true，实例的constructor默认调用prototype对象的constructor属性
            alert(cat1.species);
            //不能继承构造函数内的属性和方法
            alert(cat1.category);//undefined

            /**使用空对象间接继承后，对Cat.prototype的修改不会反应到Animal.prototype上**/
            alert(Animal.prototype.constructor == Cat);//false
            Cat.prototype.species = "哺乳动物";
            alert(Animal.prototype.species);//动物
            /***********************************/
        </script>

对上面间接继承方法的封装如下：

<script type="text/javascript">
            function extend(child, parent){
                var f = function() {};
                f.prototype = parent.prototype;
                child.prototype = new f();
                child.prototype.constructor = child;
                //在子对象上打开一条通道，可以直接调用父对象的方法。这一行放在这里，只是为了实现继承的完备性，纯属备用性质。
                child.uber = parent.prototype;
            }
            function Animal () {
            }
            Animal.prototype = {species: "动物"};

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

            extend(Cat, Animal);
            var cat1 = new Cat();
            alert(cat1.species);
        </script>

在使用prototype对象实现继承时，子对象只能继续父对象的prototype对象的属性和方法。

5、使用属性复制实现继承

<script type="text/javascript">
            function extend(child, parent){
                var p = parent.prototype;
                var c = child.prototype;
                for(var i in p){
                    c[i] = p[i];
                }
                //在子对象上打开一条通道，可以直接调用父对象的方法。这一行放在这里，只是为了实现继承的完备性，纯属备用性质。
                c.uber = p;
            }
            function Animal () {
                this.category = "猫科";
            }
            Animal.prototype = {species: "动物"};

            function Cat (name, color) {
                this.name = name;
                this.color = color;
            }
            Cat.prototype.species = "小动物";
            Cat.prototype.weight = "30";

            extend(Cat, Animal);
            var cat1 = new Cat();
            alert(cat1.species);
            //不能继承构造函数内的属性和方法
            alert(cat1.category);//undefined

            //子对象的prototype上的不同名的属性和方法不会被清除
            alert(Cat.prototype.weight);
            //子对象的prototype上的同名的属性和方法会被重写
            alert(Cat.prototype.species);
        </script>

三、非构造函数（json对象）的继承

1、使用空对象间接继承

<script type="text/javascript">
            function object(o){
                var F = function(){};
                F.prototype = o;
                return new F();
            }

            var chinese = {nation : "cn"};
            var doctor = new object(chinese);
            doctor.career = "doctor";
            alert(doctor.nation);
        </script>

2、通过属性复制实现继承

<script type="text/javascript">
            /**浅复制**/
            function extendCopy(p){
                var c = {};
                for(var i in p){
                    c[i] = p[i];
                }
                c.uber = p;
                return c;
            }
            var chinese = {nation : "cn"};
            var doctor = extendCopy(chinese);
            doctor.career = "doctor";
            alert(doctor.nation);
            /*************/
        </script>

若父对象有数组或对象级别的属性，通过上面的属性复制方法实现继承后，对子对象继承的这些属性的修改将会影响到父对象这些属性的值。因为在js中对于对象级别变量的赋值都是传递的对象引用，并非数据副本，对变量的修改都是操作同一对象。

通过以下深复制的方法可以实现对象的复制：

<script type="text/javascript">
            /**深复制**/
            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 chinese = {birthPlaces : ['shanghai', 'beijing', 'guangzhou']};
            var doctor = deepCopy(chinese);
            alert(doctor.birthPlaces.join(','));

            doctor.birthPlaces.push('shenz');
            alert(chinese.birthPlaces.join(','));
            /**************/
        </script>