Javascript基于对象三大特性(封装性、继承性、多态性)_javascript技巧

Javascript基于对象的三大特征和C++,Java面向对象的三大特征一样,都是封装(encapsulation)、继承(inheritance )和多态(polymorphism )。只不过实现的方式不同,其基本概念是差不多的。其实除三大特征之外,还有一个常见的特征叫做抽象(abstract),这也就是我们在一些书上有时候会看到面向对象四大特征的原因了。
一、封装性
    封装就是把抽象出来的数据和对数据的操作封装在一起,数据被保护在内部,程序的其它部分只有通过被授权的操作(成员方法),才能对数据进行操作。
案例:

<html>
  <head>
    <script type="text/javascript">
      function Person(name, agei, sal){
        // 公开
        this.name = name;
        // 私有
        var age = agei;
        var salary = sal;
      }
      var p1 = new Person('zs', 20, 10000);
      window.alert(p1.name + p1.age);
    </script>
  </head>
  <body>
  </body>
</html>

PS:JS封装只有两种状态,一种是公开的,一种是私有的。

通过构造函数添加成员方法和通过原型法添加成员方法的区别
1、通过原型法分配的函数是所有对象共享的.
2、通过原型法分配的属性是独立.(如果你不修改属性,他们是共享)
3、建议,如果我们希望所有的对象使用同一一个函数,最好使用原型法添加函数,这样比较节省内存.

案例:

function Person(){
  this.name="zs";
  var age=20;
  this.abc=function(){
    window.alert("abc");
  }
  function abc2(){
    window.alert("abc");
  }
}
Person.prototype.fun1=function(){
  window.alert(this.name);//ok
  //window.alert(age);//no ok
  //abc2();//no ok
  this.abc();//ok
}
var p1=new Person();
p1.fun1();

特别强调:我们前面学习的通过prototype给所有的对象添加方法,但是这种方式不能去访问类的私有变量和方法。

二、继承性
继承可以解决代码复用,让编程更加靠近人类思维。当多个类存在相同的属性(变量)和方法时,可以从这些类中抽象出父类,在父类中定义这些相同的属性和方法,所有的子类不需要重新定义这些属性和方法,只需要通过继承父类中的属性和方法。
JS中实现继承的方式
1、对象冒充
案例:

<html>
  <head>
    <script type="text/javascript">
      function Stu(name, age){
        this.name = name;
        this.age = age;
        this.show = function(){
          window.alert(this.name + " " + this.age);
        }
      }
      function MidStu(name, age) {
        this.stu = Stu;
        // 通过对象冒充来实现继承的
        // 对象冒充的意思就是获取那个类的所有成员,因为js是谁调用那个成员就是谁的,这样MidStu就有了Stu的成员了
        this.stu(name, age);
        this.payFee = function(){
          window.alert("缴费" + money * 0.8);
        }
      }
      function Pupil(name, age) {
        this.stu = Stu;
        // 通过对象冒充来实现继承的
        this.stu(name, age);
        this.payFee = function(){
          window.alert("缴费" + money * 0.5);
        }
      } 

      var midStu = new MidStu("zs", 13);
      midStu.show();
      var pupil = new Pupil("ls", 10);
      pupil.show();
    </script>
  </head>
  <body>
  </body>
</html>

2、通过call或者apply实现
案例:

<html>
<head>
<script type="text/javascript">
  //1. 把子类中共有的属性和方法抽取出,定义一个父类Stu
  function Stu(name,age){
    // window.alert("确实被调用.");
    this.name=name;
    this.age=age;
    this.show=function(){
      window.alert(this.name+"年龄是="+this.age);
    }
  }
  //2.通过对象冒充来继承父类的属性的方法
  function MidStu(name,age){
    //这里这样理解: 通过call修改了Stu构造函数的this指向,
    //让它指向了调用者本身.
    Stu.call(this,name,age);
    //如果用apply实现,则可以
    //Stu.apply(this,[name,age]); //说明传入的参数是 数组方式
    //可以写MidStu自己的方法.
    this.pay=function(fee){
      window.alert("你的学费是"+fee*0.8);
    }
  }
  function Pupil(name,age){
    Stu.call(this,name,age);//当我们创建Pupil对象实例,Stu的构造函数会被执行,当执行后,我们Pupil对象就获取从 Stu封装的属性和方法
    //可以写Pupil自己的方法.
    this.pay=function(fee){
      window.alert("你的学费是"+fee*0.5);
    }
  }
  //测试
  var midstu=new MidStu("zs",15);
  var pupil=new Pupil("ls",12);
  midstu.show();
  midstu.pay(100);
  pupil.show();
  pupil.pay(100);
