原型链与继承(五)复制实现继承
通过复制对象的方式也是实现继承的一种方式,在Jquery和其他的库中都能看到这种实现。下面简单讲下原理,具体的完整实现可参考Jquery源码
一、浅拷贝:
function extend(parent,child){
    var child = child || {};
    for (var prop in parent){
        child[prop] = parent[prop]
    }
}

var person = {
    name:'allen',
    address:{
        home:"home address",
        school:"school address"
    }
}

var student = {
    age:21
}

extend(person,student);
student.name//allen
student.address//{home:"home address",school:"school address"}
student.address.home = 'new home address';
student.address.home//new home address
person.address.home//new home address

注意上面的person.address.home也变成了 "new home address",原因在于在拷贝的时候,由于person.address是一个对象,因此在child在复制的时候仅仅是保存了一个引用,而不是将address对象复制过来,这就是浅拷贝的一个缺点。


二、深拷贝:
1、for在数组之中的运用,新建 arr = [1, 2, 3],由下面可以得知,for循环之中的p,实际上是数组的序列号。
2、typeof的使用,对于数组和对象返回的都是object,区别对象和数组的话有几种方法:
(1)Object.prototype.toString.call(arg) ==="[object Array]"//"[object Object]"
(2)Array.isArray(arg)//ES5
(3)typeof arg === "object" && arg instanceof Array
(4)typeof arg === "object" && arg.constructor === Array

简单的实现:
function extendDeeply(parent,child){
    var child = child || {};
    for (var prop in parent){
        if(typeof parent[prop] === 'object'){
            child[prop] = (parent[prop].constructor === Array)?[]:{};
            extendDeeply(parent[prop],child[prop]);
        }else{
            child[prop] = parent[prop];
        }
    }
}
var person = {
    name:'allen',
    address:{
        home:"home address",
        school:"school address"
    }
}

var student = {
    age:21
}

extendDeeply(person,student);
student.name//allen
student.address//{home:"home address",school:"school address"}
student.address.home = 'new home address';
student.address.home//new home address
person.address.home//home address
可以看到extendDeep操作之后,修改student中的address属性不会为person带来影响。


阅读更多
个人分类: javascript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

原型链与继承(五)复制实现继承

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