zoukankan      html  css  js  c++  java
  • javascript 面向对象的继承的实现

    JavaScript 中的面向对象的初步认识


    上面这篇简单的记录了我对 JS面向对象实现的一点初步认识和了解,下面继续研究JS面向对象,实现继承和多态。


    之前的学习我了解到了 :构造函数加属性,原型prototype加方法,这样就实现了JS的面向对象。所以当我们实现继承的时候,应该也分 属性 方法 两个部分实现。

    说到继承 首先应该对构造函数开始下手 。现在有这样一个构造函数:

    function Person(name){
         this.name = name;
    };
    
    Person.prototype.say = function (){
         console.log(this.name +" say hello~");
    }


    下面创建一个继承Person的Student对象,就得这样写Student的构造函数,才可以让Student获得Person的属性

    <pre name="code" class="javascript">        function Student(name,age){
                Person.call(this,name);//将Student的this,传入到Peson中去
            }
    
    


    上面那句 Person.call(this,name),实际上改变了 Person的作用域 ,将他替换成了 Student的,这样才是算Stuent继承了Person的属性。


    关于 this ,call() 这方面的一些内容,以后会详细分析。。。 这里先大概了解他们代表什么 有什么作用就行。。。


    接下来就是从 prototype 上继承 方法。(我讨厌叫它原型。。)


    要是想让 Student 拥有 Person的方法,而且Person的方法全都是在它的prototype上。所以,要实现所谓方法的继承,其实就是让Student拥有和Person一样的prototype。

    但是如果我们这样写

    B.prototype = A.prototype;


    看上去是让B 有了A一样的prototype,其实这样并不能满足继承的要求。

    因为JS中存在引用这个概念,上面的操作其实是让B的prototype 和 A的prototype 指向了同一块内存区域(我的理解 =。=),如果你要修改了B的prototype,A的prototype其实也被修改了,这样就没法满足重写和拓展自己的方法这样操作。(具体的要了解JS中的引用=。=)

    所以得这写样

            for(var i in A.prototype){
                B.prototype[i] = A.prototype[i];
            }


    这样就满足B拥有了和A一样的prototype并且他们互相是独立的,也就可以实现方法的继承了。

    现在把两个方面总结起来写个例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function Person(name){
                this.name = name;
            };
    
            Person.prototype.say = function (){
                console.log(this.name +" say hello~");
            }
    
            function Student(name,age){
                Person.call(this,name);
            }
    
            for(var i in Person.prototype){
                Student.prototype[i] = Person.prototype[i];
            }
            //重写say 方法
            Student.prototype.say = function(){
                console.log(this.name +" is a Student");
            }
    
            Student.prototype.study = function(){
                console.log(this.name +" is studying");
            }
    
            var tom = new Person('tom');
            var jerry = new Person('jerry');
            var danny = new Student("danny");
    
            tom.say();
            jerry.say();
            danny.say();
    
            danny.study();
            tom.study();
        </script>
    </head>
    <body>
    
    </body>
    </html>


    2015.12.30

  • 相关阅读:
    centos7 计划任务 定时运行sh
    Nginx负载均衡配置 域名和IP 访问时从java request.getServerName()获取不同问题解决
    windows2012激活方式 2016激活方式 windows10激活方式
    CentOS7 安装Chrome
    使用 go-cqhttp 在龙芯和其他平台搭建qq机器人
    KDE桌面无故特效消失和图标黑底
    SDUST 小学期飞机大战简述
    SDUST 小学期飞机大战简述
    宝塔中极速安装的PHP如何使用AMQP连接RabbitMQ
    Electron登录注册桌面应用源码+安装文件的打包方法
  • 原文地址:https://www.cnblogs.com/laobeiV5/p/5106645.html
Copyright © 2011-2022 走看看