reka bentuk rangka kerja javascript dan kemahiran factory_javascript lain

Kemunculan kelas dan warisan dalam JavaScript menunjukkan bahawa JavaScript telah mencapai ambang pembangunan berskala besar Sebelum ECMAScript 4, ia cuba memperkenalkan kelas, modul dan perkara lain, tetapi disebabkan pengenalan yang terlalu banyak. ciri, JavaScript menjadi kucar-kacir yang mengakibatkan penolakan. Tetapi ia hanya melambatkan kelas kepada ES6 Setakat ini, JavaScript tidak mempunyai kelas sebenar. Walau bagaimanapun, kita boleh mensimulasikan kelas Sejak kebelakangan ini, kilang kelas telah menjadi ciri standard rangka kerja Bab ini akan memperkenalkan pelbagai pelaksanaan kelas untuk memudahkan semua orang memilih gaya yang mereka suka dalam rangka kerja mereka sendiri.

sokongan 1.javascript untuk kelas

Dalam bahasa lain, contoh kelas mesti dibuat melalui pembina baharu. Sebagai bahasa yang sengaja meniru Jawa. Terdapat operator baharu dalam JavaScript, dan semua fungsi boleh digunakan sebagai pembina. Pembina tidak berbeza daripada kaedah biasa. Untuk membina ekosistemnya yang berkembang pesat, seperti Node, Element, HTMLElement dan HTMLParagraphElement, penyemak imbas jelas menggunakan perhubungan warisan untuk memudahkan perkongsian beberapa kaedah atau atribut, jadi JavaScript meminjam mekanisme prototaip daripada bahasa lain. Prototaip wujud sebagai sifat objek khas pada setiap fungsi. Apabila fungsi menggunakan operator baharu untuk menghasilkan "anak" - "contoh", objek bernama contoh ini mempunyai semua ahli objek prototaip fungsi ini, dengan itu menyedari bahawa semua objek contoh berkongsi satu set kaedah atau sifat . Apa yang dipanggil "kelas" dalam JavaScript adalah untuk membezakan objek asli daripada "kelas" lain yang ditentukan dengan mengubah suai objek Prototaip ini. Dalam penyemak imbas, kelas nod diubah suai berdasarkan Object, manakala Element adalah berdasarkan Node, dan HTMLElement adalah berdasarkan Element.... Berbanding dengan perniagaan kerja kita, kita boleh mencipta kelas kita sendiri untuk mencapai penggunaan semula dan perkongsian.

  function A(){

  }
  A.prototype = {
    aa:"aa",
    method:function(){
    }
  };
  var a = new A;
  var b = new A;
  console.log(a.aa === b.aa);
  console.log(a.method === b.method)

Secara amnya, kami memanggil kaedah yang ditakrifkan pada prototaip sebagai kaedah prototaip, yang dikongsi oleh semua keadaan Ini adalah baik dan buruk dipanggil kaedah istimewa. Jika ia adalah atribut, ia dipanggil atribut istimewa. Setiap contoh daripada mereka mempunyai salinan dan tidak terjejas oleh satu sama lain. Oleh itu, kami biasanya meletakkan kaedah yang dikongsi untuk mengendalikan data dalam prototaip, dan meletakkan atribut peribadi dalam atribut istimewa. Tetapi jika anda meletakkannya di atas ini, ia masih boleh diakses sesuka hati, jadi letakkannya dalam skop badan fungsi. Pada ketika ini ia menjadi hak milik yang benar-benar peribadi.

  function A() {
    var count = 0;
    this.aa = "aa";
    this.method = function() {
      return count;
    }
    this.obj = {}
  }
  A.prototype = {
    aa:"aa",
    method:function(){

    }
  };
  var a = new A;
  var b = new A;
  console.log(a.aa === b.aa);//true 由于aa的值为基本类型，比较值
  console.log(a.obj === b.obj) //false 引用类型，每次进入函数体都要重新创建，因此都不一样。
  console.log(a.method === b.method); //false

Kaedah atau atribut istimewa hanya meliputi kaedah atau atribut prototaip, jadi selagi anda memadamkan kaedah istimewa, anda boleh mengakses kaedah atau atribut prototaip dengan nama yang sama.

  delete a.method;
  delete b.method;
  console.log(a.method === A.prototype.method);//true
  console.log(a.method === b.method); //true

