zoukankan      html  css  js  c++  java
  • JavaScript Class学习

      小菜鸟学习js类相关知识的总结,不正确的地方还请大家指正。

    类的封装和实现

      众所周知,javascript中类的实现跟传统的C++、Java等并不一样,它是一个函数是第一等公民的语言,所以我们类的设计也要依托于函数。

      function myClass(){};这是一个函数同时我们也可以将它看做一个类,在其中加入成员可以用一下两种方法:

      ①构造函数方法(不知道该怎么叫。。知道的同学请赐教哈):

      function myClass(name){

        this.name = name;

      }

      ②原型方法:

      function myClass(){}

      myClass.prototype.name = 'name';

        个人觉得第二种原型方法比较适用于成员函数的添加,成员变量更适用于构造函数方法,因为new出来的对象都会指向同一个原型,也就说他们都共享同一个原型之上的变量,一个改动其他都会改动。

      接下来就是对象的实现了:

      对于第一种方法,我们可以直接new出一个新的对象var obj_1 = new myClass('obj_1');//obj_1.name = 'obj_1'

      对于第二种方法,由于其原型已经定义name这一属性,因此var obj_2 = new myClass();//obj_2.name = 'name'

      

    类的继承

      类的继承我们可以分为以下两种方法,函数调用和原型链方法

      ①函数调用:

      function Person(name){

        this.name = name;

        this.getName= function(){return this.name;};

      }

      function Women(name){

        Person.call(this,name);//个人理解就是在此处调用了Person函数

        //也可以这么写:

        // this.women = Person;定义一个women函数指向Person

        //this.women(name);调用women函数

        //delete this.women;删除women函数

        this.sex = 'women';//添加一个Women特有的成员变量

        this.getSex = function(){//添加一个Women特有的成员函数

          return this.sex;

        }

      }

      由以上我们可以看出,类的继承首先要构造出一个父类,如果父类的成员函数比较多比较庞大,那么将会耗费一定的时间,如此我们可以使用第二种方法

      ②原型链方法:

      function Person(name){

        this.name = name;

      }

      Person.prototype.getName = function(){return this.name;}//在原型中添加成员函数

      function Women(name){

        Person.call(this,name);

        this.sex = 'women';

      }

      var cPerson = function(){};//新建一个函数

      cPerson.prototype = Person.prototype;//函数原型赋值为Person的原型

      Women.prototype = new cPerson();//给Women的原型赋值,不可以直接将Women的原型赋值为Person的原型,因为后面更改constructor会把Person的也改掉

      Women.prototype.constructor = Women;//更改constructor指向自己

      Women.prototype.getSex = function(){return this.sex;}//给Women添加自己的成员函数

      大功告成,让我们来new几个对象出来看看结果:

      var tangWei = new Women('tangwei');//汤唯是偶的女神

      tangWei.getName();//'tangwei'
      tangWei.getSex();//'women'

      Women.prototype.constructor;//指向Women函数

      Person.prototype.constructor;//指向Person函数

     

      打完收工,大家看完请多多指教^_^

  • 相关阅读:
    MySQL Workbench的安全更新模式
    IEnumerable<T>和IQueryable<T>区分
    Google 网站打不开
    使用 MVVMLight 命令绑定(转)
    使用 MVVMLight 绑定数据(转)
    安装/使用 MVVMLight(转)
    ?? 运算符(C# 参考)
    REST风格URL
    node+mysql 数据库连接池
    理解mysql执行多表联合查询
  • 原文地址:https://www.cnblogs.com/DARKDD/p/3634907.html
Copyright © 2011-2022 走看看