JS面向对象基础篇(封装 继承 多态)

首先我们要创建一个对象,我们可以利用javascript的语法特征,以类的思想来创建对象

一:封装

(1)原始方法,代码如下

<script>
   var obj=new Object();
   obj.name='Tom'; //给对象添加属性
   obj.sex=22;
   obj.showName=function(){
    //给对象添加方法
    alert(this.name);
} 
   obj.showAge=function(){
    alert(this.age);
} 
   obj.showName();   //'Tom'
   obj.showAge();   //22
   
//上面的方式通过new关键字生成一个对象,然后根据javascript是动态语言的特性来添加属性和方法,构造一个对象。其中this表示调用该方法的对象。
这种方式的问题是如果需要多次创建对象,那么需要重复代码多次,不利于代码的复用。

</script>

(2)工厂加工, 代码如下

<script>
 function createObj(name,age){
    var Obj=new Object();
    obj.name=name;
    obj.age=age;
    obj.showName=function(){
       alert(this.name);  
}
    obj.showAge=function(){
       alert(this.age);    
}
    return obj;
}
 
 var obj1=createObj('sun',22);
 var obj2=createObj('leo',21);

 obj1.showName();  //sun
 obj1.showAge();    //22
 obj2.showName();  //leo
 obj2.showAge();    //21


 //上面通过定义几个函数的对象,解决了不同对象持有函数对象的私有属性问题。现在所有对象的方法都持有上面两个函数的引用,但这么一来,对象的函数又和
 对象相互独立了,这和面向对象中持有方法属于与特定类的思想不符。
</script>

(3)构造函数方式, 代码如下

 <script>
    function person(name,age){
    //var this=new Object();  //系统模拟创建对象
    this.name=name;
    this.age=age;
    this.showName=function(){
       alert(this.name);     
}
    this.showAge=function(){
       alert(this.age);     
}
  //return this    //系统模拟返回了对象    
}
 
 var obj1=new person('sun',22);
 var obj2=new person('leo',21);

 obj1.showName();  //sun
 obj1.showAge();    //22
 obj2.showName();  //leo
 obj2.showAge();    //21

 //构造函数的方式与工厂加工方式一样,会为每个对象创建独享的函数对象,当然也可以将这些函数对象定义在构造函数外面,这样又有了对象和方法
   相互独立的问题

 </script>

(4)原型方法, 代码如下

 <script> 
     function person(){}  //定义一个空构造函数,且不能传递参数
     person.prototype.age=22;
     person.prototype.array=['sun','leo'];
     person.prototype.showAge=function(){
         alert(this.age);
}
     person.prototype.showArray=function(){
         alert(this.array);
}
  
     var obj1=new person();  //生成一个person对象
     var obj2=new person();
     obj1.array.push('blue');  //向obj1的array属性添加一个属性
     obj1.showArray(); //'sun','leo','blue'
     obj2.showArray(); //'sun','leo','blue'

  //上面的代码通过obj1向obj1的属性array添加元素时,obj2的array属性的元素也跟着受影响,原因是在于obj1和obj2对象的array属性引用的是同一个Array
   对象,那么改变这个Array对象,另一个引用Array对象的属性自然也会受到影响
     
</script>

(5)混合的构造函数/原型方式, 代码如下

  <script>
     function person(name,age){
      this.name=name;
      this.age=age;
}      
     person.prototype.showName=function(){
      alert(this.name);
}
     person.prototype.showAge=function(){
      alert(this.age);
}

     var obj1= new person('sun',22);
     var obj2= new person('leo',21);

     obj1.showName();  //sun
     obj1.showAge();    //22
     obj2.showName();  //leo
     obj2.showAge();    //21

  //属性私有后,改变各自的属性不会影响别的对象。同时,方法也是由各个对象共享的。在语义上,这符合了面向对象编程的要求。

  </script>

二:继承(主要包括属性的继承和方法的继承)

代码如下
 <script>        
    function person(name, sex){
      this.name=name;
      this.sex=sex;
}

   person.prototype.showName=function(){
         alert(this.name);
}
   person.prototype.showSex=function(){
        alert(this.sex);
}
 ////////////////////////////////////////////////////

   function worker(name,sex,job){
      person.call(this,name,sex);//构造函数伪装   调用父级的构造函数--为了继承属性
      this.job=job;
}

   //原型链  通过原型来继承父级的方法

   for(attr in person.prototype){
     worker.prototype[attr]=person.prototype[attr];
}
   worker.prototype.showJob=function(){
       alert(this.job);
}

    var op=new person('blue','男');  
    var ow=new worker('blue','男','程序员');

    op.showName();  //blue
    op.showSex();  //男
    ow.showName();  //blue
    ow.showsex();  //男
    ow.showjob();  //程序员
    
  //继承的好处:父类新加的功能,子类也具备该功能,子类新加的功能不会影响父类的功能
 </script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,723评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,485评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,998评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,323评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,355评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,079评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,389评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,019评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,519评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,738评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,293评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2 345

推荐阅读更多精彩内容

  • 博客内容:什么是面向对象为什么要面向对象面向对象编程的特性和原则理解对象属性创建对象继承 什么是面向对象 面向对象...
    _Dot912阅读 1,401评论 3 12
  • 1.继承(接口继承和实现继承) 继承是 OO 语言中的一个最为人津津乐道的概念。许多 OO 语言都支持两种继承方式...
    believedream阅读 939评论 0 3
  • 本章内容 理解对象属性 理解并创建对象 理解继承 面向对象语言有一个标志,那就是它们都有类的概念,而通过类可以创建...
    闷油瓶小张阅读 841评论 0 1
  • 《一片落花》第6篇 世界上最快的速度不是光速,而是想象。一束光或许需要上万年才能抵达预想的星座。想象在宇宙中穿梭,...
    默夜清辉阅读 271评论 0 0
  • 1.感恩今天开始休年假了,让我可以陪家人一起玩。 2.感恩今天儿子干爹借车给我们,让我和老公今天办了很多事。 3....
    忆秦YQ阅读 187评论 0 0