Dalam bahasa Java, kedua-dua kaedah prototaip dan kaedah istimewa ialah atribut kaedah contoh. Terdapat juga sesuatu yang dipanggil kaedah kelas dan atribut kelas dalam Java. Mereka sangat mudah untuk mensimulasikan menggunakan JavaScript, hanya tentukan mereka secara langsung pada fungsi.

  A.method2 = function(){} //类方法
  var c = new A;
  console.log(c.method2); //undefined

Seterusnya, mari kita lihat pelaksanaan pewarisan Seperti yang dinyatakan di atas, apa sahaja yang terdapat pada Prototaip, contohnya akan mempunyai sesuatu, sama ada atribut ini ditambahkan kemudian atau keseluruhan Prototaip diganti. Jika kita menggantikan objek prototaip ini dengan prototaip kelas lain, maka ia boleh mendapatkan semua ahli prototaip kelas itu dengan mudah.

  function A() {};
  A.prototype = {
    aaa : 1
  }
  function B() {};
  B.prototype = A.prototype;
  var b = new B;
  console.log(b.aaa); //=> 1;
  A.prototype.bb = 2;
  console.log(b.bb) //=> 2;

Memandangkan ia merujuk kepada objek yang sama, ini bermakna apabila kita mengubah suai prototaip kelas A, ia adalah bersamaan dengan mengubah suai prototaip kelas B. Oleh itu, kita tidak boleh menetapkan objek kepada dua kelas. Terdapat dua cara untuk melakukan ini,

Kaedah 1: Tetapkan ahli prototaip kelas induk kepada prototaip subkelas satu demi satu hingga dalam
Kaedah 2 ialah: prototaip subkelas tidak diperoleh secara langsung daripada kelas induk Pertama, tetapkan prototaip kelas induk kepada fungsi, dan kemudian gunakan contoh fungsi ini sebagai prototaip subkelas.

Kaedah pertama, kita biasanya perlu melaksanakan kaedah seperti mixin, yang sesetengah buku memanggil warisan salinan. Kelebihannya ialah ia mudah dan langsung, tetapi kelemahannya ialah ia tidak boleh lulus instanceof verification. Kaedah lanjutan Prototype.js digunakan untuk melakukan ini.

  function extend (des, source) { //des = destination
    for (var property in source)
      des[property] = source[property];
    return des;
  }

Kaedah kedua ialah menggunakan otak anda pada prototaip, jadi ia dipanggil warisan prototaip. Di bawah ialah templat

  function A() {};
  A.prototype = {
    aa:function(){
      alert(1)
    }
  }
  function bridge() {

  };
  bridge.prototype = A.prototype;

  function B() {}
  B.prototype = new bridge();

  var a = new A;
  var b = new B;

  console.log(a == b) //false 证明成功分开原型
  console.log(A.prototype == B.prototype) //true 子类共享父类的原型方法
  console.log(a.aa === b.aa); //为父类动态添加新的方法
  A.prototype.bb = function () {
    alert(2)
  }
  //true，继承父类的方法
  B.prototype.cc = function (){
    alert(3)
  }
  //false 父类未必有子类的new实例
  console.log(a.cc === b.cc)
  //并且它能够正常通过javascript自带的验证机制instanceof
  console.log(b instanceof A) ;//true
  console.log(b instanceof B) ; //true

Kaedah 2 boleh lulus pengesahan instanceof es5 mempunyai kaedah terbina dalam ini untuk melaksanakan warisan prototaip Ia adalah Object.create Jika parameter kedua tidak dipertimbangkan, ia lebih kurang sama dengan kod berikut.

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

Kaedah di atas memerlukan penghantaran dalam prototaip kelas induk sebagai parameter, dan kemudian mengembalikan prototaip subkelas

