首页 > 代码库 > 【读书笔记】javascript 继承

【读书笔记】javascript 继承

2024-11-26 08:57:39   203人阅读

    在JavaScript中继承不像C#那么直接，C#中子类继承父类之后马上获得了父类的属性和方法，但JavaScript需要分步进行。

    让Brid 继承 Animal，并扩展自己fly的方法。

    function Animal(name) {                this.name = name;                this.type = "animal";            }            Animal.prototype= {                say:function() {                    alert("I‘m a " + this.type + ",my name is " + this.name);                }            }            function Bird(name) {                Animal.call(this, name);            }            //这里继承了父类的行为 say            Bird.prototype = Animal.prototype;            //再扩展自己的方法            Bird.prototype.fly=function() {                alert("I‘m flying");            }            var mybird = new Bird("xiao cui");
           mybird.say();//I‘m a animal,my name is xiao cui            mybird.fly();            //结果狗也能飞起来了.....            var mydog = new Animal("cai cai ");            mydog.fly();

 造成这种现象，是因为JavaScript中传值和传址的区别。如果是数值型、布尔型、字符型等基本类型进行赋值的时候会讲数据复制一份，即传值。而如果是数组、hash对象等复杂类型、赋值的时候是直接用到内存地址。也就是传址。这和C#引用类型和值类型的赋值道理一样，只是JavaScript和C#各自包含的类型不一样。

            var a = 10;            var b = a;            b++;            var c = [1, 2, 3];            var d = c;            d.push(4);            alert(a);//10            alert(b);//11            alert(c);//1,2,3,4            alert(d);//1,2,3,4

所以数组如果不想受到上面的影响 需要用slice和concat方法。要不就循环赋值。

           var a = [1, 2, 3];            var b = a.slice();            var c = a.concat();            b.pop();            c.push(4);            alert(a);//1,2,3;            alert(b);//1,2            alert(c);//1,2,3,4

回到Bird的问题，property本质上也是个hash对象，直接赋值就是传址，所以造成了Dog也fly的笑话。然后做一下改动：

 function Animal(name) {                this.name = name;                this.type = "animal";            }            Animal.prototype= {                say:function() {                    alert("I‘m a " + this.type + ",my name is " + this.name);                }            }            function Bird(name) {                //这里只继承属性的。                Animal.call(this, name);            }            //这里继承了父类的行为 say            Bird.prototype = new Animal();            Bird.prototype.constructor = Bird;            //再扩展自己的方法            Bird.prototype.fly=function() {                alert("I‘m flying");            }            var mybird = new Bird("xiao cui");            mybird.say();//I‘m a animal,my name is xiao cui            mybird.fly();            var dog = new Animal("xiao huang");            dog.fly();//报错了

使用new someFunction实现传值，而后因为Bird.property=new Animal()；将Bird.property.constructor指向了Animal,所以用Bird.property.constructor=Bird 纠正回来。

这个时候调用dog.fly 就报错了：

技术分享

JavaScript继承的话题各路大神都讨论比较多了，写一写，自己梳理下。 更多的了解可以看阮一峰的博客

学习书籍：web前端开发修炼之道

下载链接不是我个人的，公司连百度云都屏蔽了，回去再换百度云的，这本书基于作者的自己的一些经验总结，名字有些浮夸。经验丰富的开发者都可以快速的阅读的一本书。

技术分享

 

【读书笔记】javascript 继承


联系
我们