javascript之面向對象總結

taowen 發(fā)布于2019-08-22 15:56 / 1968人閱讀

摘要：之面向對象總結前言在中是沒有類的概念的，所以它的對象與基于類的語言中的對象不同。一理解對象張三上面通過構造函數(shù)創(chuàng)建了一個對象，并為它添加了三個屬性。

JavaScript之面向對象總結 前言：在ECMAScript中是沒有類的概念的，所以它的對象與基于類的語言中的對象不同。ECMA-262把對象總結為：“無序屬性的集合，其屬性包含基本值、對象或者函數(shù)”。 一、理解對象

var person = new Object();
person.name = "張三";
person.age = 15;

person.say = function(){
    alert("hello");
}

上面通過Object構造函數(shù)創(chuàng)建了一個對象，并為它添加了三個屬性。

ECMA對象的屬性有兩種：數(shù)據(jù)屬性和訪問器屬性。

var person = {
    name: "聶赫留朵夫", // 數(shù)據(jù)屬性
    age: 25
}
Object.defineProperty(person, "year", { // 訪問器屬性
    get: function(){
        return 1922;
    },
    set: function(value){
        this.age = 25 + value;
    }
})

數(shù)據(jù)屬性：包含一個數(shù)據(jù)值的位置，可以再這個位置寫入和讀取值

數(shù)據(jù)屬性有4個描述其行為的特性：

[[Configurable]]：表示能否通過delete刪除屬性從而重新定義屬性，默認為true

[[Enumerable]]：表示能否通過for-in循環(huán)返回屬性，默認為true

[[Writeable]]：表示能否修改屬性，默認為true

[[Value]]：包含這個屬性的數(shù)據(jù)值，默認值為undefined

ps:要修改默認的特性，必須使用Object.defineProperty

訪問器屬性：包含一對兒getter和setter函數(shù)，不包含數(shù)據(jù)值

訪問器屬性也有4個特性：

[[Configurable]]：表示能否通過delete刪除屬性從而重新定義屬性，默認為true

[[Enumerable]]：表示能否通過for-in循環(huán)返回屬性，默認為true

[[Get]]：讀取屬性時調用的函數(shù)，默認值為undefined

[[Set]]：寫入屬性時調用的函數(shù)，默認值為undefined

訪問器屬性不能直接定義，必須通過Object.defineProperty來定義

讀取屬性的特性，通過Object.getOwnPropertyDescriptor方法 二、創(chuàng)建對象

1、通過字面量或者Object構造函數(shù)

var person = {
    name: "尤瓦爾?赫拉利"
}
var car = new Object();
car.name = "法拉利"

優(yōu)點：不清楚
缺點：使用同一個接口，會產(chǎn)生大量的代碼

2、工廠模式

function createPerson(name, age){
    var o = new Object();
    o.name = name;
    o.age = age;
    return o;
}
var p1 = createPerson("方鴻漸", 14);
var p2 = createPerson("墨帶", 20);

優(yōu)點：解決了創(chuàng)建多個相似對象的問題
缺點：很明顯，你不知道創(chuàng)建的對象的類型是什么

3、構造函數(shù)模式

function Person(name, age){
    this.name = name;
    this.age = age;
}
var person = new Person("智人", 25);

創(chuàng)建實例，必須要通過new關鍵字，new調用經(jīng)歷的步驟：

創(chuàng)建一個新的對象

將構造函數(shù)的this指向新的對象

執(zhí)行構造函數(shù)中的代碼

返回新對象

優(yōu)點：可以將每個實例都標識為一種特定的類型
缺點：每個方法都要在實例上重新創(chuàng)建一遍

4、原型模式

function Person(){}
Person.prototype.name = "凱撒大帝";
Person.prototype.age = 500;

var p1 = new Person();
console.log(p1.name); // 凱撒大帝
var p2 = new Person();

特點：所有的屬性都是被很多實例共享的，但這個也是一個缺點。這個共享對于函數(shù)來說挺好，對于基本類型來說也還可以（實例上添加的同名屬性可以覆蓋原型上的），但是對于引用類型來說就是比較突出的問題了（修改一個，其余的也會被修改）。另外，這個模式省略了為構造函數(shù)傳參的方便。

5、構造函數(shù)模式和原型模式組合使用

function Person(name, age){
    this.name = name;
    this.age = age;
}
Person.prototype.getName = function(){
    alert(this.name);
}
var p = new Person("貝多芬", 200);

這種是比較通用的一種方式，結合了構造函數(shù)模式和原型模式的優(yōu)點，但是這種方式可能對于寫OO語言的人來說，有點兒不友好，畢竟這種寫法有點兒獨特。

6、動態(tài)原型模式

function Person(name, age){
    this.name = name;
    this.age = age;
    if (typeOf this.sayName !== "function") {
        Person.prototype.sayName = function(){
            alert(this.name);
        }
    }
}

這種模式的好處是把所有的屬性全部都封裝到一個函數(shù)里面，但是會對函數(shù)做一個檢測，沒有的情況下才會去創(chuàng)建

7、寄生構造函數(shù)模式

function Person(name, age){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.printName = function(){
        console.log(this.name);
    }
    return o;
}
var p = new Person("貝多芬", 55);

這個模式的一個適用場景是改寫原生的對象

8、使用es6

class Person {
    constructor(name){
        this.name = name;
    }
    printName(){
        console.log(this.name);
    }
}
const p = new Person("巴菲特")

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

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

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

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

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

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

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

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

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

AaronYuan 2019-08-20 18:55 評論0 收藏0
JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統(tǒng)的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續(xù)了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數(shù) 學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環(huán)大法了~ 《小分享》JavaScript中數(shù)組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
面向對象之三個基本特征（javaScript）

摘要：對象是公布其接口。節(jié)選自百度百科我對于封裝的理解，可能還有一個步驟就是抽離，首先你要清楚在一個對代碼中你應該抽離那些屬性方法，有了這些為基礎才能更好的做好封裝。節(jié)選自百度百科因為是沒有重載的概念的所以要自己編寫邏輯完成重載。 1. 前言 2. 封裝 3. 繼承 4. 多態(tài) 5. 總結 1. 前言了解過面向對象的同學應該都知道，面向對象三個基本特征是：封裝、繼承、多態(tài)，但是對于這三...

IamDLY 2019-08-23 15:23 評論0 收藏0