js類比類

標籤：

ECMAScript6已經支援了class，但之前版本都不支援類，但是可以通過一些方法來類比類。

js中的類，既是重點，也是痛點，很多時候都感覺模稜兩可。

首先強調一下js中很重要的3個知識點：this、prototype、constructor。

下面我們來總結一下定義(類比)類的幾種方法：

1.原廠模式

?

12345678910111213141516

function createObject(name,age){  var obj = new Object();  obj.name = name;  obj.age = age;  obj.getName = function(){    return this.name;  };  obj.getAge = function(){    return this.age;  }  return obj;}var obj2 = createObject("王五",19);console.log(obj2.getName());console.log(obj2.getAge());console.log(obj2.constructor);

原廠模式的方法建立對象，原廠模式可以根據接受的參數來建立一個包含必要資訊的對象，可以無限次數的調用這個方法，每次都返回一個包含2個屬性2個方法的對象。原廠模式解決了建立類似對象的問題，但沒有解決對象的識別問題，即不能確定一個對象的類別，統一為Object。

2.建構函式法

?

123456789101112131415161718192021222324

function Person(name,age,job){  this.name = name;  this.age = age;  this.job = job;} Person.prototype = {  constructor:Person,  getName:function(){    return this.name;  },  getAge:function(){    return this.age;  },  getJob:function(){    return this.job;  }} var p = new Person("二麻子",18,"worker");console.log(p.constructor);console.log(p.getName());console.log(p.getAge());console.log(p.getJob());

建構函式的方式雖然確定了對象的歸屬問題，能夠確定對象的類型，但建構函式中的方法需要在每個對象中都要重新建立一遍，導致一些效能問題。

3.原型模式

?

12345678910111213141516171819202122

function Person(){ }Person.prototype = {  constructor:Person,  name:"張三",  age:21,  job:"teacher",  getName:function(){    return this.name;  },  getJob:function(){    return this.job;  }} var p = new Person();console.log(p.getName()); //張三console.log(p.getJob()); //teachervar p2 = new Person();p2.name = "李四";console.log(p2.getName()); //李四

由執行個體代碼我們可以知道，對象執行個體可以訪問原型中的值，但不能重寫原型中的值，如果對象執行個體中定義了和原型重名的屬性，那麼該屬性就會屏蔽原型中的那個屬性，但並不會重寫。

4.封裝(暫且這麼叫吧)

?

123456789101112

var Dog = {  createDog:function(){    var dog = {};    dog.name = "汪汪";    dog.sayHello = function(){      console.log("Hello World!");    };    return dog;  }};var dog = Dog.createDog();dog.sayHello();

就是把代碼都封裝起來，將執行個體對象作為一個整體返回，有點類似於原廠模式。

js類比類