1.最近一直再看javascript高级程序设计3,面向对象章节,前面写了两篇读书笔记

(1)构造函数 --创建对象
(2)构造函数的原型链继承
现在又在网上看到阮一峰大大的一篇非构造函数继承的文章,特意借来学习一下!

非构造函数继承--阮一峰


一:什么是非构造函数的继承?
    比如:一个对象叫做中国人
        一个对象叫做医生
var Chinese = {
    nation:"中国"
}
var doctor = {
    career:"医生"
}

怎样才能让“医生”去继承“中国人”,也就是说,我怎样才能生成一个“中国医生”的对象?
这里注意。这两个都是用字面量方法创建的普通对象,不是构造函数无法使用构造函数的原型链继承的方法的实现继承。

第一种:object方法

json格式发明人提出的一种方法
function object(o){
    function F(){};    // 创建一个空构造函数
    F.prototype = o;   // 原型对象指向父对象
    return new F();
}

这个object函数的作用就是将子对象的prototype属性指向父对象,从而使的父子对象连在一起

(1)使用时先在父对象基础声称子对象

 var Doctor = object(Chinese);

(2)然后给自对象赋上自己的属性

 var Doctor.carrer = "医生";

(3)这样子对象就继承了父对象的属性了

 alert(Doctor.nation);  // "医生"

clipboard.png

第二种:浅拷贝

除了使用“prototype”链以外,还有另一种思路:就是把父对象的属性,全部拷贝给子对象,也能实现继承。
下面这个函数,就是在做拷贝:
function extendCoby(p){
    var c = {};
    for(var i in p){
        c[i] = p[i];
    }
    c.uber = p; // 软大大:uber是一个德语词,意思是"向上"、"上一层"
    return c;
}
使用的时候,这样写
var Doctor = extend(Chinese);
Doctor.carrer = "医生";
alert(Doctor.nation);  // 中国

clipboard.png

但是这样的拷贝有一个问题。那就是,如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,而不是真正的拷贝,因此存在父对象被篡改的可能。

请看现在给Chinese添加一个出生地属性,它的值是一个数组。

Chinese.birthPlace = ['北京','上海','香港'];

通过extendCopy()函数,Docttor继承了Chinese

var Doctor = extendCopy(Chinese);

然后我们为出生地添加一个城市:

Doctor.birthPlace.push("厦门");

此时,发生了什么事?

alert(Doctor.birthPlace);   // 北京,上海,香港,厦门
alert(Chinese.birthPlace); //  北京,上海,香港,厦门

clipboard.png

所以,extendCopy()只是拷贝基本数据类型,我们把这种拷贝叫做浅拷贝。
这是早期的jquery实现继承的方式

第三种 深拷贝

所谓深拷贝,就是能够真正意义上的数组和对象的拷贝。
它的实现并不难,只要递归调用浅拷贝就可以啦
function deepCopy(p,c){ //参数p,c顺序万不可写反,因为第一次c为空
    var c = c || {};   // 第一次执行函数的时候 c为 空对象
    for(var i in p){
        if(typeof p[i] === 'object'){ // 判断对象p的一个属性值是否为复杂数据类型object或array
            // [] 或 {} 判断
            c[i] = (p[i].constructor === Array) ? [] : {};
            deepCopy(p[i],c[i]);         // 递归调用此方法
        }else{
            c[i] = p[i];                //简单数据类型直接赋值
        }
    }
    return c;                          // 将新对象c返回出来
}
var Chinese = {
    nation:"中国",
    place:["A","B","C"],
    say:function(){
        alert(this.nation);
    }
}
var Doctor = deepCopy(Chinese); // 调用deepCopy创建新对象
Doctor.carrer = "医生";
Doctor.place.push("X");
console.log(Doctor);
console.log(Chinese);

clipboard.png

此方法是目前jq实现集成的方法

感悟:个人感觉此方法只适用简单方法,不适合复杂对象,复杂对象还是得靠构造函数原型链的继承!


大桔子
588 声望51 粉丝

下一步该干什么呢...