在很多时候我们写的js操作都有很多的公用的地方,每次都去复制过来,代码复用性很差,为何不像java一样,将公共的一些操作,属性提取出来作为父类,然后子类去继承并继续做加工,不影响父类。

下面我来介绍下js的类的三种继承的写法

拷贝继承:(通用型的 有new或无new的时候都可以)

  • 继承属性用父类的call方法

    1. 父类.call(this,属性1,属性2,....);
  • 继承方法用for in

    1. extend(子类的原型,父类的原型);
    2. //for in 继承 jq也是这种 继承方法
    3. function extend(obj1, obj2){
    4. for(var attr in obj2){
    5. obj1[attr] = obj2[attr];
    6. }
    7. }
  • 先看这个简单的例子,理解js的继承:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>myTest</title>
    6. </head>
    7. <body>
    8. <script type="text/javascript">
    9. function CreatePerson(name,sex){
    10. this.name = name;
    11. this.sex = sex;
    12. }//父类构造器,定义父类的属性
    13. CreatePerson.prototype.showName = function(){
    14. alert(this.name);
    15. }//利用原型给写父类的方法属性
    16. var p1 = new CreatePerson('小明', 'boy');//实例化父类测试是否成功
    17. p1.showName();//小明
    18. //属性的继承采用的是调用父类的构造器的call
    19. function CreateStar(name, sex,job){
    20. CreatePerson.call(this,name,sex);
    21. this.job = job;
    22. }
    23. //将父类的原型给子类(更改一个都改变,这里相当于引用,而不是复制,这种是做不到继承的)
    24. // CreateStar.prototype=CreatePerson.prototype;
    25. extend(CreateStar.prototype,CreatePerson.prototype);
    26. //for in 继承 jq也是这种 继承方法
    27. function extend(obj1, obj2){
    28. for(var attr in obj2){
    29. obj1[attr] = obj2[attr];
    30. }
    31. }
    32. var p2 = new CreateStar('xiaolki','girl','papa');
    33. p2.showName();
    34. p1.showName();
    35. </script>
    36. </body>
    37. </html>
  • 下面给出一段js拖动div的操作的继承

    1. 写父类对div1进行拖动的操作,及父类

      1. function Drag(id) { //父类
      2. this.obj = document.getElementById(id);//获取所要拖动的dom节点
      3. this.disX = 0;
      4. this.disY = 0;
      5. }
      6. Drag.prototype.init = function () {
      7. var This = this;
      8. //鼠标按下事件初始化
      9. this.obj.onmousedown = function (ev) {
      10. var ev = ev || window.event;
      11. This.fnDown(ev);
      12. //鼠标移动事件初始化
      13. document.onmousemove = function (ev) {
      14. var ev = ev || window.event;
      15. This.fnMove(ev);
      16. };
      17. //鼠标松开事件初始化
      18. document.onmouseup = function () {
      19. This.fnUp();
      20. };
      21. return false;
      22. };
      23. };
      24. //鼠标按下操作
      25. Drag.prototype.fnDown = function (ev) {
      26. this.disX = ev.clientX - this.obj.offsetLeft;
      27. this.disY = ev.clientY - this.obj.offsetTop;
      28. };
      29. //鼠标移动操作
      30. Drag.prototype.fnMove = function (ev) {
      31. this.obj.style.left = ev.clientX - this.disX + 'px';
      32. this.obj.style.top = ev.clientY - this.disY + 'px';
      33. };
      34. //鼠标松开操作
      35. Drag.prototype.fnUp = function () {
      36. document.onmousemove = null;
      37. document.onmouseup = null;
      38. };
  1. 子类继承父类

    1. function ChildDrag(id) { //子类
    2. Drag.call(this, id);//继承父类的属性
    3. }
    4. //继承父类的方法
    5. extend(ChildDrag.prototype, Drag.prototype);
    6. //子类重写父类的鼠标移动方法
    7. ChildDrag.prototype.fnMove = function (ev) {
    8. var L = ev.clientX - this.disX;
    9. var T = ev.clientY - this.disY;
    10. if (L < 0) {
    11. L = 0;
    12. }
    13. else if (L > document.documentElement.clientWidth - this.obj.offsetWidth) {
    14. L = document.documentElement.clientWidth - this.obj.offsetWidth;
    15. }
    16. this.obj.style.left = L + 'px';
    17. this.obj.style.top = T + 'px';
    18. };
    19. //for in 来继承父类的方法
    20. function extend(obj1, obj2) {
    21. for (var attr in obj2) {
    22. obj1[attr] = obj2[attr];
    23. }
    24. }

类似继承: (new构造函数)

JS是没有类的概念的 , 把JS中的构造函数看做的类

要做属性和方法继承的时候,要分开继承

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. function Aaa(){ //父类
  8. this.name = [1,2,3];
  9. }
  10. Aaa.prototype.showName = function(){
  11. alert( this.name );
  12. };
  13. function Bbb(){ //子类
  14. Aaa.call(this);
  15. }
  16. var F = function(){};
  17. F.prototype = Aaa.prototype;//利用空方法只继承父类的方法,不继承属性
  18. Bbb.prototype = new F();//将继承来的方法给子类引用
  19. Bbb.prototype.constructor = Bbb; //因为是从父类引用而来,所以要重新修正指向问题
  20. var b1 = new Bbb();
  21. //b1.showName();
  22. //alert( b1.name );
  23. //alert( b1.constructor );
  24. b1.name.push(4);
  25. var b2 = new Bbb();
  26. alert( b2.name );
  27. </script>
  28. </head>
  29. <body>
  30. </body>
  31. </html>

原型继承:(无new对象)

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. var a = {
  8. name: '小明'
  9. };
  10. var b = cloneObj(a);
  11. b.name = '小强';
  12. //alert( b.name );
  13. alert(a.name);
  14. function cloneObj(obj) {
  15. var F = function () {
  16. };
  17. F.prototype = obj;
  18. return new F();
  19. }
  20. </script>
  21. </head>
  22. <body>
  23. </body>
  24. </html>

您的支持是对我最大的鼓励!

分类: 前端

标签:   子类继承