你的位置:首页 > Java教程

[Java教程]浅谈JS中的继承


前言

JS 是没有继承的,不过可以曲线救国,利用构造函数、原型等方法实现继承的功能。

1 var o=new Object();

其实用构造函数实例化一个对象,就是继承,这里可以使用Object中的所有属性与方法。那么为什么能访问Object对象的方法,其实访问的是其原型对象的方法,所有的方法都是放在原型中而不是类中。

1 console.log(o.__proto__ === Object.prototype) // true 继承的本质2 console.log(o.__proto__ === Object);3 console.log(Object.__proto__ === Function.prototype);4 console.log(Function.prototype.__proto__ === Object.prototype);5 console.log(Number.__proto__ === Function.prototype);

object是万物祖先,Everything is object 嘛。

 

1、内置对象都继承自object

 

1 var myNumber = new Number(10); //实例化一个数字对象

字符串对象,其实是String对象的一个实例化

 

1 var s = ‘str’;

 

除了可以访问自身属性方法,还能访问父类属性方法

 

1 console.log(s.toUpperCase());2 console.log(s.toString());

 

2、自定义对象的继承

 

 1 // 父类 2   var Person = function(){ 3    this.name='AV老师'; 4    this.test='测试中的毕福剑'; 5   }  6   Person.prototype={ 7    say:function(){ 8     console.log('呀买碟'); 9    }10   }11   // 构造函数12   var Canglaoshi = function(name,age,cup){13    this.name=name;14    this.age=age;15    this.cup=cup;16   }17   // 继承person,则拥有person原型中的方法18   Canglaoshi.prototype=new Person();19   Canglaoshi.prototype.ppp=function(){20    console.log('啪啪啪');21   }22   // 苍老师拥有了person中的方法23   var xiaocang=new Canglaoshi('空空',18,'E');24   xiaocang.say();25   console.log(xiaocang.name);26   console.log(xiaocang.age);27   console.log(xiaocang.cup);28   console.log(xiaocang.test);

 

3、自定义对象继承的原型链演示

 

 1 +(function() { 2    //父类 3    function SuperParent() { 4     this.name = 'mike'; 5    } 6  7    //子类继承父亲 - 二次继承: 8    function Parent() { 9     this.age = 12;10    }11    Parent.prototype = new SuperParent(); //通过原型,形成链条12 13    var parent = new Parent();14    console.log("测试父亲可以访问爷爷属性:" + parent.name);15    console.log("测试父亲可以访问自己的属性:" + parent.age);16 17    //继续原型链继承 - 三次继承18    function Child() { //brother构造19     this.weight = 60;20    }21    Child.prototype = new Parent(); //继续原型链继承22 23 24    //原型链测试225    //儿子集成爷爷26    var child = new Child();27    console.log("测试儿子可以访问爷爷的属性:" + child.name); //继承了Parent和Child,弹出mike28    console.log("测试儿子可以访问父亲的属性:" + child.age); //弹出1229    console.log("测试儿子可以访问自己独特的属性:" + child.weight); //弹出1230 31    //原型链测试32    //爷爷可以访问Object中的方法33    var test = new SuperParent();34    console.log(test.name);35    console.log(test.toString());36    //访问链: SuperParent构造对象--》SuperParent原型对象--》Object对象--》Obect原型对象(找到toString方法)--》null37 38    console.log(child.name);39    //原型链:首先访问Child构造函数,发现没有name属性--》寻找__proto__,判断起指针是否为空--》指向Child原型函数,寻找有没有name属性--》40    //---》没有找到,则判断其__proto__属性是否为null,如果不为null,继续搜索--》找到parent对象,检查是否有name属性,没有。。。。41   })()

 

4、构造函数继承

 

 1 +(function() { 2    function People() { 3     this.race = '人类'; 4    } 5    People.prototype = { 6     eat: function() { 7      alert('吃吃吃'); 8     } 9    }10 11    /*人妖对象*/12    function Shemale(name, skin) {13     People.apply(this, arguments); // 用call也是一样的,注意第二个参数14     this.name = name;15     this.skin = skin;16    }17    //实例化 18    var zhangsan = new Shemale('张三', '黄皮肤')19    console.log(zhangsan.name); //张三20    console.log(zhangsan.skin); //黄皮肤21    console.log(zhangsan.race); //人类22   })()

 

5、组合继承

 1 +(function() { 2    function Person(name, age) { 3     this.name = name; 4     this.age = age; 5    } 6    Person.prototype.say = function() {} 7  8    function Man(name, age, no) { 9     /*会自动调用Person的方法,同时将name age传递过去*/10     Person.call(this, name, age);11     //自己的属性12     this.no = no;13    }14    Man.prototype = new Person();15 16    var man = new Man("张三", 11, "0001");17    console.log(man.name);18    console.log(man.age);19    console.log(man.no);20   })()

 

6、拷贝继承

 1 <script> 2   +(function() { 3    var Chinese = { 4     nation: '中国' 5    }; 6    var Doctor = { 7     career: '医生' 8    }; 9    //  请问怎样才能让"医生"去继承"中国人",也就是说,我怎样才能生成一个"中国医生"的对象?10    //  这里要注意,这两个对象都是普通对象,不是构造函数,无法使用构造函数方法实现"继承"。11    function extend(p) {12     var c = {};13     for (var i in p) {     14      c[i] = p[i];    15     }16     c.uber = p;17     return c;18    }19    var Doctor = extend(Chinese);20    Doctor.career = '医生';21    alert(Doctor.nation); // 中国22   })()23  </script>

 

7、寄生组合继承

 1 <script> 2   +(function() { 3    /*继承的固定函数*/ 4    function inheritPrototype(subType, superType) { 5     var prototype = Object(superType.prototype); 6     prototype.constructor = subType; 7     subType.prototype = prototype; 8    } 9 10    function Person(name) {11     this.name = name;12    }13    Person.prototype.say = function() {}14 15    function Student(name, age) {16     Person.call(this, name);17     this.age = age;18    }19 20    inheritPrototype(Student, Person);21    var xiaozhang = new Student('小张', 20);22    console.log(xiaozhang.name)23   })()24  </script>

 

8、使用第三方框架实现继承

 1 <script src='simple.js'></script>  2  <!-- 使用的第三方框架simple.js --> 3  <script> 4   +(function() { < script > 5     var Person = Class.extend({ 6      init: function(age, name) { 7       this.age = age; 8       this.name = name; 9      },10      ppp: function() {11       alert("你懂的");12      }13     });14    var Man = Person.extend({15     init: function(age, name, height) {16      this._super(age, name);17      this.height = height;18     },19     ppp: function() {20      /*调用父类的同名方法*/21      this._super();22      /*同时又可以调用自己的方法*/23      alert("好害羞 -,- ");24     }25    });26 27 28    var xiaozhang = new Man(21, '小张', '121');29    xiaozhang.ppp();30   })()