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);//中国

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>0.3-1 object方法：非构造函数继承</title>
 6     </head>
 7     <body>
 8         <script>
 9             //普通对象，非构造函数
10             var Chinese = {
11                 nation:"中国"
12             };
13             var Doctor = {
14                 career:"医生"
15             };
16             //object()
17             function object(o){
18                 function F(){};
19                 F.prototype = o;
20                 return new F();
21             }
22             
23             //使用
24             Doctor = object(Chinese);
25             alert(Doctor.career);//undefined
26             alert(Doctor.nation);//中国
27             
28             Doctor.career = '医生';
29             
30             alert(Doctor.career);//医生
31             alert(Doctor.nation);//中国
32         </script>
33     </body>
34 </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实现继承的方式.

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>0.3-2 浅拷贝：非构造函数的继承</title>
 6     </head>
 7     <body>
 8         <script>
 9             //普通对象，非构造函数
10             var Chinese = {
11                 nation:'中国'
12             };
13             var Doctor = {
14                 career:'医生'
15             };
16             //prototype链，把父对象的属性全部拷贝给子对象
17             function extendCopy(p){
18                 var c = {};
19                 for(var i in p){
20                     c[i] = p[i];
21                 }
22                 c.uber = p;
23                 return c;
24             }
25             //使用方法
26             Doctor = extendCopy(Chinese);
27             alert(Doctor.career);//undefined
28             alert(Doctor.nation);//中国
29             
30             Doctor.career = "医生";
31             alert(Doctor.career);//医生
32             alert(Doctor.nation);//国家
33         </script>
34     </body>
35 </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使用的就是这种继承方法.

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>0.3-3深拷贝：非构造函数的继承</title>
 6     </head>
 7     <body>
 8         <script>
 9             //普通对象，非构造函数
10             var Chinese = {
11                 nation:'中国',
12                 birthPlace:["北京","上海","香港"]
13             };
14             var Doctor = {
15                 career:'医生'
16             };
17             //深拷贝,实现数组和对象的真正拷贝，而不是引用同一个内存地址，实现方法：递归调用浅拷贝就可以了·
18             function deepCopy(p,c){
19                 var c =  c||{};
20                 for(var i in p){
21                     if(typeof p[i] === 'object'){
22                         c[i] = (p[i].constructor === Array)?[]:{};
23                         deepCopy(p[i],c[i]);
24                     }else{
25                         c[i] = p[i];
26                     }
27                 }
28                 return c;
29             }
30             //使用方法
31             Doctor = deepCopy(Chinese);
32             Chinese.birthPlace = ["北京","上海","香港"];
33             Doctor.birthPlace.push("厦门");
34             alert(Chinese.birthPlace);//北京，上海，香港
35             alert(Doctor.birthPlace);//北京，上海，香港，厦门
36         </script>
37     </body>
38 </html>

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

posted @ 2017-03-04 14:12 砌墙的砖阅读(295) 评论(0) 收藏举报

刷新页面返回顶部

砌墙的砖

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

公告