首頁 > web前端 > js教程 > JavaScript建立類別常用方法總結

JavaScript建立類別常用方法總結

巴扎黑
發布: 2017-08-16 11:36:58
原創
1143 人瀏覽過
本文實例講述了JS常見創建類別的方法。分享給大家供大家參考,具體如下:
Javascript是一種基於物件的語言,你遇到的所有東西幾乎都是物件。但是,它又不是真正的物件導向程式設計(OOP)語言,因為它的語法中沒有Class。 (不過,ES6引進了Class這個概念​​,作為物件的範本。透過class關鍵字,可以定義類別。ES6入門:http://es6.ruanyifeng.com/)。
但是在專案開發中,常用到JS物件導向開發,這就需要我們去用JS創建類,從而去實例化一些物件。接下來我們介紹一下在JS中創建類別的幾種方式:
1.工廠方式:
//通过工厂方式创建对象,先定义一个工厂方法
function createObj(){
  var obj = new Object();
  obj.name="xxx";
  obj.say=function(){
    alert("我是xxx");
  }
  return obj;
}
//调用工厂方法创建对象:
var obj1 = createObj();
//也可以用这种形式
function createObj(){
  var obj = {}; //这样生成对象
  obj.name="xxx";
  obj.say=function(){
    alert("我是xxx");
  }
  return obj;
}
var obj1 = createObj();
登入後複製

這種方式的問題是每一次透過工廠方法去創建一個對象,這個物件的屬性name和方法say都必須重新創建一次,浪費記憶體。
2.建構器方式:
//创建一个构造器,构造函数首字母大写
function Obj(){
  this.name="xxx";
  this.say=function(){
    alert("我是xxx");
  };
}
//利用构造器,通过new关键字生成对象
var obj1=new Obj();
登入後複製

這是最基本的方式,但是也存在和工廠方式一樣的毛病。
3.原型方式:
//用空函数创建一个类
function Obj(){
}
//在类的原型链上添加属性和方法
Obj.prototype.name="xxx";
Obj.prototype.say=function(){
  alert("我是xxx");
}
//生成对象
var obj1=new Obj();
登入後複製

這個方式的缺點是,當有引用屬性時,改變一個物件的這個屬性也會改變其他物件的這個屬性。因為一個引用屬性,都是指向的同一個地方。
4.原型/建構聯合方式
//用构造函数定义对象的非函数属性
function Obj(name){
  this.name=name;
  this.arr=new Array('a','b');
}
//用原型方式定义对象的方法
Obj.prototype.say=function(){
  alert("我是xxx");
}
//生成对象
var obj1 = new Obj('xxx');
登入後複製

這種是目前用的最多的創建類別和物件的方式,將方法和屬性用不同的方式封裝。
5.動態原型方式
//动态原型方式和原型/构造混合方式的原理相似,唯一的区别就是赋予对象方法的位置
function Person(name, sex) {
  this.name = name;
  this.sex = sex;
  if (typeof this.say != "function") {
    Person.prototype.say = function () {
      alert(this.name);
    }
  }
}
var man =new Person ("凯撒", "男");
man.say();//凯撒
登入後複製

動態原型模式是將所有的資訊都封裝到建構函式中,建構函式中,只用say不存在的情況下,才會將它添加到原型中。這段程式碼只有在初次呼叫時才會執行。
實例化obj物件有三個步驟:
1. 建立obj物件:
obj=new Object();
登入後複製

2. 將obj的內部__proto__指向建構他的函數Obj的prototype,同時,obj.constructor= ==Obj.prototype.constructor,從而使得obj.constructor.prototype指向Obj.prototype(obj.constructor.prototype===A.prototype)。 obj.constructor.prototype與的內部_proto_是兩碼事,實例化物件時用的是_proto_,obj是沒有prototype屬性的,但是有內部的__proto__,透過__proto__來取得原型鏈上的原型屬性和原型方法。
3. 將obj當作this去呼叫建構子Obj,從而設定成員(即物件屬性和物件方法)並初始化。
當這3步完成,這個obj物件就與建構子Obj再無聯繫,這個時候即使建構子Obj再加任何成員,都不再影響已經實例化的obj物件了。

以上是JavaScript建立類別常用方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板