JavaScript 原型式继承 和 寄生式继承

一、原型式继承本质其实就是个浅拷贝,以一个对象为模板复制出新的对象

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function object( o ){

      var G = function(){};

      G.prototype = o;

      return new G();

    }

    var obj = {

      name : 'ghostwu',

      age : 22,

      show : function(){

        return this.name + ',' + this.age;

      }

    };

    var obj2 = object( obj );

    console.log( obj2.name, obj.age, obj.show() );

object函数中,以对象o为模板,在object函数体里面,定义一个构造函数,让构造函数的原型对象(prototype)指向o,

返回构造函数的一个实例,这样就可以访问到对象o的所有属性和方法.

二、因为原型式继承是个浅拷贝,所以引用类型的数据共享在不同的实例之间

1

2

3

4

5

6

7

8

9

10

11

12

function object( o ){

      var G = function(){};

      G.prototype = o;

      return new G();

    }

    var obj = {

      skills : [ 'php', 'javascript' ]

    };

    var obj2 = object( obj );

    obj2.skills.push( 'python' );

    var obj3 = object( obj );

    console.log( obj3.skills ); //php,javascript,python

obj2改变了skills数组,obj3的skills结果就是其他实例改变的结果

三、在es5中,新增了一个函数Object.create()实现了原型式继承

1

2

3

4

5

6

7

var obj = {

      skills : [ 'php', 'javascript' ]

    };

    var obj2 = Object.create( obj );

    obj2.skills.push( 'python' );

    var obj3 = Object.create( obj );

    console.log( obj3.skills ); //php,javascript,python

四,寄生式继承就是把原型式继承再次封装,然后在对象上扩展新的方法,再把新对象返回

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

function object( o ){

      var G = function(){};

      G.prototype = o;

      return new G();

    }

    function CreateObj( srcObj ){

      var dstObj = object( srcObj );

      dstObj.sayName = function(){

        return this.userName;

      }

      return dstObj;

    }

    var obj = {

      userName : 'ghostwu',

    };

    var obj2 = CreateObj( obj );

    console.log( obj2.sayName() ); //ghostwu

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值