Heim  >  Artikel  >  Web-Frontend  >  Ausführliche Erläuterung der Funktionscodebeispiele für die Javascript-Kapselung von Mobiltelefonklassen

Ausführliche Erläuterung der Funktionscodebeispiele für die Javascript-Kapselung von Mobiltelefonklassen

伊谢尔伦
伊谢尔伦Original
2017-07-22 13:15:411841Durchsuche

Schritt 1: Erstellen Sie eine „Handyklasse“


var MobilePhone = (function(){
    …………
})()

Schritt 2: Betrachten Sie diese Klasse, hier Private Attribute dieser Klassen werden benötigt. Was ich hier definieren möchte, ist die Anzahl der Mobiltelefone, die Instanzen haben


var MobilePhone = (function(){
 //私有属性
 var count = 0; //代表手机的数量
})()

Schritt 3: Erstellen Sie eine Konstruktor, dh eine Initialisierung des neuen Objekts, das während der Instanz generiert wird, wie z. B. die Initialisierung von Attributen und Methoden. In diesem Beispiel verfügt jedes Mobiltelefon über Farb-, Größen- und Preisattribute ein Abschluss, sodass auf count zugegriffen werden kann und der Wert von count für lange Zeit im Speicher gespeichert wird (solange eine Referenz vorhanden ist)


var MobilePhone = (function(){
 //私有属性
 var count = 0; //代表手机的数量 
     //构造函数
     var creatphone = function(color,size,price){
         count++;
         this._color = color; //手机的颜色
         this._size = size; //手机的大小
         this._price = price; //手机的价格
         this.index = count; //手机索引,是第几台创建的手机手象
      }
})()

Schritt 4: Gängige Methoden:

Dies ist eine Methode, die von allen instanziierten Mobiltelefonobjekten verwendet werden kann. Dabei sollte das Mobiltelefon in der Lage sein, den Preis, die Farbe usw. zu ändern. Größe anzeigen und auch Größe, Farbe und Preis anzeigen.

Die hier üblichen Methoden sollten im „Prototypobjekt“ platziert werden:

1 Alle von diesem Konstruktor instanziierten Objekte, also das erstellte Mobiltelefon, können das „Prototypobjekt“ verwenden. Methode in.

2. Wenn es im Konstruktor platziert wird, wird jedes Mal, wenn ein Mobiltelefonobjekt instanziiert wird, eine Reihe wiederholter Methoden generiert, die Speicher belegen.

3. „constructor“:creatphone Erklärung:

Weil creatphone.prototype ={...} den Verweis auf das vorherige Prototypobjekt ziemlich überschreibt. Um das Prototypobjekt mit dem Konstruktor zu verknüpfen, wird das Attribut „constructor“:creatphone gesetzt.


var MobilePhone = (function(){
 //私有属性
 var count = 0;//代表手机的数量
    //构造函数
     var creatphone = function(color,size,price){
        count++;
        this._color = color; //手机的颜色
        this._size = size; //手机的大小
        this._price = price; //手机的价格
        this.index = count; //手机索引,是第几台创建的手机手象
      }
 //公有方法,存放在原型对象中 
 creatphone.prototype = { 
      "constructor":creatphone,
      //获取手机颜色
  "getColor" : function(){
  return this._color; 
  },
      //设置手机颜色
  "setColor" : function(color){
  this._color = color;
  },
      //获取手机大小
  "getSize" : function(){
  return "width:"+this._size.width + " height:" + this._size.height; 
  },
      //设置手机大小
  "setSize" : function(size){
  this._size.width = size.width;
  this._size.height = size.height;
  },
      //获取手机价格
  "getPrice" : function(){
  return this._price;
  },
      //设置手机价格
  "setPrice" : function(price){
  this._price = price
  } 
 }
})()

Schritt 5: Privilegierte Methode, das heißt , muss es eine Methode geben, die auf die privaten Variablen der Klasse zugreifen kann. Es geht darum, wie viele Mobiltelefonobjekte aus der Instanz hervorgehen


var MobilePhone = (function(){
 //私有属性
 var count = 0;//代表手机的数量
 var index = 0;//代表手机的索引
     //构造函数
     var creatphone = function(color,size,price){
         count++;
         this._color = color; //手机的颜色
         this._size = size; //手机的大小
         this._price = price; //手机的价格
         this.index = count; //手机索引,是第几台创建的手机手象
       }
     //公有方法,存放在原型对象中
 creatphone.prototype = {
  "constructor":creatphone,
  "getColor" : function(){
  return this._color; 
  },
  "setColor" : function(color){
  this._color = color;
  },
  "getSize" : function(){
  return "width:"+this._size.width + " height:" + this._size.height; 
  },
  "setSize" : function(size){
  this._size.width = size.width;
  this._size.height = size.height;
  },
  "getPrice" : function(){
  return this._price;
  },
  "setPrice" : function(price){
  this._price = price
  } 
 }
 //特权方法
 creatphone.get_count_index = function(){
  return count
 }
 return creatphone;
})()

Verwenden Sie zum Testen eine oben gekapselte Mobiltelefonklasse


var anycall = new MobilePhone(); //实例一个三星手机对象
var HTC = new MobilePhone(); //实例一个HTC手机对象
var Iphone4s = new MobilePhone(); //实例一个苹果4S手机对象
console.log("三星是第:"+anycall.index+"台"); //FF的控制台输出三星手机对象是第几台创建的,即索引;
console.log("HTC是第:"+HTC.index+"台"); //FF的控制台输出HTC手机对象是第几台创建的,即索引;
console.log("Iphone4s是第:"+Iphone4s.index+"台");  //FF的控制台输出个苹果4S手机对象是第几台创建的,即索引;
console.log("总共造出了"+MobilePhone.get_count_index()+"手机"); //FF的控制台输出总共创建了几台手机;
console.log(anycall.constructor === MobilePhone); //实例出来的对象,的原形象中的constructor,是否还指向MobilePhone

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Funktionscodebeispiele für die Javascript-Kapselung von Mobiltelefonklassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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