</script>
</html>

小结:
1、JS对象可以通过对象冒充,实现多重继承
2、Object类是所有Js类的基类

三、多态性
JS的函数重载
这个是多态的基础,在之前的Javascript入门已经说过了,JS函数不支持多态,但是事实上JS函数是无态的,支持任意长度,类型的参数列表。如果同时定义了多个同名函数,则以最后一个函数为准。
案例:

<html>
<head>
<script type="text/javascript">
  //*****************说明js不支持重载*****
  /*function Person(){
    this.test1=function (a,b){
      window.alert('function (a,b)');
    }
    this.test1=function (a){
      window.alert('function (a)');
    }
  }
  var p1=new Person();
  //js中不支持重载.
  //但是这不会报错,js会默认是最后同名一个函数,可以看做是后面的把前面的覆盖了。
  p1.test1("a","b");
  p1.test1("a");*/ 

  //js怎么实现重载.通过判断参数的个数来实现重载
  function Person(){
    this.test1=function (){
      if(arguments.length==1){
        this.show1(arguments[0]);
      }else if(arguments.length==2){
        this.show2(arguments[0],arguments[1]);
      }else if(arguments.length==3){
        this.show3(arguments[0],arguments[1],arguments[2]);
      }
    }
    this.show1=function(a){
      window.alert("show1()被调用"+a);
    }
    this.show2=function(a,b){
      window.alert("show2()被调用"+"--"+a+"--"+b);
    }
    function show3(a,b,c){
      window.alert("show3()被调用");
    }
  }
  var p1=new Person();
  //js中不支持重载.
  p1.test1("a","b");
  p1.test1("a");
</script>
</html>

1、多态基本概念
多态是指一个引用(类型)在不同情况下的多种状态。也可以理解成:多态是指通过指向父类的引用,来调用在不同子类中实现的方法。
案例:

<script type="text/javascript">
  // Master类
  function Master(name){
    this.nam=name;
    //方法[给动物喂食物]
  }
  //原型法添加成员函数
  Master.prototype.feed=function (animal,food){
    window.alert("给"+animal.name+" 喂"+ food.name);
  }
  function Food(name){
    this.name=name;
  }
  //鱼类
  function Fish(name){
    this.food=Food;
    this.food(name);
  }
  //骨头
  function Bone(name){
    this.food=Food;
    this.food(name);
  }
  function Peach(name){
    this.food=Food;
    this.food(name);
  }
  //动物类
  function Animal(name){
    this.name=name;
  }
  //猫猫
  function Cat(name){
    this.animal=Animal;
    this.animal(name);
  }
  //狗狗
  function Dog(name){
    this.animal=Animal;
    this.animal(name);
  }
  //猴子
  function Monkey(name){
    this.animal=Animal;
    this.animal(name);
  }
  var cat=new Cat("猫");
  var fish=new Fish("鱼"); 

  var dog=new Dog("狗");
  var bone=new Bone("骨头"); 

  var monkey=new Monkey("猴");
  var peach=new Peach("桃"); 

  //创建一个主人
  var master=new Master("zs");
  master.feed(dog,bone);
  master.feed(cat,fish);
  master.feed(monkey,peach);
</script>

多态利于代码的维护和扩展,当我们需要使用同一类树上的对象时,只需要传入不同的参数就行了,而不需要再new 一个对象。

以上就是Javascript基于对象三大特性,希望对大家的学习有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
, 对象
特性
类的继承性和多态性、javascript 继承、javascript 封装、javascript 原型继承、javascript函数封装,以便于您获取更多的相关知识。

时间: 2024-11-08 18:51:16

Javascript基于对象三大特性(封装性、继承性、多态性)_javascript技巧的相关文章

