DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript技巧 >> javascript中的面向對象
javascript中的面向對象
編輯:JavaScript技巧     

相信大家對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();

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved