关于函数的继承

   <script type="text/javascript">

            //父级函数Box


            function Box(name,age,home){

                //实例属性

                this.name=name;

                this.age=age;

                this.home=home;

                //实例方法

                this.say = function(){

                    return this.home+" "+"继承调用Box中的实例方法";

                }

            }

            //Box的原型对象方法

            Box.prototype.run = function(){

                console.log(this.name + "回家了");

                //return this.name + "回家了";

            }

            //实例对象


            var b = new Box("tom",17,"北京");

            console.log(b);//box {name: "tom", age: 17, home: "北京"}

            console.log(b.say());//继承调用Box中的实例方法

            b.run();//tom回家了

            //console.log(b.run());//tom回家了


//-----------------继承方式一:通过改变父类的执行环境-------------------------------------------------------------

            //子集函数

            function Pox(name,age,home){

                this.parent = Box;//将父级Box的代码赋予子集中的一个属性this.parent,相当于Pox有了Box里的属性和方法

                this.parent("tom",17,"北京");//将实参传递到Box里面,然后执行其功能

                delete this.parent;//在Pox函数中,删除this.parent,保留Box的代码

            }

            var p = new Pox();

            //p.run();//p.run is not a function 不能继承父级原型对象下的方法,

            console.log(p);//Pox {name: "tom", age: 17, home: "北京"}

            console.log(p.name);//tom

            console.log(p.home);//北京

            console.log(p.say());//继承调用Box中的实例方法


//-----------------继承方式二,通过call继承---缺点:不能继承调用父类原型对象方法--------------------------------------------------------------------------

            //子集函数

            function Cox(name,age,home,adress){

                Box.call(this,name,age,home,adress);//this是为了改变父级中实例属性的指向,让其指向子集

                this.adress = adress;

            }

            var c = new Cox("tom",17,"北京","十八路二巷");

            console.log(c);//Cox {name: "tom", age: 17, home: "北京", adress: "十八路二巷"}

            console.log(c.age);//17

            console.log(c.say());//继承调用Box中的实例方法

            //c.run();//c.run is not a function  不能继承调用父类原型对象的方法


//-----------------继承方式三,通过apply继承---缺点:不能继承调用父类原型对象方法--------------------

            //子集函数

            function Fox(name,age,home,email){

                this.email = email;

                //this是为了改变父级中实例属性的指向,让其指向子集

                Box.apply(this,[name,age,home,email]);//apply传递参数以数组的形式传递

            }

            var f = new Fox("tom",17,"北京","123@.com");

            console.log(f);//Fox {email: "123@.com", name: "tom", age: 17, home: "北京"}

            console.log(f.name)//tom

            console.log(f.say());//继承调用Box中的实例方法

            //f.run();//f.run is not a function 不能继承调用父类原型对象方法


//-----------------继承方式四--原型链继承---------------------------------------------------------------------------- -           

            //原理:让子类的原型对象指向父类的实例化对象

            function Tox(name,age,home){};

            Tox.prototype = new Box();//让子类的原型对象指向父类的实例化对象

            var t = new Tox("tom",17,"北京");//子类传参无法改变父类的属性值


            console.log(t);//Tox {}

            console.log(t.home);//undefined

            console.log(t.age);//undefind

            console.log(t.say());//继承调用Box中的实例方法


            //原型链继承 缺点:

            //1.对象父类中通过传参的实例属性,在利用原型链方式继承时,子类无法通过传参的方式改变父类的属性值。

            //2.如果在父类中有引用类型的属性,会被共享,一个改动,全部改动。



//-----------------.继承方式五--混合(组合)继承(解决以上缺点问题)----------------------------------------

            //call或apply继承方法+原型链继承方法综合


            function Mox(name,age,home){//call或apply继承方法

                Box.call(this,name,age,home);

            }

            Mox.prototype = new Box();//原型链继承

            var m = new Mox("tom",17,"北京");

            console.log(m);//Mox {name: "tom", age: 17, home: "北京", say: ƒ}

            console.log(m.home);//北京

            console.log(m.say());//继承调用Box中的实例方法

            m.run();//tom回家了  可以继承调用父类原型对象方法


            //问题:

            //父类执行了两次

            //子类原型下多了一些多余的属性和方法(原父类的实例属性和方法)

//-----------------寄生组合继承(解决混合继承的问题)---------------------------------------------------------------

            //原理

            function Nox(name,age,home){

                Box.apply(this,[name,age,home]);//this改变指向,使父类中的实例属性和方法指向子类

            }

            //封装一个函数

            //supType表示父类

            //subType表示子类

            function fn(supType,subType){

                var proto = Object.create(supType.prototype);

                //proto下有一个constructor,这个constructor原来指向父类supType

                proto.constructor = subType;//将constructor的指向修改为supType

                subType.prototype = proto;//将修改后的对象全部赋值给子类

            }

            //调用函数

            fn(Box,Nox);

            var n = new Nox("tom",17,"北京");

            console.log(n);//Nox {name: "tom", age: 17, home: "北京", say: ƒ}

            console.log(n.age);//17


//-------------------ES6继承--关键字:extends和super---------------------------------------------------------------

            class Father{

                constructor(name,age,adress){//实例属性写在constructor里面

                    this.name = name;

                    this.age = age;

                    this.adress = adress;

                }

                eat(){

                    return this.adress + "在中国";

                }

            }

            //Son继承Father

            class Son extends Father{

                constructor(name,age,adress,phone){//实例属性写在constructor里面

                    super(name,age,adress);//继承Father中constructor的属性,继承的属性写在super的括号内

                    //super(name,age);

                    this.phone = phone;

                }

                fn(){

                    return this.phone + "是我的电话号码";

                }

            }

            var sun = new Son("张三",50,"深圳","15727656869");

            console.log(sun);

            console.log(sun.name);//张三

            console.log(sun.fn());//15727656869是我的电话号码

            console.log(sun.eat());//深圳在中国


        </script>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,544评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,430评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,764评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,193评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,216评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,182评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,063评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,917评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,329评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,543评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,722评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,425评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,019评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,671评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,825评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,729评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,614评论 2 353

推荐阅读更多精彩内容