Heim  >  Artikel  >  Web-Frontend  >  Javascript objektorientiert – Kapselung

Javascript objektorientiert – Kapselung

高洛峰
高洛峰Original
2017-01-04 09:14:20793Durchsuche

Schritt 1: Erstellen Sie eine „Handyklasse“

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

Schritt 2: Betrachten Sie diese Klasse und welche privaten Attribute darin benötigt werden Ich möchte hier die Anzahl der Mobiltelefone definieren, die aus der Instanz stammen.

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

Eine Initialisierung eines Objekts, z. B. die Initialisierung von Attributen und Methoden, die jedes Mobiltelefon haben wird Der Konstruktor hier ist auch ein Abschluss, sodass auf count zugegriffen werden kann und der Wert von count für eine lange Zeit im Speicher gespeichert wird (solange eine Referenz vorhanden ist). 🎜>

Schritt 4: Gemeinsame Methoden:

Das heißt, eine Methode, die von allen Mobiltelefonobjekten verwendet werden kann, die instanziiert werden, hier sollte das Mobiltelefon dazu in der Lage sein Ändern Sie den Preis, die Farbe und die Größe und zeigen Sie auch die Größe, Farbe und den Preis an.
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; //手机索引,是第几台创建的手机手象
      }
})()

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

Schritt 5: Privilegierte Methode , muss es eine Methode geben, die auf die privaten Variablen der Klasse zugreifen kann. Wie viele Mobiltelefonobjekte aus der Instanz stammen
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
  }
 }
})()

Verwenden Sie zum Testen eine oben gekapselte Mobiltelefonklasse
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;
})()

Weitere Aspekte von Javascript Für Artikel zum Thema Objektkapselung beachten Sie bitte die chinesische PHP-Website!

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


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