JS對(duì)象---奧義：真の由淺入深

qianfeng 發(fā)布于2019-08-19 17:31 / 3481人閱讀

摘要：容易理解創(chuàng)建一個(gè)構(gòu)造函數(shù)并使用該函數(shù)和操作符初始化對(duì)象。被繼承的對(duì)象被稱(chēng)作原型，并且繼承的屬性可能通過(guò)構(gòu)造函數(shù)的對(duì)象找到。

This is my first blood!

第一次在segmentfault上寫(xiě)（chao）文章。

內(nèi)容提要：認(rèn)（wu）真（liao）的整理一下javascript對(duì)象的知識(shí)，人家還是菜鳥(niǎo)，必須要搞懂啊。

PS：
1.真的菜，所以看到文章的同學(xué)，推薦采用隨緣閱讀法，請(qǐng)自行忽略里面充斥大量的，哦不，巨量的錯(cuò)誤、bug。
2.如果您愿意指出我的錯(cuò)誤，那最好不過(guò)了，寡人謝謝?。▍⒁?jiàn)文章中的‘求大腿’的字樣）
3.不過(guò)，如果你指望以此契機(jī)，期待一場(chǎng)與程序媛之間的轟轟烈烈的深刻的交互，那您還是繞道而行吧。哥真的是漢子，不是童瑤。
4.說(shuō)是筆記，大部分的代碼都是copy的，不爽的同學(xué)，直接看參考資料吧。

一參考資料

1.MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects
2.文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object

二全都是對(duì)象

在 JavaScript 中，幾乎所有的東西都是對(duì)象。所有的原生類(lèi)型除了 null 與 undefined 之外都被當(dāng)作對(duì)象。它們可以被賦予屬性（某些類(lèi)型的被賦予的屬性不能被持久化），并且它們都有對(duì)象的全部特征。

三創(chuàng)建對(duì)象

兩種創(chuàng)建方式：

1.對(duì)象初始化器（Object Initializer）創(chuàng)建對(duì)象。（容易理解）
2.創(chuàng)建一個(gè)構(gòu)造函數(shù)并使用該函數(shù)和 new 操作符初始化對(duì)象。（容易裝逼）

容易理解的創(chuàng)建方式

模版：

    var obj = { property_1:   value_1,   // property_# may be an identifier...
                2:            value_2,   // or a number...
                // ...,
                "property n": value_n }; // or a string

實(shí)例：

var lolhero = new Object();
lolhero.basicSkill = "Q、W、E";
lolhero.bigSkill = "R only";
lolhero.commotSkill = "D&F";

//兩種訪(fǎng)問(wèn)方式
console.log(lolhero["basicSkill"]);//采用類(lèi)似關(guān)聯(lián)數(shù)組的方式訪(fǎng)問(wèn)
console.log(lolhero.basicSkill);//直接訪(fǎng)問(wèn)

容易裝逼的創(chuàng)建方式

使用構(gòu)造函數(shù)，需要兩步?。。?/p>

通過(guò)創(chuàng)建一個(gè)構(gòu)造函數(shù)來(lái)定義對(duì)象的類(lèi)型。首字母大寫(xiě)是非常普遍而且很恰當(dāng)?shù)膽T用法。

通過(guò) new 創(chuàng)建對(duì)象實(shí)例。

寫(xiě)的太好直接copy過(guò)來(lái)了

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

var Car = new Car("Eagle", "Talon TSi", 1993);
var kenscar = new Car("Nissan", "300ZX", 1992);
var vpgscar = new Car("Mazda", "Miata", 1990);

一個(gè)對(duì)象的屬性值可以是另一個(gè)對(duì)象。例如，假設(shè)你按如下方式定義了 person 對(duì)象:

function Person(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}

然后按如下方式創(chuàng)建了兩個(gè) person 實(shí)例:

    var rand = new Person("Rand McKinnon", 33, "M");
    var ken = new Person("Ken Jones", 39, "M");

那么，你可以重寫(xiě) car 的定義以包含一個(gè)擁有它的 owner 屬性，如：

    function Car(make, model, year, owner) {
        this.make = make;
        this.model = model;
        this.year = year;
        this.owner = owner;
    }

你可以按如下方式創(chuàng)建新對(duì)象：

    var car1 = new Car("Eagle", "Talon TSi", 1993, rand);
    var car2 = new Car("Nissan", "300ZX", 1992, ken);

注意在創(chuàng)建新對(duì)象時(shí)，上面的語(yǔ)句將 rand 和 ken 作為 owner 的參數(shù)值，而不是傳入字符串字面量或整數(shù)值。接下來(lái)你如果想找出 car2 的擁有者的姓名，你可以訪(fǎng)問(wèn)如下屬性：

car2.owner.name

注意你總是可以為之前定義的對(duì)象增加新的屬性。例如，語(yǔ)句

car1.color = "black";

為 car1 增加了 color 屬性，并將其值設(shè)為 "black." 然而，這并不影響其他的對(duì)象。想要為某個(gè)類(lèi)型的所有對(duì)象增加新屬性，你必須將屬性加入到 car 對(duì)象類(lèi)型的定義中。

PS:發(fā)現(xiàn)沒(méi)，雖然第二種創(chuàng)建對(duì)象的方式看起來(lái)不那么自然.
但是卻好用，容易移植，容易重新定義，容易復(fù)用。所以，還是裝逼好??！

Object.create 創(chuàng)建對(duì)象

感覺(jué)挺麻煩的，反正已經(jīng)有了其他創(chuàng)建方式，暫且不管他了。

（這玩意兒一般用的多嗎？多用來(lái)處理什么功能？求大腿）

四屬性 如果對(duì)象的屬性名千奇百怪怎么辦？