javascript基于prototype实现类似OOP继承的方法_javascript技巧

本文实例讲述了javascript基于prototype实现类似OOP继承的方法.分享给大家供大家参考,具体如下: 这里要说明的是,公有属性(使用this.修饰符)可以被覆盖,私有属性(使用var 修饰符)不能被覆盖 子类不能访问父类的私有属性,父类的方法正常访问父类的私有变量. function Vegetable(){ this.taste='delicious'; var a = 'I\'m Vegetable\'a!' this.fun1 = function(){ alert('Veg

Javascript基于AJAX回调函数传递参数实例分析_javascript技巧

本文实例讲述了Javascript基于AJAX回调函数传递参数的方法.分享给大家供大家参考,具体如下: 前面介绍了<javascript实现html页面之间参数传递的四种方法>,这里针对ajax参数传递做一分析. 在Javascript 中,特别是在AJAX中,回调函数常常是一个函数名,没有地方放入参数,如下面的AJAX代码,在成功后将调用回调函数callback,但callback是有参数的,如何把参数传进来呢? var callback = function(p1){ //do somet

JavaScript中cookie工具函数封装的示例代码_javascript技巧

一. 语法 1.1 获取当前页面的所有cookie: var allCookies = document.cookie; allCookies 是一个字符串,其中包含了以分号分隔的cookie列表字符串 (即 key=value 键值对). 1.2 写一个新cookie: document.cookie = updatedCookie; updatedCookie是一个键值对形式的字符串.只能用这个方法一次设置或更新一个cookie,而且写入并不是覆盖,而是添加.例如: document.coo

JavaScript获取对象在页面中位置坐标的方法_javascript技巧

本文实例讲述了JavaScript获取对象在页面中位置坐标的方法.分享给大家供大家参考,具体如下: <script language="javascript" type="text/javascript" > function getXY(Obj) { var h = Obj.offsetHeight; for (var sumTop=0,sumLeft=0;Obj!=document.body;sumTop+=Obj.offsetTop,sumLeft

JavaScript中检查对象property的存在性方法介绍_javascript技巧

在JavaScript中,可以用四种方法来检查某个对象o是否拥有property x: 1."x" in o.in操作符可用于检查对象o中是否有x这个property.x可以是对象自身的(Own Property),也可以是从原型对象中继承而来的:x可以是enumerable的property,也可以是非enumerable的property. 2.o.x.可以通过访问o.x语句,判断其结果是否为undefined来确认x是否存在,其作用范围与in操作符相同.与in操作符不同的是:如果

Javascript面象对象成员、共享成员变量实验_javascript技巧

1)Javascript对象成员实验: 复制代码 代码如下: var f = function d() { this.a = "a";/*这句运行后不存在f.a也不存在d.a存在一个window.a*/ var b = "b";/*局部变量*/ }; var o = { ff: function () { var a = "a"; /*局部变量*/ this.b = "b"; /*这句运行后存在o.b*/ } }; funct

javascript面向对象程序设计高级特性经典教程(值得收藏)_javascript技巧

本文实例讲述了javascript面向对象程序设计的高级特性.分享给大家供大家参考,具体如下: 1.创建对象的三种方式: 第一种构造法:new  Object var a = new Object(); a.x = 1, a.y = 2; 第二种构造法:对象直接量 var b = { x : 1, y : 2 }; 第三种构造法:定义类型 function Point(x, y){ this.x = x; this.y = y; } var p = new Point(1,2); 2.访问对象

javascript 中对象的继承〔转贴〕_javascript技巧

1.关于javascript的apply和call函数 prototype.js中用了大量的apply和call函数,不注意会造成理解偏差. 官方解释:应用某一对象的一个方法,用另一个对象替换当前对象. apply与call的区别是第二个参数不同.apply是  数组或者arguments 对象.而call是逗号隔开的任何类型. apply,call方法最让人混淆的地方也是apply,call的特色.但最好不要滥用. 能改变调用函数的对象.如下例,函数中用到this关键字,这时候this代表的是

JavaScript中对象属性的添加和删除示例_javascript技巧

复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /* * 用.为对象添加属性 用关键字delete删除属性 用[]添加属性 和.的不同 r.name==r["name