DIV CSS 佈局教程網

相信大家對javascript中的面向對象寫法都不陌生，那還記得有幾種創建對象的寫法嗎？相信大家除了自己常寫的都有點模糊了，那接下來就由我來幫大家回憶回憶吧！

1. 構造函數模式

通過創建自定義的構造函數，來定義自定義對象類型的屬性和方法。

function cons(name,age){
 this.name = name;
 this.age = age;
 this.getMes = function(){
  console.log(`my name is ${this.name},this year ${this.age}`);
 }
}
var mesge = new cons('will',21);
mesge.getMes();

2. 工廠模式

該模式抽象了創建具體對象的過程，用函數來封裝以特定接口創建對象的細節

function cons(name,age){
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 obj.getMes = function(){
  console.log(`my name is ${this.name},this year ${this.age}`);
 }
 return obj;
}
var mesge = cons('will',21);
mesge.getMes();

3. 字面量模式

字面量可以用來創建單個對象，但如果要創建多個對象，會產生大量的重復代碼

var cons = {
 name: 'will',
 age : 21,
 getMes: function(){
  console.log(`my name is ${this.name},this year ${this.age}`);
 }
}
cons.getMes();

4. 原型模式

使用原型對象，可以讓所有實例共享它的屬性和方法

function cons(){
 cons.prototype.name = "will";
 cons.prototype.age = 21;
 cons.prototype.getMes = function(){
  console.log(`my name is ${this.name},this year ${this.age}`);
 }
}

var mesge = new cons();
mesge.getMes();

var mesge1 = new cons();
mesge1.getMes();
console.log(mesge.sayName == mesge1.sayName);//true

5. 組合模式

最常見的方式。構造函數模式用於定義實例屬性，而原型模式用於定義方法和共享的屬性，這種組合模式還支持向構造函數傳遞參數。實例對象都有自己的一份實例屬性的副本，同時又共享對方法的引用，最大限度地節省了內存。該模式是目前使用最廣泛、認同度最高的一種創建自定義對象的模式

function cons(name,age){
 this.name = name;
 this.age = age;
 this.friends = ["arr","all"];
}
cons.prototype = {
 getMes : function(){
  console.log(`my name is ${this.name},this year ${this.age}`);
 }
}
var mesge = new cons("will",21);
var mesge1 = new cons("jalo",21);
console.log(mesge.friends);
mesge.friends.push('wc'); //還可以操作數組哈O(∩_∩)O！
console.log(mesge.friends);
console.log(mesge1.friends);
mesge.getMes();
mesge1.getMes();
console.log(mesge.friends === mesge1.friends);
console.log(mesge.sayName === mesge1.sayName);

最後在告訴你個秘密，ES6引入了類（Class），讓對象的創建、繼承更加直觀了

// 定義類

class Cons{
 constructor(name,age){
  this.name = name;
  this.age = age;
 }
 getMes(){
  console.log(`hello ${this.name} !`);
 }
}
let mesge = new Cons('啦啦啦~',21);
mesge.getMes();

在上面的代碼片段裡，先是定義了一個Cons類，裡面還有一個constructor函數，這就是構造函數。而this關鍵字則代表實例對象。

而繼承可以通過extends關鍵字實現。

class Ctrn extends Cons{
 constructor(name,anu){

  super(name); //等同於super.constructor(x)
  this.anu = anu;
 }
 ingo(){
  console.log(`my name is ${this.name},this year ${this.anu}`);
 }
}
let ster = new Ctrn('will',21);
ster.ingo();
ster.getMes();

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持！