欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javascript实现继承的几种方式

程序员文章站 2022-06-08 20:50:33
javascript实现继承的几种方式 1.拷贝属性方式: 如果属性的值是引用类型的,那么子对象和父对象共享一块数据,修改了某个对象对另外一个对象有影响 var o...

javascript实现继承的几种方式

1.拷贝属性方式:

如果属性的值是引用类型的,那么子对象和父对象共享一块数据,修改了某个对象对另外一个对象有影响
 var obj1 = {
        name:"静静的顿河",
        des:"我在静静的看着这条河",
        friends:["哗啦哗啦","哈出哈赤","哔哩哔哩","哈拉哈拉"]
    }
    var obj2 = {};
    //obj2要能够拥有obj1的属性
    for (var k  in obj1)
    {
        obj2[k] = obj1[k];
    }
    console.log(obj2.friends);
    console.log(obj1.friends);
    //更新obj1的引用类型的属性值(如这里的friends数组),obj2也会受影响。
    obj1.friends.push("乌拉乌拉");
    console.log(obj2.friends);
    
    //实现拷贝的另一种方式,使用object.assign(),其中第一个参数是目标对象,第二个,第三个参数是要拷贝属性的对象,同样的这种拷贝方式在拷贝引用类型属性时只能拷贝地址
    var o = {};
    var obj1 = {name:"name"};
    var obj2 = {age:20};
    var obj3 = {car:{type:"飞船"}};

    object.assign(o,obj2,obj1,obj3);
    console.log(o);
    obj3.car.type = '汽车';
    console.log(o);

2.原型式继承

存在问题:1.构造器属性指向问题,指向父构造函数,需要手动修正 2.无法继承实例属性和方法只能够继承原型属性和方法

原型式继承a
<script>
    function a(){}
    a.prototype.name = "默认的名称";
    var a1 = new a();
    var a2 = new a();

    //利用:构造函数的原型对象上面的属性和方法可以被构造函数创建出来的对象所使用
    console.log(a1.name);
    console.log(a2.name);

</script>
原型式继承b
<script>
    function a(){};
    a.prototype = {
        name:"默认的名称",
//        手动修正原型对象的构造器
        constructor:a
    }
    var a1 = new a();
    var a2 = new a();
    console.log(a1.name);
    console.log(a2.name);
</script>
原型式继承c
<script>
    function a(){
//      设置实例属性
        this.name = "默认名";
        this.age = 30;
    };
    //设置a的原型对象
    a.prototype.des = "描述信息-a";
    function b(){};
    //设置b的原型等于a的原型,此时b的构造函数为a
    b.prototype = a.prototype;
    //手动修正b的原型对象的构造器
    b.prototype.constructor = b;

    var b1 = new b();
    var b2 = new b();

    //b1和b2拥有des属性
    console.log(b1.des,8);
    console.log(b2.des);

    //验证构造器属性
    console.log(b1.constructor);
    console.log(b2.constructor);

    var a1 = new a();
    console.log(a1.constructor);
    //无法获得父对象的实例属性
    console.log(b1.name); //undefined
    console.log(b2.name);//undefined
</script>