zoukankan      html  css  js  c++  java
  • 【读书笔记】javascript 继承

        在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前端开发修炼之道

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

  • 相关阅读:
    jquery异步加载json格式的数据
    三角形及选中取消按钮的css代码
    css实现自适应宽度布局
    table表格中实现tbody部分可滚动,且thead部分固定
    table数据表格添加checkbox进行数据进行两个表格左右移动。
    对checkbox 的checked的一些总结
    Java多线程同步器
    Springboot动态获取bean对象工具类
    并发阻塞队列和非阻塞队列详解
    多线程-volatile关键字和ThreadLocal详解
  • 原文地址:https://www.cnblogs.com/stoneniqiu/p/4266842.html
Copyright © 2011-2022 走看看