• html5学习笔记05.JavaScript 中的面向对象,继承和封装


    05.JavaScript 中的面向对象
    a.创梦技术qq交流群:CreDream:251572072

    a.JavaScript 是一种基于对象的语言
      类:JavaScript 对象很抽象,所以下面将以实际的例子来解释如何定义一个简单的类。以下
         是一个没有任何属性和方法的类的定义:
         function MyClass(){};
         如何使用这个类呢?看下面的代码:
         var cls1 = new MyClass();
         这样,利用new 就可以生成MyClass的一个实例了。所以,在JavaScript 中,可以说函
         数就是类,类就是函数。
         一个实例的封装包含属性和方法的封装。
         function MyClass(name,age){
      this.name = name;
      this.age = age;
    };
    var cls1 = new MyClass("lufy",10);
    alert(cls1.name + ":" + cls1.age);//[lufy:10]
    从上面的代码可以看出,在函数内使用this 就能给函数本身增加属性值
    还可以利用this 给这个类增加一个toString 方法,代码如下:
    function MyClass(name,age){
      this.name = name;
      this.age = age;
      this.toString() = function(){
        alert(this.name + ":" + this.age);
      };
    };
    var cls1 = new MyClass("lufy",10);
    cls1.toString();//[lufy:10]
    -------------------------------------------------
    b.经过测试可以发现,我们已经成功地给MyClass增加了toString 方法。另外,也可以用
      以下代码来添加方法:
      function MyClass(name,age){
      this.name = name;
      this.age = age;
    };
    var cls1 = new MyClass("lufy",10);
    cls1.toString() = function(){
      alert(this.name + ":" + this.age);
    };
    cls1.toString();//[lufy:10]
    ------------------------------------------------------
    c.虽然这样也能给这个类添加一个方法,但需要注意的是,这种方式只是给cls1 这个实例
      增加了方法,并未给MyClass本身增加方法。比如,下面的代码会出错:
      function MyClass(name,age){
      this.name = name;
      this.age = age;
    };
    var cls1 = new MyClass("lufy",10);
    cls1.toString() = function(){
      alert(this.name + ":" + this.age);
    };
    cls1.toString();//[lufy:10]
    var cls2 = new MyClass("legend",12);
    cls2.toString();// 报错
    出错的原因是cls2 内并不存在toString 方法。可见想要通过这种方式来给一个类的本身
    增加方法是行不通的。要想给MyClass类的本身增加方法,需要将方法定义在MyClass这个
    函数的内部,这样的话,每声明一个新的实例,就会将MyClass本身复制一遍。但是,如果
    MyClass类里包含十几个或几十个方法,那么每次都得把这些方法复制一遍,这显然不是最
    优的做法。
    ----------------------------------------------------------------------------------------
    d.既然不能将一个类(函数)所包含的方法都定义在函数的内部,那么,如何来给一个类
      添加方法呢?这就需要用到函数的prototype 属性了。每一个函数都会包含一个prototype 属
      性,这个属性指向了一个prototype 对象,我们可以指定函数对应的prototype 对象。如果不
      指定,则函数的prototype 属性将指向一个默认的prototype 对象,并且此默认prototype 对象
      的constructor 属性又会指向该函数。
      当用构造函数创建一个新的对象时,新的对象会获取构造函数的prototype 属性所指向
      的prototype 对象的所有属性和方法,这样一来,构造函数对应的prototype 对象所做的任何
      操作都会反映到它所生成的对象上,所有的这些对象将共享与构造函数对应的prototype 对象
      的属性和方法。
      虽然新创建的对象可以使用它的构造函数所指向的 prototype 对象的属性和方法,但不
      能像构造函数那样直接调用prototype 对象(对象没有prototype 属性)。
    ----------------------------------------------------------------------------------------
    e.对于prototype对象来说,由于存在的是指向关系,所以避免了不必要的浪费.
      例如:
      function Myclass (name , age){
      this.name= name;
      this.age=age;
      };
      Myclass.prototype.toString = function(){
      alert(this.name+":"+this.age);
      }
      var cls1 = new Myclass("lufy",10);
      cls1.toString();//[lufy:10]
      var cls2 = new Myclass("legend",12);
      cls2.toString();//[legend:12]
    ---------------------------------------------
    f.如果我们使用函数的Prototype对象给函数添加方法,那么在创建对象的
      时候,并不会复制这个函数的所有方法,而是指向了这个函数的所有方法
      如果要加入更多方法:
      function Myclass (name,age){
      this.name= name;
      this.age=age;
      };
      Myclass.prototype={
      toString:function(){
      alert(this.name+":"+this.age);
      },
      sayHellow:function(){
      alert(this.name+",你好!");
      }
      };
      var cls1=new Myclass("lufy",10);
      cls1.toString();//[lufy:10]
      cls1.sayHellow();//[lufy,你好!]
      这就是JavaScript中给类添加方法的实现,他是利用prototype来实现的.
    ---------------------------------------------------------
    g.静态类
      JavaScript 中的静态类又是如何实现的呢?
      var StaticClass = function(){};
    StaticClass.name = "StaticName";
    StaticClass.Sum = function(value1,value2){
    return value1 + value2;
    };
    alert(StaticClass.name);//[StaticName]
    alert(StaticClass.Sum(1,3));//[4]
    在使用静态类的时候,就无须创建新的实例了,可直接用“类名+ 点+ 属性或方
    法”的方式。
    -------------------------------------------------
    h.继承
    function PeopleClass(){
      this.type = "人";
    };
    PeopleClass.prototype = {
      getType:function(){
        alert(" 这是一个人");
      }
    };
    function StudentClass(name,sex){
      this.name = name;
      this.sex = sex;
    };
    如何让“学生”对象来继承“人”对象呢?可使用apply 方法将父对象的构造函数绑定
    在子对象上
    function StudentClass(name,sex){
      PeopleClass.apply(this, arguments);
      this.name = name;
      this.sex = sex;
    };
    var stu = new StudentClass("lufy","男");
    alert(stu.type);//[ 人]
    ------------------------------------------------
    i.从运行结果来看,StudentClass 继承了PeopleClass 的属性“人”。
    而方法的继承,只要循环使用父对象的prototype 进行复制,即可达到继承的目的。具
    体方法如下:
    function PeopleClass(){
      this.type = "人";
    };
    PeopleClass.prototype = {
      getType:function(){
        alert(" 这是一个人");
      }
    };
    function StudentClass(name,sex){
      People Class.apply(this, arguments);
      var prop;
      for(prop in PeopleClass.prototype){
        var proto = this.constructor.prototype;
        if(!proto[prop]){
          proto[prop] = PeopleClass.prototype[prop];
        }
        proto[prop]["super"] = PeopleClass.prototype;
      }
      this.name = name;
      this.sex = sex;
    };
    var stu = new StudentClass("lufy","男");
    alert(stu.type);//[ 人]
    stu.getType();//[这是一个人]
    以上,就是JavaScript 中继承的实现。
    -----------------------------------------------------

  • 相关阅读:
    Solution 16: 树的层次遍历
    Solution 15: 树的镜像
    Solution 14: Two Sum
    Solution 13: 链表的倒数第K个节点
    Solution 10: 翻转句子中的单词
    Solution 11: 二叉树中节点的最大距离
    Solution 9: 判断序列是否为BST的后续遍历结果
    Solution 7: 判断两链表是否相交
    估算Baidu和Google的网页索引数量之比
    主元素问题
  • 原文地址:https://www.cnblogs.com/dyllove98/p/3132264.html
Copyright © 2020-2023  润新知