Heim > Web-Frontend > js-Tutorial > Hauptteil

Sprechen Sie über die verschiedenen Arten der Vererbung in Javascript_Javascript-Kenntnissen

WBOY
Freigeben: 2016-05-16 15:14:43
Original
984 Leute haben es durchsucht

JS hat keine Vererbung, kann aber das Land retten, indem es Konstruktoren, Prototypen und andere Methoden verwendet, um die Vererbungsfunktion zu realisieren.

 var o=new Object();
Nach dem Login kopieren

Tatsächlich ist das Instanziieren eines Objekts mithilfe eines Konstruktors eine Vererbung. Alle Eigenschaften und Methoden in Object können hier verwendet werden. Warum können Sie also auf die Methoden des Objektobjekts zugreifen? Tatsächlich werden alle Methoden im Prototyp und nicht in der Klasse platziert.

console.log(o.__proto__ === Object.prototype) // true 继承的本质
console.log(o.__proto__ === Object);
console.log(Object.__proto__ === Function.prototype);
console.log(Function.prototype.__proto__ === Object.prototype);
console.log(Number.__proto__ === Function.prototype);
Nach dem Login kopieren

Objekt ist der Vorfahre aller Dinge.

1. Integrierte Objekte erben alle vom Objekt

var myNumber = new Number(10); //实例化一个数字对象
Nach dem Login kopieren

String-Objekt ist eigentlich eine Instanziierung des String-Objekts

var s = ‘str';
Nach dem Login kopieren

Zusätzlich zum Zugriff auf die eigenen Attributmethoden können Sie auch auf die Attributmethoden der übergeordneten Klasse zugreifen

console.log(s.toUpperCase());
console.log(s.toString());
 
Nach dem Login kopieren

2. Vererbung benutzerdefinierter Objekte

// 父类
  var Person = function(){
   this.name='AV老师';
   this.test='测试中的毕福剑';
  } 
  Person.prototype={
   say:function(){
    console.log('呀买碟');
   }
  }
  // 构造函数
  var Canglaoshi = function(name,age,cup){
   this.name=name;
   this.age=age;
   this.cup=cup;
  }
  // 继承person,则拥有person原型中的方法
  Canglaoshi.prototype=new Person();
  Canglaoshi.prototype.ppp=function(){
   console.log('啪啪啪');
  }
  // 苍老师拥有了person中的方法
  var xiaocang=new Canglaoshi('空空',18,'E');
  xiaocang.say();
  console.log(xiaocang.name);
  console.log(xiaocang.age);
  console.log(xiaocang.cup);
  console.log(xiaocang.test);
Nach dem Login kopieren

3. Prototypenkettendemonstration der benutzerdefinierten Objektvererbung

(function() {
   //父类
   function SuperParent() {
    this.name = 'mike';
   }

   //子类继承父亲 - 二次继承:
   function Parent() {
    this.age = 12;
   }
   Parent.prototype = new SuperParent(); //通过原型,形成链条

   var parent = new Parent();
   console.log("测试父亲可以访问爷爷属性:" + parent.name);
   console.log("测试父亲可以访问自己的属性:" + parent.age);

   //继续原型链继承 - 三次继承
   function Child() { //brother构造
    this.weight = 60;
   }
   Child.prototype = new Parent(); //继续原型链继承


   //原型链测试2
   //儿子集成爷爷
   var child = new Child();
   console.log("测试儿子可以访问爷爷的属性:" + child.name); //继承了Parent和Child,弹出mike
   console.log("测试儿子可以访问父亲的属性:" + child.age); //弹出12
   console.log("测试儿子可以访问自己独特的属性:" + child.weight); //弹出12

   //原型链测试
   //爷爷可以访问Object中的方法
   var test = new SuperParent();
   console.log(test.name);
   console.log(test.toString());
   //访问链: SuperParent构造对象--》SuperParent原型对象--》Object对象--》Obect原型对象(找到toString方法)--》null

   console.log(child.name);
   //原型链:首先访问Child构造函数,发现没有name属性--》寻找__proto__,判断起指针是否为空--》指向Child原型函数,寻找有没有name属性--》
   //---》没有找到,则判断其__proto__属性是否为null,如果不为null,继续搜索--》找到parent对象,检查是否有name属性,没有。。。。
  })()

Nach dem Login kopieren

4. Konstruktorvererbung

(function() {
   function People() {
    this.race = '人类';
   }
   People.prototype = {
    eat: function() {
     alert('吃吃吃');
    }
   }

   /*人妖对象*/
   function Shemale(name, skin) {
    People.apply(this, arguments); // 用call也是一样的,注意第二个参数
    this.name = name;
    this.skin = skin;
   }
   //实例化 
   var zhangsan = new Shemale('张三', '黄皮肤')
   console.log(zhangsan.name); //张三
   console.log(zhangsan.skin); //黄皮肤
   console.log(zhangsan.race); //人类
  })()

Nach dem Login kopieren

5. Kombinationsvererbung

(function() {
   function Person(name, age) {
    this.name = name;
    this.age = age;
   }
   Person.prototype.say = function() {}

   function Man(name, age, no) {
    /*会自动调用Person的方法,同时将name age传递过去*/
    Person.call(this, name, age);
    //自己的属性
    this.no = no;
   }
   Man.prototype = new Person();

   var man = new Man("张三", 11, "0001");
   console.log(man.name);
   console.log(man.age);
   console.log(man.no);
  })()

Nach dem Login kopieren

6. Vererbung kopieren

<script>
  +(function() {
   var Chinese = {
    nation: '中国'
   };
   var Doctor = {
    career: '医生'
   };
   //  请问怎样才能让"医生"去继承"中国人",也就是说,我怎样才能生成一个"中国医生"的对象?
   //  这里要注意,这两个对象都是普通对象,不是构造函数,无法使用构造函数方法实现"继承"。
   function extend(p) {
    var c = {};
    for (var i in p) {     
     c[i] = p[i];    
    }
    c.uber = p;
    return c;
   }
   var Doctor = extend(Chinese);
   Doctor.career = '医生';
   alert(Doctor.nation); // 中国
  })()
 </script>
Nach dem Login kopieren

7. Parasitäre Kombinationsvererbung

<script>
  +(function() {
   /*继承的固定函数*/
   function inheritPrototype(subType, superType) {
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
   }

   function Person(name) {
    this.name = name;
   }
   Person.prototype.say = function() {}

   function Student(name, age) {
    Person.call(this, name);
    this.age = age;
   }

   inheritPrototype(Student, Person);
   var xiaozhang = new Student('小张', 20);
   console.log(xiaozhang.name)
  })()
 </script>

Nach dem Login kopieren

8. Verwenden Sie Frameworks von Drittanbietern, um die Vererbung zu implementieren

<script src='simple.js'></script> 
 <!-- 使用的第三方框架simple.js -->
 <script>
  +(function() { < script >
    var Person = Class.extend({
     init: function(age, name) {
      this.age = age;
      this.name = name;
     },
     ppp: function() {
      alert("你懂的");
     }
    });
   var Man = Person.extend({
    init: function(age, name, height) {
     this._super(age, name);
     this.height = height;
    },
    ppp: function() {
     /*调用父类的同名方法*/
     this._super();
     /*同时又可以调用自己的方法*/
     alert("好害羞 -,- ");
    }
   });


   var xiaozhang = new Man(21, '小张', '121');
   xiaozhang.ppp();
  })()
Nach dem Login kopieren

Ich hoffe, dass es für alle hilfreich sein wird, Javascript-Programmierung zu lernen.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!