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函数

 

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

JavaScript Class学习,布布扣,bubuko.com

JavaScript Class学习

上一篇:每天学一点c++:c++常用的头文件介绍


下一篇:微信小程序自定义组件,提示组件