JS对象继承的一些方法

由于引用类型(数组、对象)是按地址传递,直接拷贝是浅拷贝,即修改拷贝后的变量,原变量也会改变。有时需要深拷贝一个对象,这时就需要遍历彻底复制,使原对象和拷贝对象完全脱离关系。
创建实例对象
    var o={
        color:'red',
        arr:[2,3,4,5],
        fn:function(){
            console.log(1);
        }
    }
    var a=Object.create(o);
    a.color="blue";
    a.arr.push(2);
    console.dir(a);
    console.dir(o);会改变引用类型的地址


深拷贝,不会改变引用类型的地址
代码:
    function deepCloneObj(obj){
        var i;
        var o = Array.isArray(obj) ? [] : {};
        for(i in obj){
            if(obj.hasOwnProperty(i)){
                o[i] = typeof obj[i] === "Object"? deepCloneObj(obj[i]) : obj[i];
            }
        }
        return o;
    }
实现细节:假定传入的是一个引用类型,首先判定传入的是数组还是对象,根据判定结果,确定o是初始化为空数组还是空对象。之后遍历传入引用类型的自有属性,并判定属性是否为对象,如果是的话做递归,否则直接复制给o。


数组实例:
    var arr1 = ["sfsag","akghak","['fafa','gaag','rwet']",125];
    console.log(arr1);//["sfsag", "akghak", "['fafa','gaag','rwet']", 125]    var arr2 = deepCloneObj(arr1);
    arr1.push("newstr");
    console.log(arr1);//["sfsag", "akghak", "['fafa','gaag','rwet']", 125, "newstr"]    console.log(arr2);//["sfsag", "akghak", "['fafa','gaag','rwet']", 125]对象实例:
    var obj1 = {sgsh:{sfwg:'ssgsg'},asga:['aff','ghh','wegwer',12],segg:1};
    console.log(obj1);//Object {sgsh: Object, asga: Array[4], segg: 1}
    var obj2 = deepCloneObj(obj1);
    obj1['newstr'] = ['fsg','gsr'];
    console.log(obj1);//Object {sgsh: Object, asga: Array[4], segg: 1, newstr: Array[2]}
    console.log(obj2);//Object {sgsh: Object, asga: Array[4], segg: 1}
原型继承:
    function fn(name){
        this.name = name;
        this.arr = [1,2,4,4];
        
    }
    fn.prototype={
       method :function(){
            console.log(1);
        }
    }
    function ff(color){
        this.color = color;
     
    }
       ff.prototype = new fn();
       ff.prototype.constructor = fn;
只能继承方法,不能继承属性,父级构造函数的引用类型被所有实例共享是我们所不希望的;
3.构造函数继承
function Animal(name){
    this.name = name;
    this.lover = ['sleep','eat']}
Animal.prototype={
    jiao:function(){
        console.log(1)
    }
};


function Cat(color){
    Animal.call(this,name)
    this.color = color;
}
    var cat = new Cat();
    cat.lover.push('a');
console.log(cat); 
这种继承方式可以解决原型继承存在的问题,但是又产生了一个新的问题:没有办法继承父级原型中的成员
4 组合继承:
function Fruit(taste,name){
        this.taste = taste;
        this.name = name;
    }
    Fruit.prototype.sweeter = function(){
        console.log(this.name + '的味道' + this.taste + '变浓');
    }


    function Watermelon(color,shape,taste,name){
        Fruit.call(this,taste,name); //这会吧Fruit上的属性都会继承
        this.color = color;
        this.shape = shape;
    }


    Watermelon.prototype = new Fruit();//这条代码的作用会把原型上的方法都会继承
    // Watermelon.prototype = Fruit.prototype //不推荐(会对原来的代码造成影响)
    Watermelon.prototype.scroll = function(){
        console.log(this.color + '颜色的水果' + this.shape + '形状的水果' + '正在滚动');
    }
  5.extend()拷贝方法
//extend作用就是拷贝属性:把参数对象中的所有属性都拷贝到extend方法所在的对象里,如果属性已经存在那么就覆盖掉,如果没有这个属性就添加一个
  var obj = {info:'hello'};
    obj.extend = function(obj){
        for(var key in obj){
            //这里的this是obj
            this[key] = obj[key];
        }
    };
    obj.extend({info:'hi',message:'hello tom and jerry',abc:'nihao'});
    console.dir(obj);
属性拷贝(jQuery插件扩展的本质)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值