這樣也是允許的（太難為js了吧），有誰(shuí)這么{{BANNED}}的用各種類(lèi)型的屬性名，算了，{{BANNED}}總是有的。

    var myObj = new Object(),
    str = "myString",
    rand = Math.random(),
    obj = new Object();

    myObj.type              = "Dot syntax";
    myObj["date created"]   = "String with space";
    myObj[str]              = "String value";
    myObj[rand]             = "Random Number";
    myObj[obj]              = "Object";
    myObj[""]               = "Even an empty string";

    console.log(myObj);

當(dāng)然了，屬性值，也可以是個(gè)變量

    var propertyName = "make";
    myCar[propertyName] = "Ford";

    propertyName = "model";
    myCar[propertyName] = "Mustang";

對(duì)象的屬性太多，用for(var i in obj){}來(lái)遍歷它

hasOwnProperty: 如果 object 具有指定名稱(chēng)的屬性，那么JavaScript中hasOwnProperty函數(shù)方法返回 true；反之則返回 false。此方法無(wú)法檢查該對(duì)象的原型鏈中是否具有該屬性；該屬性必須是對(duì)象本身的一個(gè)成員。

    function showProps(obj,objName) {
        var result = "";
        for(var i in obj){
            if( obj.hasOwnProperty(i) ) {
                result += objName+"."+i+" = "+obj[i]+"
";
            }
        }
        return result;
    }

    console.log(showProps(myObj,"myobj"));

從 ECMAScript 5 開(kāi)始，有三種原生的方法用于列出或枚舉對(duì)象的屬性：

for...in 循環(huán)
該方法依次訪(fǎng)問(wèn)一個(gè)對(duì)象及其原型鏈中所有可枚舉的屬性。

Object.keys(o)
該方法返回一個(gè)對(duì)象 o 自身包含（不包括原型中）的所有屬性的名稱(chēng)的數(shù)組。

Object.getOwnPropertyNames(o)
該方法返回一個(gè)數(shù)組，它包含了對(duì)象 o 所有擁有的屬性（無(wú)論是否可枚舉）的名稱(chēng)。

在 ECMAScript 5 中，沒(méi)有原生的方法枚舉一個(gè)對(duì)象的所有屬性。然而，可以通過(guò)以下函數(shù)完成：

    function listAllProperties(o){
        var objectToInspect;
        var result = [];

        for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)){
            result = result.concat(Object.getOwnPropertyNames(objectToInspect));
        }

        return result;
    }

上面的這個(gè)方法，可以訪(fǎng)問(wèn)所有的可枚舉和不可枚舉的屬性。

PS：對(duì)象里面的屬性有可枚舉和不可枚舉兩種。（不甚理解什么是不可枚舉，求大腿！）

五繼承

所有的 JavaScript 對(duì)象繼承于至少一個(gè)對(duì)象。被繼承的對(duì)象被稱(chēng)作原型，并且繼承的屬性可能通過(guò)構(gòu)造函數(shù)的 prototype 對(duì)象找到。

六為對(duì)象類(lèi)型定義屬性

你可以通過(guò) prototype 屬性為之前定義的對(duì)象類(lèi)型增加屬性。這為該類(lèi)型的所有對(duì)象，而不是僅僅一個(gè)對(duì)象增加了一個(gè)屬性。下面的代碼為所有類(lèi)型為 car 的對(duì)象增加了 color 屬性，然后為對(duì)象 car1 的 color 屬性賦值：

Car.prototype.color = null;
car1.color = "black";

七如果我想給對(duì)象添加方法怎么辦？

兩種方式：

objectName.methodname = function_name;

var myObj = {
    myMethod: function(params) {
        // ...do something
    }
};

前面創(chuàng)建對(duì)象的完整寫(xiě)法：

    function Car(make, model, year, owner) {

        //注意displayCar函數(shù)里面this和外面的this指向的是同一個(gè)car對(duì)象！
        function displayCar() {
            console.log("this2",this);
            var result = "A Beautiful " + this.year + " "
            + this.make + " " + this.model;
            return result;
        }

        this.make = make;
        this.model = model;
        this.year = year;
        this.owner = owner;
        console.log("this1",this);
        this.displayCar = displayCar;
    }

    var car = new Car("福特汽車(chē)","奔馳",1234,"maomaoliang");
    console.log(car.displayCar());

或者

function Car(make, model, year, owner) {
    this.make = make;
    this.model = model;
    this.year = year;
    this.owner = owner;
    this.displayCar = function(){
        //...
    };
}

八刪除屬性

用 delete 操作符刪除一個(gè)不是繼承而來(lái)的屬性。下面的例子說(shuō)明如何刪除一個(gè)屬性：

//Creates a new object, myobj, with two properties, a and b.
var myobj = new Object;
myobj.a = 5;
myobj.b = 12;

//Removes the a property, leaving myobj with only the b property.
delete myobj.a;

九比較對(duì)象

在 JavaScript 中 objects 是一個(gè)引用類(lèi)型。將兩個(gè)引用相同的對(duì)象想比較會(huì)返回 true; 將兩個(gè)方法和屬性相同的對(duì)象相比較，會(huì)返回 false;

// fruit object reference variable
var fruit = {name: "apple"};

// fruitbear object reference variable
var fruitbear = {name: "apple"};

fruit == fruitbear // return false

fruit === fruitbear // return false

// fruit object reference variable
var fruit = {name: "apple"};

// fruitbear object reference variable
var fruitbear = fruit;  // assign fruit object reference to fruitbear object reference variable

// here fruit and fruitbear pointing to same object called fruit
fruit == fruitbear // return true

// here fruit and fruitbear pointing to same object called fruit
fruit === fruitbear // return true

意思就是,用的時(shí)候要比較引用，而不是比較全部咯？求大腿