javascript之面向?qū)ο罂偨Y(jié)

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

摘要：之面向?qū)ο罂偨Y(jié)前言在中是沒有類的概念的，所以它的對(duì)象與基于類的語言中的對(duì)象不同。一理解對(duì)象張三上面通過構(gòu)造函數(shù)創(chuàng)建了一個(gè)對(duì)象，并為它添加了三個(gè)屬性。

JavaScript之面向?qū)ο罂偨Y(jié) 前言：在ECMAScript中是沒有類的概念的，所以它的對(duì)象與基于類的語言中的對(duì)象不同。ECMA-262把對(duì)象總結(jié)為：“無序?qū)傩缘募希鋵傩园局?、?duì)象或者函數(shù)”。 一、理解對(duì)象

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

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

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

ECMA對(duì)象的屬性有兩種：數(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ù)屬性：包含一個(gè)數(shù)據(jù)值的位置，可以再這個(gè)位置寫入和讀取值

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

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

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

[[Writeable]]：表示能否修改屬性，默認(rèn)為true

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

ps:要修改默認(rèn)的特性，必須使用Object.defineProperty

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

訪問器屬性也有4個(gè)特性：

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

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

[[Get]]：讀取屬性時(shí)調(diào)用的函數(shù)，默認(rèn)值為undefined

[[Set]]：寫入屬性時(shí)調(diào)用的函數(shù)，默認(rèn)值為undefined

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

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

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

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

優(yōu)點(diǎn)：不清楚
缺點(diǎn)：使用同一個(gè)接口，會(huì)產(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)點(diǎn)：解決了創(chuàng)建多個(gè)相似對(duì)象的問題
缺點(diǎn)：很明顯，你不知道創(chuàng)建的對(duì)象的類型是什么

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

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

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

創(chuàng)建一個(gè)新的對(duì)象

將構(gòu)造函數(shù)的this指向新的對(duì)象

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

返回新對(duì)象

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

4、原型模式

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

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

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

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

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

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

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

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

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

7、寄生構(gòu)造函數(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);

這個(gè)模式的一個(gè)適用場(chǎng)景是改寫原生的對(duì)象

8、使用es6

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