Terangkan mekanisme warisan Javascript dan analisis kod sumber warisan mudah daripada kemahiran cetek kepada deep_javascript

Kebanyakan orang mungkin tidak dapat memahami isu ini dengan cara yang sistematik. Bahasa Javascript tidak melaksanakan warisan dengan baik, dan jurutera perlu melaksanakan sendiri mekanisme warisan yang lengkap. Di bawah ini kita akan menguasai teknik menggunakan warisan JavaScript daripada sistem yang lebih cetek kepada yang lebih dalam.

1. Gunakan rantai prototaip terus

Ini adalah kaedah yang paling mudah dan kasar serta tidak boleh digunakan dalam projek tertentu. Demo mudah adalah seperti berikut:

function SuperType(){
  this.property = true;
}
SuperType.prototype.getSuperValue = function(){
  return this.property;
}
function SubType(){
  this.subproperty = false;
}
//继承
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function(){
  return this.subproperty;
}
var instance = new SubType();

Masalah dengan pendekatan ini ialah sifat dalam prototaip akan dikongsi oleh semua tika Penukaran sifat yang diwarisi melalui satu tika akan mempengaruhi kejadian lain. ,Ini jelas bukan warisan dalam pengertian konvensional.

2. Gunakan pembina

Pembina pada asasnya hanyalah fungsi, yang boleh dipanggil dalam mana-mana skop Dengan memanggil pembina induk dalam pembina anak, pewarisan mudah boleh dicapai.

function SuperType(){
  this.colors = {"red","blue","green"}
}
function SubType(){
  SuperType.call(this);  
}
var instance = new SubType();

Pelaksanaan ini mengelakkan masalah perkongsian atribut berbilang kejadian, tetapi masalah baharu timbul, seperti fungsi tidak boleh dikongsi dan instance of SuperType adalah palsu.

3. Gunakan prototaip dan pembina dalam gabungan

function SuperType(name){
  this.name = name;
  this.colors = {"red","blue","green"}
}
SuperType.prototype.sayName = function(){
  //code
}
function SubType(name,age){
  SuperType.call(this,name); 
  this.age = age;
}
SubType.prototype = new SuperType();
var instance = new SubType();

Penggunaan gabungan prototaip dan pembina ialah corak pewarisan yang paling biasa digunakan dalam JavaScript. Menggunakan pendekatan ini, setiap contoh mempunyai sifatnya sendiri, manakala kaedah daripada prototaip boleh dikongsi. Tetapi kelemahan pendekatan ini ialah tidak kira apa keadaannya, pembina kelas super akan dipanggil dua kali. Sekali apabila mencipta prototaip subkelas dan masa lain di dalam pembina subkelas. Bagaimana untuk menyelesaikan masalah ini?

4. Warisan gabungan Parasit

Prototaip SubType tidak perlu menjadi contoh SuperType, ia hanya perlu objek biasa yang prototaip pembinanya ialah prototaip SuperType. Begini cara Douglas Crockford melakukannya:

function obejct(o){
  function F(){};
  F.prototype = o;
  return new F();
}

Malah, ini adalah pelaksanaan Object.create dalam ES5. Kemudian kita boleh mengubah suai pilihan ketiga dalam artikel ini:

function inheritPrototype(subType,superType){
  var prototype = object(superType.prototype);
  prototype.constructor = subType;
  subType.prototype = prototype;
}
function SuperType(name){
  this.name = name;
  this.colors = {"red","blue","green"}
}
SuperType.prototype.sayName = function(){
  //code
}
function SubType(name,age){
  SuperType.call(this,name); 
  this.age = age;
}
inheritPrototype(SubType,SuperType);
var instance = new SubTYpe();

Malah, pewarisan gabungan parasit sudah menjadi mekanisme pelaksanaan pewarisan yang sangat baik, yang cukup untuk kegunaan harian. Bagaimana jika kita mengemukakan keperluan yang lebih tinggi: Sebagai contoh, bagaimana untuk memanggil kaedah kelas induk dalam subkelas?

5.pelaksanaan perpustakaan warisan mudah

Melihat pada kod yang sukar difahami, saya menolak pada mulanya, tetapi setelah mendalami, saya menyedari bahawa orang yang hebat adalah orang yang hebat, dan idea yang halus ada di mana-mana. Saya mempunyai ulasan terperinci untuk setiap baris kod. Jika anda ingin mengetahui butirannya, pastikan anda mengkajinya secara terperinci dan membaca setiap baris. Saya rasa bahagian yang paling indah dalam pelaksanaan ini adalah untuk menulis semula kaedah kelas induk atas permintaan Dalam objek contoh, kaedah dengan nama yang sama kelas induk boleh dipanggil melalui _super, serupa dengan pelaksanaan Java.

(function(){
  //initializing用于控制类的初始化，非常巧妙，请留意下文中使用技巧
  //fnTest返回一个正则比表达式，用于检测函数中是否含有_super，这样就可以按需重写，提高效率。当然浏览器如果不支持的话就返回一个通用正则表达式
  var initializing = false,fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
  //所有类的基类Class,这里的this一般是window对象
  this.Class = function(){};
  //对基类添加extend方法，用于从基类继承
  Class.extend = function(prop){
    //保存当前类的原型
    var _super = this.prototype;
    //创建当前类的对象，用于赋值给子类的prototype，这里非常巧妙的使用父类实例作为子类的原型，而且避免了父类的初始化(通过闭包作用域的initializing控制)
    initializing = true;
    var prototype = new this();   
    initializing = false;
    //将参数prop中赋值到prototype中，这里的prop中一般是包括init函数和其他函数的对象
    for(var name in prop){
      //对应重名函数，需要特殊处理，处理后可以在子函数中使用this._super()调用父类同名构造函数, 这里的fnTest很巧妙:只有子类中含有_super字样时才处理从写以提高效率
      prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name])?
       (function(name,fn){
        return function(){
          //_super在这里是我们的关键字，需要暂时存储一下
          var tmp = this._super; 
          //这里就可以通过this._super调用父类的构造函数了       
          this._super = _super[name];
          //调用子类函数 
          fn.apply(this,arguments);
          //复原_super，如果tmp为空就不需要复原了
          tmp && (this._super = tmp);
        }
       })(name,prop[name]) : prop[name];
    }
    //当new一个对象时，实际上是调用该类原型上的init方法,注意通过new调用时传递的参数必须和init函数的参数一一对应
    function Class(){
      if(!initializing && this.init){
        this.init.apply(this,arguments);  
      }
    }    
    //给子类设置原型
    Class.prototype = prototype;
    //给子类设置构造函数
    Class.prototype.constructor = Class;
    //设置子类的extend方法，使得子类也可以通过extend方法被继承
    Class.extend = arguments.callee;
    return Class;
  }
})();

Dengan menggunakan pustaka warisan mudah, kami boleh melaksanakan warisan dengan cara yang sangat mudah Adakah anda mendapati ia seperti warisan bahasa yang ditaip dengan kuat?

var Human = Class.extend({
 init: function(age,name){
  this.age = age;
  this.name = name;
 },
 say: function(){
  console.log("I am a human");
 }
});
var Man = Human.extend({
  init: function(age,name,height){
    this._super(age,name);
    this.height = height;
  }, 
  say: function(){
    this._super();
    console.log("I am a man"); 
  }
});
var man = new Man(21,'bob','191');
man.say();

Terangkan mekanisme pewarisan Javascript dan analisis kod sumber warisan mudah daripada yang lebih cetek kepada yang lebih mendalam Saya harap perkongsian artikel ini dapat membantu semua orang.