javascript中的面向對象

SKYZACK 發布于2019-08-20 15:26 / 502人閱讀

摘要：構造函數模式用于定義實例屬性，而原型模式用于定義方法和共享的屬性，這種組合模式還支持向構造函數傳遞參數。實例對象都有自己的一份實例屬性的副本，同時又共享對方法的引用，最大限度地節省了內存。而關鍵字則代表實例對象。

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

好了，這次的分享就到這了，喜歡的朋友可以收藏哦（關注我也是可以滴O(∩_∩)O）！！！

GPU云服務器云服務器 javascript 面向對象 javascript面向對象 javascript面向對象編程 javascript面向對象編程指南

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82244.html

SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

李昌杰 2019-08-16 10:40 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

Lyux 2019-06-28 13:32 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

AaronYuan 2019-08-20 18:55 評論0 收藏0
面向對象的 JavaScript

摘要：是完全的面向對象語言，它們通過類的形式組織函數和變量，使之不能脫離對象存在。而在基于原型的面向對象方式中，對象則是依靠構造器利用原型構造出來的。 JavaScript 函數式腳本語言特性以及其看似隨意的編寫風格，導致長期以來人們對這一門語言的誤解，即認為 JavaScript 不是一門面向對象的語言，或者只是部分具備一些面向對象的特征。本文將回歸面向對象本意，從對語言感悟的角度闡述為什...

novo 2019-08-21 10:49 評論0 收藏0
JS對象(1)重新認識面向對象

摘要：對象重新認識面向對象面向對象從設計模式上看，對象是計算機抽象現實世界的一種方式。除了字面式聲明方式之外，允許通過構造器創建對象。每個構造器實際上是一個函數對象該函數對象含有一個屬性用于實現基于原型的繼承和共享屬性。 title: JS對象(1)重新認識面向對象 date: 2016-10-05 tags: JavaScript 0x00 面向對象從設計模式上看，對象是...

superw 2019-08-21 11:17 評論0 收藏0
javascript面向對象之“多態”

摘要：之前，本質上不能算是一門面向對象的編程語言，因為它對于封裝繼承多態這些面向對象語言的特點并沒有在語言層面上提供原生的支持。所以在中出現了等關鍵字，解決了面向對象中出現了問題。 ES6之前，javascript本質上不能算是一門面向對象的編程語言，因為它對于封裝、繼承、多態這些面向對象語言的特點并沒有在語言層面上提供原生的支持。但是，它引入了原型(prototype)的概念，可以讓我們以...

JerryWangSAP 2019-08-23 14:11 評論0 收藏0