Walau bagaimanapun, kami masih terlepas sesuatu - subkelas bukan sahaja mewarisi warisan kelas induk, tetapi juga mempunyai perkara tersendiri Selain itu, warisan prototaip tidak membenarkan subkelas mewarisi ahli dan ahli istimewa kelas induk. . Kita perlu menambah ini secara manual, seperti ahli kelas, kita boleh menggunakan kaedah lanjutan di atas, dan ahli istimewa boleh dilaksanakan dalam pembina subkelas melalui apply.

  function inherit(init, Parent, proto){
    function Son(){
      Parent.apply(this, argument); //先继承父类的特权成员
      init.apply(this, argument); //在执行自己的构造器
    }
  }
  //由于Object.create是我们伪造的，因此避免使用第二个参数
  Son.prototype = Object.create(Parent.prototype,{});
  Son.prototype.toString = Parent.prototype.toString; //处理IEbug
  Son.prototype.valueOf = Parent.prototype.valueOf; //处理IEbug
  Son.prototype.constructor = Son; //确保构造器正常指向，而不是Object
  extend(Son, proto) ;//添加子类的特有的原型成员
  return Son;

下面，做一组实验，测试下实例的回溯机制。当我们访问对象的一个属性，那么他先寻找其特权成员，如果有同名就返回，没有就找原型，再没有，就找父类的原型...我们尝试将它的原型临时修改下，看它的属性会变成那个。

  function A(){

  }
  A.prototype = {
    aa:1
  }
  var a = new A;
  console.log(a.aa) ; //=>1

  //将它的所有原型都替换掉
  A.prototype = {
    aa:2
  }
  console.log(a.aa); //=>1

  //于是我们想到每个实例都有一个constructor方法，指向其构造器
  //而构造器上面正好有我们的原型，javascript引擎是不是通过该路线回溯属性呢
  function B(){

  }
  B.prototype = {
    aa:3
  }
  a.constructor = B;
  console.log(a.aa) //1 表示不受影响

因此类的实例肯定通过另一条通道进行回溯，翻看ecma规范可知每一个对象都有一个内部属性[[prototype]],它保存这我们new它时的构造器所引用的Prototype对象。在标准浏览器与IE11里，它暴露了一个叫__proto__属性来访问它。因此，只要不动__proto__上面的代码怎么动，a.aa始终坚定不毅的返回1.

再看一下，new时操作发生了什么。

1.创建了一个空对象 instance
2.instance.__proto__ = intanceClass.prototype
3.将构造函数里面的this = instance
4.执行构造函数里的代码
5.判定有没有返回值，没有返回值就返回默认值为undefined,如果返回值为复合数据类型，则直接返回，否则返回this
于是有了下面的结果。

  function A(){
    console.log(this.__proto__.aa); //1
    this.aa = 2
  }
  A.prototype = {aa:1}
  var a = new A;
  console.log(a.aa)
  a.__proto__ = {
    aa:3
  }
  console.log(a.aa) //=>2
  delete a. aa; //删除特权属性，暴露原型链上的同名属性
  console.log(a.aa) //=>3

有了__proto__，我们可以将原型设计继承设计得更简单，我们还是拿上面的例子改一改，进行试验

  function A() {}
  A.prototype = {
    aa:1
  }
  function bridge() {}
  bridge.prototype = A.prototype;

  function B(){}
  B.prototype = new bridge();
  B.prototype.constructor = B;
  var b = new B;
  B.prototype.cc = function(){
    alert(3)
  }
  //String.prototype === new String().__proto__ => true
  console.log(B.prototype.__proto__ === A.prototype) //true
  console.log(b.__proto__ == B.prototype); //true 
  console.log(b.__proto__.__proto__ === A.prototype); //true 得到父类的原型对象

因为b.__proto__.constructor为B，而B的原型是从bridge中得来的，而bride.prototype = A.prototype,反过来，我们在定义时，B.prototype.__proto__ = A.prototype,就能轻松实现两个类的继承.

__proto__属性已经加入es6,因此可以通过防止大胆的使用

2.各种类工厂的实现。

上节我们演示了各种继承方式的实现，但都很凌乱。我们希望提供一个专门的方法，只要用户传入相应的参数，或按照一定简单格式就能创建一个类。特别是子类。

由于主流框架的类工厂太依赖他们庞杂的工具函数，而一个精巧的类工厂也不过百行左右

相当精巧的库，P.js

https://github.com/jiayi2/pjs

使用版：https://github.com/jiayi2/factoryjs

这是一个相当精巧的库，尤其调用父类的同名方法时，它直接将父类的原型抛在你面前，连_super也省了。

  var P = (function(prototype, ownProperty, undefined) {
 return function P(_superclass /* = Object */, definition) {
  // handle the case where no superclass is given
  if (definition === undefined) {
   definition = _superclass;
   _superclass = Object;
  }

  // C is the class to be returned.
  //
  // When called, creates and initializes an instance of C, unless
  // `this` is already an instance of C, then just initializes `this`;
  // either way, returns the instance of C that was initialized.
  //
  // TODO: the Chrome inspector shows all created objects as `C`
  //    rather than `Object`. Setting the .name property seems to
  //    have no effect. Is there a way to override this behavior?
  function C() {
   var self = this instanceof C ? this : new Bare;
   self.init.apply(self, arguments);
   return self;
  }

  // C.Bare is a class with a noop constructor. Its prototype will be
  // the same as C, so that instances of C.Bare are instances of C.
  // `new MyClass.Bare` then creates new instances of C without
  // calling .init().
  function Bare() {}
  C.Bare = Bare;

  // Extend the prototype chain: first use Bare to create an
  // uninitialized instance of the superclass, then set up Bare
  // to create instances of this class.
  var _super = Bare[prototype] = _superclass[prototype];
  var proto = Bare[prototype] = C[prototype] = C.p = new Bare;

  // pre-declaring the iteration variable for the loop below to save
  // a `var` keyword after minification
  var key;

  // set the constructor property on the prototype, for convenience
  proto.constructor = C;

  C.extend = function(def) { return P(C, def); }

  return (C.open = function(def) {
   if (typeof def === 'function') {
    // call the defining function with all the arguments you need
    // extensions captures the return value.
    def = def.call(C, proto, _super, C, _superclass);
   }

   // ...and extend it
   if (typeof def === 'object') {
    for (key in def) {
     if (ownProperty.call(def, key)) {
      proto[key] = def[key];
     }
    }
   }

   // if no init, assume we're inheriting from a non-Pjs class, so
   // default to using the superclass constructor.
   if (!('init' in proto)) proto.init = _superclass;

   return C;
  })(definition);
 }

 // as a minifier optimization, we've closured in a few helper functions
 // and the string 'prototype' (C[p] is much shorter than C.prototype)
})('prototype', ({}).hasOwnProperty);

我们尝试创建一个类：

  var Dog = P (function(proto, superProto){
    proto.init = function(name) { //构造函数
      this.name = name;
    }
    proto.move = function(meters){ //原型方法
      console.log(this.name + " moved " + meters + " m.")
    }
  });
  var a = new Dog("aaa")
  var b = new Dog("bbb"); //无实例变化
  a.move(1);
  b.move(2);

我们在现在的情况下，可以尝试创建更简洁的定义方式

  var Animal = P (function(proto, superProto){
    proto.init = function(name) { //构造函数
      this.name = name;
    }
    proto.move = function(meters){ //原型方法
      console.log(this.name + " moved " + meters + " m.")
    }
  });
  var a = new Animal("aaa")
  var b = new Animal("bbb"); //无实例变化
  a.move(1);
  b.move(2);
  //...............
  var Snake = P (Animal, function(snake, animal){
    snake.init = function(name, eyes){
      animal.init.call(this, arguments); //调运父类构造器
      this.eyes = 2;
    }
    snake.move = function() {
      console.log('slithering...');
      animal.move.call(this, 5); //调运父类同名方法
    }
  });
  var s = new Snake("snake", 1);
  s.move();
  console.log(s.name);
  console.log(s.eyes);

私有属性演示，由于放在函数体内集中定义，因此安全可靠！

  var Cobra = P (Snake, function(cobra){
    var age = 1;//私有属性
    //这里还可以编写私有方法
    cobra.glow = function(){ //长大
      return age++;
    }
  });
  var c = new Cobra("cobra");
  console.log(c.glow()); //1
  console.log(c.glow()); //2
  console.log(c.glow()); //3

以上所述就是本文的全部内容了，希望大家能够喜欢。