JS面向对象编程（三）：非构造函数的继承

一.什么是"非构造函数"的继承?
            现在有一个对象,叫"中国人".
            var Chinese = {
                nation:'中国'
            }
            还有一个对象,叫做"医生".
            var Doctor = {
                career:'医生'
            }
            请问怎么才能让"医生"去继承"中国人",也就是说,我怎样才能生成一个"中国医生"的对象?
            请注意,这两个对象都是普通对象,不是构造函数,无法使用构造函数方法来实现"继承".

二. object()方法
            json格式的发明人Douglas Crockford, 提出了一个object()函数,可以做到这一点.
            function object(o){//o是父对象
                function F(){};
                    F.prototype = o;
                    return new F();
            }
            这个object()函数,其实只做一件事,就是把子对象的prototype属性,指向父对象,从而使得子对象与父对象连在一起.
            
            使用的时候,第一步现在父对象的基础上,生成子对象:
            var Doctor = object(Chinese);
            然后,再加上 子对象本身的属性:
            Doctor.career = '医生';
            这时,子对象已经继承了父对象的属性了.
            alert(Doctor.nation);//中国

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title>0.3-1 object方法：非构造函数继承</title>
     </head>
     <body>
         <script>
             //普通对象，非构造函数
             var Chinese = {
                 nation:"中国"
             };
             var Doctor = {
                 career:"医生"
             };
             //object()
             function object(o){
                 function F(){};
                 F.prototype = o;
                 return new F();
             }

             //使用
             Doctor = object(Chinese);
             alert(Doctor.career);//undefined
             alert(Doctor.nation);//中国

             Doctor.career = '医生';

             alert(Doctor.career);//医生
             alert(Doctor.nation);//中国
         </script>
     </body>
 </html>

三.浅拷贝
            除了使用， "prototype链"以外,还有另外一种思路:把父对象的属性, 全部拷贝给子对象,也能实现继承
            下面这个函数,这就是做拷贝:
            function extendCopy(p){
                var c = {};
                for(var i in p){
                    c[i] = p[i];
                }
                c.uber = p;
                return c;
            }
            使用的时候,这样写:
            var Doctor = extendCopy(Chinese);
            Doctor.career = '医生';
            alert(Doctor.nation);//中国
            但是,这样的拷贝有一个问题,那就是,如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,而不是真正拷贝,那么
            实际上,子对象获得的只是一个内存地址,而不是真正的拷贝,因此存在父对象被篡改的可能.
            
            请看,现在给Chinese添加一个"出生地"属性, 它的值是一个数组.
            Chinese.birthPlace = ["北京","上海","香港"];
            通过extendCopy()函数,Doctor继承了Chinese.
            var Doctor = extendCopy(Chinese);
            然后,我们为Doctor的"出生地"添加一个城市:
            Doctor.birthPlace.push("厦门");
            发生了什么事情?Chinese的"出生地"也被改掉了!
            alert(Doctor.birthPlace);//北京，上海，香港，厦门
            alert(Chinese.birthPlace);//北京，上海，香港，厦门
            所以, extendCopy()只是拷贝基本类型数据,我们把这种拷贝叫做"浅拷贝",这是早期jQuery实现继承的方式.

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title>0.3-2 浅拷贝：非构造函数的继承</title>
     </head>
     <body>
         <script>
             //普通对象，非构造函数
             var Chinese = {
                 nation:'中国'
             };
             var Doctor = {
                 career:'医生'
             };
             //prototype链，把父对象的属性全部拷贝给子对象
             function extendCopy(p){
                 var c = {};
                 for(var i in p){
                     c[i] = p[i];
                 }
                 c.uber = p;
                 return c;
             }
             //使用方法
             Doctor = extendCopy(Chinese);
             alert(Doctor.career);//undefined
             alert(Doctor.nation);//中国

             Doctor.career = "医生";
             alert(Doctor.career);//医生
             alert(Doctor.nation);//国家
         </script>
     </body>
 </html>

四.深拷贝
            所谓"深拷贝",就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难，只要递归调用"浅拷贝"就行了。
            function deepcCopy(p,c){
                var c = c||{};
                for(var i in p){
                    if(typeof p[i] === 'object'){
                        c[i] = (p[i].constructor === Array)?[]:{};
                        deepcCopy(p[i],c[i]);
                    }else{
                        c[i] = p[i];
                    }
                }
                return c;
            }
            使用的时候,这样写:
            var Doctor = deepCopy(Chinese);
            现在,给父对象加一个属性,值为数组.然后,在子对象上修改这个属性:
            Chinese.birthPlace = ['北京','上海','香港'];
            Doctor.birthPlace.push("厦门");
            这时,父对象就不会受到影响了.
            alert(Doctor.birthPlace);//北京，上海，香港，厦门
            alert(Chinese.birthPlace);//北京，上海，香港
            目前,JQuery使用的就是这种继承方法.

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title>0.3-3深拷贝：非构造函数的继承</title>
     </head>
     <body>
         <script>
             //普通对象，非构造函数
             var Chinese = {
                 nation:'中国',
                 birthPlace:["北京","上海","香港"]
             };
             var Doctor = {
                 career:'医生'
             };
             //深拷贝,实现数组和对象的真正拷贝，而不是引用同一个内存地址，实现方法：递归调用浅拷贝就可以了·
             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;
             }
             //使用方法
             Doctor = deepCopy(Chinese);
             Chinese.birthPlace = ["北京","上海","香港"];
             Doctor.birthPlace.push("厦门");
             alert(Chinese.birthPlace);//北京，上海，香港
             alert(Doctor.birthPlace);//北京，上海，香港，厦门
         </script>
     </body>
 </html>

原文链接：http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html