全面學(xué)習(xí)javascript中的對象

leo108 發(fā)布于2019-08-22 11:01 / 3164人閱讀

摘要：表示對象的父對象，直接繼承的對象。的目的是讓函數(shù)隱式的使用對象。內(nèi)置的構(gòu)造函數(shù)在中，有幾個內(nèi)置的構(gòu)造函數(shù)，可以直接拿來使用。如果返回的是一個對象，那么返回值為這個對象。

對象的基礎(chǔ) 對象的定義

對象是一組由若干個無序的鍵值對（key/value）組成的數(shù)據(jù)集合 ，在 javascript 中所有的數(shù)據(jù)都可以被視作對象。每一個鍵值對又可以叫做“成員（members）”。

對象（object）的創(chuàng)建（3種方式）

對象字面量（對象初始化器）

構(gòu)造函數(shù)

Object.create() es5的創(chuàng)建對象的方式，可以指定原型對象

//方式1
var me = {
    name: "qingzhui",
    age: 25
};

//方式2
var me = new Object();
me.name = "qingzhui";
me.age = 25;

//方式3
var me = Object.create(Object.prototype, {
    name: {
        value: "qingzhui",
        enumerable: true,
        wriable: true,
        configurable: true
    },
    age: {
        value: 25,
        enumerable: true,
        wriable: true,
        configurable: true
    }
});

鍵名（key），成員的名稱

鍵名，鍵值對中的 key，我們可以將之稱為成員的名稱。對象中所有的鍵名都是字符串，所有加不加引號都可以。必須要加引號的情況：如果_鍵名不是數(shù)字，又不符合標(biāo)識符的條件_，就必須加上引號。

var obj = {
    1: "name", // 數(shù)字可以不加引號
    "2name": "name2" // 不符合條件的，必須加引號
};

鍵名（key），屬性

鍵名，又可以稱作屬性（property）。它的鍵值_可以是任何數(shù)據(jù)類型，_如果它的值是一個函數(shù)的話，我們可以把這個屬性叫做方法（method）。

屬性的分類

屬性有兩種類型：數(shù)據(jù)屬性（data property）、訪問屬性（accessor property）。

數(shù)據(jù)屬性（data property）

除開訪問屬性（get/set）之外，都是數(shù)據(jù)屬性。

訪問屬性（accessor property）

訪問屬性又叫 geter/seter 屬性。它只有2種 getter property / setter property。

getter property 當(dāng)訪問一個對象屬性時，會隱式的調(diào)用一個函數(shù)，返回一個生成值。

setter property 當(dāng)賦值一個對象屬性時，會隱式的調(diào)用一個函數(shù)，返回一個生成值。

var me = {
    name: "qingzhui",
    _age: 26,
    get age(){
        return "您真的年齡是：" + _age;
    }, // 語法 get property_name(){ statement }
    set age(num){
        return _age = num + 2;
    } // 語法 property_name(parameter_name) { statement }
};

me.age = 28;

console.log(me.age); // "您真的年齡是：30"

根據(jù)屬性的所屬，可以把屬性分為兩種自身屬性（own property）、繼承屬性（inherited property）。

自身屬性（own property）

就是在對象自身定義的屬性，我們稱之為自身屬性。

繼承屬性（inherited property）

通過原型鏈（prototype chain），繼承自父對象、或是祖先對象的屬性，我們稱之為繼承屬性。

屬性的特性（property attribute）

屬性的特性，用來描述屬性的相關(guān)信息。在數(shù)據(jù)屬性中，屬性擁有4（_writable、enumerable、configurable、value_）種特性，用來表示這個屬性的相關(guān)信息。在訪問屬性中，get 屬性擁有3（_get、enumerable、configurable_）種特性，set屬性擁有3（_set、enumerable、configurable_）種特性。

value

屬性的屬性值。

wriable

true 或者 false，表示這個屬性_是否可以設(shè)置_。

enumerable

true 或者 false, 表示這個屬性_是否可以在循環(huán)屬性中被枚舉_。

var me = {
    name: "qingzhui",
};

console.log(me.propertyIsEnumerable("name")); // true

configurable

true 或者 false，表示這個屬性是否_可以被刪除或者屬性值是否可以改變_。

Object.getOwnPropertyDescriptor(obj, "prop")

var o1 = Object.create(Object.prototype, {
    "name": {
        value: "qingzhui"
    }
});

var o2 = {
    name: "qingzhui"
};

console.log(Object.getOwnPropertyDescriptor(o1, "name"));
//{configurable: false,enumerable: false,value: "qingzhui",writable: false}

console.log(Object.getOwnPropertyDescriptor(o2, "name"));
//{configurable: true, enumerable: true, value: "qingzhui", writable: true}

與屬性特性相關(guān)的方法

Object.defineProperty(obj, "prop", descriptor) 定義或修改一個屬性

Object.defineProperties(obj, props) 定義或修改多個屬性

Object.create(proto, properiesObject ) 創(chuàng)建一個新的對象

對象的內(nèi)部屬性（internal slots）

對象的內(nèi)部屬性只是用來描述對象的相關(guān)信息、不屬于對象的真正的屬性，不可以訪問。你可以把它當(dāng)做特殊的隱藏屬性。

[[]prototype]] obejct 表示對象的父對象，直接繼承的對象。

[[extensible]] boolean 表示是否可以添加屬性

[[class]] string 表示對象的分類

屬性的操作 讀取屬性（read property）

讀取屬性有兩種方法，一種是點運算符，一種是方括號運算符。

var me = {
    name: "qingzhui";
};

//方式1
console.log(me.name); // "qingzhui"

//方式2
console.log(me["name"]); // "qingzhui"

console.log(me.age); // 讀取一個不存在的屬性返回 "undefined"

console.log(me.toSting) // 讀取自身沒有的屬性，會在原型鏈上找到最近的返回

需要注意的是，_點運算符與方括號的不同點_：

方括號運算符可以使用表達(dá)式。

方括號可以讀取鍵名為數(shù)字、不符合標(biāo)識符條件的、關(guān)鍵字和保留字的屬性。

讀取一個不存在的屬性，返回的是 undefined ?？梢岳眠@一點用來判斷變量是否聲明。

if(a in window){
    // a 聲明過
}else{
    // a 未聲明
}

添加屬性（add property）

點運算符和方括號運算符不僅可以讀取屬性，還可以對屬性進(jìn)行賦值。

var me = {
    name: "qingzhui"
};

me.age = 26; // 使用點運算符添加 age 屬性

me["like"] = "music"; // 使用方括號運算符添加 like 屬性

Object.defineProperty() ES5 的方法，用來新增或者修改一個已經(jīng)存在的屬性。

var me = {
    name: "qingzhui"
};

Object.defineProperty(me, "age", {
    value: 26,
    writable: true, // 不定義，默認(rèn) false
    enumerable: true, // 不定義，默認(rèn) false
    configurable: true // 不定義，默認(rèn) false
});

Object.defineProperties() ES5的方法，用來新增或者修改多個自有屬性，并返回該對象。

var me = {
    name: "qingzhui"
};

Object.defineProperties(me, {
    "age": {
        value: 26
    },
    "sex": {
        value: "boy",
        wriable: false,
        enumerable: true,
        configurable: false
    }
});

修改屬性（modify property）

var me = {
    name: "qingzhui"
};

me.name = "scl"; // 可以使用點運算符 對 name 屬性重新賦值，達(dá)到修改的目的

刪除屬性（delete property）

使用 [delete](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/delete) 運算符，可以刪除對象的屬性，在嚴(yán)格模式下，刪除一個不可配置的屬性（non-configurable），會拋出異常，在非嚴(yán)格模式下，返回 false，其它情況都返回 true 。

var me = {
    name: "qingzhui"
};

delete me.name; // true

遍歷對象的屬性 for-in

可以使用 in 運算符，來判斷某個屬性是否在指定的對象中。用[for-in](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in)，以任意序迭代一個對象的可枚舉屬性。每個不同的屬性，語句都會被執(zhí)行一次。

//創(chuàng)建 person 對象
var person = {
    species: "動物",
    sex: "男"
};

//創(chuàng)建 me 對象，讓其 繼承 person
var me = Object.create(person, {
    name: {
        value: "qingzhui",
        wriable: true,
        enumerable: true, // 設(shè)置可枚舉
        configurable: true
    },
    age: {
        value: 26,
        wriable: true,
        enumerable: false, // 設(shè)置不可枚舉
        configurable: true
    }
});

var arr = [];

for(var a in me){
    arr.push(a);
}

console.log(arr); // ["name", "species", "sex"]

遍歷的是對象所有_可遍歷（enumberable）的屬性_，會跳過不可遍歷的屬性

它不僅遍歷對象自身的屬性，_還遍歷繼承的屬性_

Object.keys() es5方法

使用 Object.keys(obj) 可以遍歷_自身所有可以枚舉的屬性_，返回所有可枚舉自身屬性的屬性名組成的數(shù)組。

console.log(Object.keys(me)); // ["name"]

Object.getOwnPropertyNames(obj) ES5方法

使用 Object.getOwnPropertyNames(obj) 可以遍歷_自身所有的屬性_，返回所有自身屬性的屬性名組成的數(shù)組。

console.log(Object.getOwnPropertyNames(me)); // ["name", "age"]

檢查屬性是否存在

hasOwnProperty() 如果自身含有這個屬性，返回 true,否則 false。

var me = {
    name: "qingzhui"
};

console.log(me.hasOwnProperty("name")); // true

console.log(me.hasOwnProperty("age")); // fasle

in 運算符，用來判斷自身或者繼承來的屬性是否在這個對象中。

var person = {
    species: "動物",
    sex: "男"
}

var me = Object.create(person);

me.name = "qingzhui";

console.log("name" in me); // 檢查自身的屬性 true

console.log("sex" in me); // 檢查繼承的屬性 true

console.log("job" in me); // 檢查沒有的屬性 fasle

對象的引用

對象的引用是按址引用的，如果不同的變量引用同一個對象，它們會指向_同一個內(nèi)存地址_，修改其中一個變量，會影響到其它的變量。

var me = {
    name: "qingzhui"
};

var qingzhui = me; // 讓 qingzhui 引用 me 對象

qingzhui.name = "scl"; // 修改 qingzhui 的 name 屬性

console.log(me.name); // "scl" 改變了 me 的 name 屬性

對象的分類

標(biāo)準(zhǔn)對象（standard object）

如 Object、Aaary等

宿主對象（hosted object）

如DOM中的 document，BOM中的 window ，nodejs中的 http 。

自定義對象（user-define object）

如 var o = {};

對象深入 原型和繼承 原型（prototype）

在 javascript 中，每一個對象都有一個內(nèi)部的相關(guān)信息叫 prototype ，可以用 [[prototype]]表示。

[[prototype]]的值是一個對象或者是 null ，我們把這個對象稱之為原型對象，或者說是父對象。

繼承（inheritance）

在 javascript 中，查找屬性的時候，先從自身查找，如果找不到，就在其父對象，一直往上找，直到 null，這種機(jī)制就叫做繼承。

原型鏈（prototype chain）

一個對象的父對象，父對象的父對象，形成一個鏈，稱之為原型鏈（prototype chain）。

不是所有的對象都有父對象，Object.prototype 是所有對象的根，它的原型對象（父對象）是 null。

查找對象的原型對象（父對象） __proto__

返回對象的原型對象（父對象），在 ES6 之前，只有部分瀏覽器支持，在ES6 被正式納入標(biāo)準(zhǔn)。
_proto 和 [[prototype]] 指向同一個對象，即它的原型對象（父對象）。

funtion Person(){
    //
}

var me = new Person();

console.log(me.__proto__ === Person.prototype); // true

getPrototypeOf()

返回指定對象的原型對象。

Object.getPrototypeOf(object)

isPrototypeOf()

測試一個對象是否存在于另一個對象的原型鏈上。

obj.prototype.isPrototypeOf(object)

資源

從本質(zhì)認(rèn)識JavaScript的原型繼承和類繼承

Javascript面向?qū)ο缶幊蹋ㄈ悍菢?gòu)造函數(shù)的繼承

定義對象的父對象

使用 Object.create(myparent, )

定義一個沒有 return 的構(gòu)造函數(shù) F，然后 F.prototype = myparent，使用 new F()

限制對象的一些方法

Object.isExtensible()  // 判斷是否可擴(kuò)展

Object.preventExtensions()

Object.isSeal() // 判斷是否密封

Object.seal()

Object.isFrozen() // 判斷是否凍結(jié)

Object.freeze()

確定對象的子類型

Object.prototype.toString.call(myObj);

console.log(Object.prototype.toString.call({})) // "[object Object]"

復(fù)制對象

方法一（深拷貝）

Json.parse(Json.stringify(obj));

方法二（es6）

Object.assign(target, ...sources)

javascript中的深拷貝和淺拷貝？

深入剖析 JavaScript 的深復(fù)制

判斷對象是否相等

function is_obj_equal(obj1, obj2){
    var keys1 = Object.keys(obj1).sort();
    var keys2 = Object.keys(obj2).sort();

    if(keys1.length !== keys2.length){
        return false;
    }

    if (!keys1.every(function(k, i){ return (k === keys2[i]); })){
        return false;
    }

    return keys1.every(function(kk) {
        var v1 = obj1[kk];
        var v2 = obj2[kk];
        if ( Array.isArray(v1) )  {
            return is_array_equal(v1,v2);
        } else if ( typeof v1 === "object" && v1 !== null) {
            return is_obj_equal(v1,v2);
        } else {
            return  v1 === v2;
        }
    });
}

面向?qū)ο缶幊?/b> this
在 javascript 中，當(dāng)一個函數(shù)被調(diào)用時，它有一個相關(guān)值被稱之為 ‘ ThisBinding ’。

在函數(shù)定義時，‘ ThisBinding ’ 是用 this 表示。

‘ ThisBinding’ 的目的是讓函數(shù)隱式的使用對象。
this 的值是什么？
當(dāng)一個函數(shù)被當(dāng)做一個對象的方法調(diào)用時，this 的值是指調(diào)用這個函數(shù)的對象。

var f = function(){ return this; }; var o = { f1: f}; // this 是 o console.log(o == o.f1()); // true

當(dāng)一個函數(shù)，使用 new 調(diào)用， this 的值是這個新創(chuàng)建的對象。

var F = function(){ this.name = "qingzhui"; }; var me = new F(); // this 是 me console.log(me); // { name: "qingzhui"}

當(dāng)一個函數(shù)，是在全局上下文直接調(diào)用，如果是嚴(yán)格模式，this 的值是 undefined 。非嚴(yán)格模式下是全局對象（如 window）。

"use strict" var f = function(){ return this; }; console.log(f()); // this 是 undefined

當(dāng)一個函數(shù)是在一個函數(shù)里面，函數(shù)被調(diào)用時，如果是嚴(yán)格模式，this 的值是 undefined ，否則是全局對象

"use stric" var f = function(){ var h = function(){ return this; // this 是 undefined }; return h(); }; console.log(f() === undefined); // true var o = { p = function(){ var f = function(){ return this; // this 是 undefined }; return f(); } }; console.log(o.p() === undefined); // true
資源
js 中 this 關(guān)鍵字詳解

詳解this
構(gòu)造函數(shù)（constructor）
當(dāng)一個函數(shù)被設(shè)計使用 new 調(diào)用的時候，我們叫這個函數(shù)為構(gòu)造函數(shù)。構(gòu)造函數(shù)是用來創(chuàng)建函數(shù)的一種方式。
內(nèi)置的構(gòu)造函數(shù)
在 JavaScript 中，有幾個內(nèi)置的構(gòu)造函數(shù)，可以直接拿來使用。

var o = new Object(); var arr = new Array(); var fun = new Function(); var date = new Date(); var reg = new Regex();
原始類型值的包裝器
var str = new String("a"); var num = new Number(1); var boolean = new Boolean(true);

構(gòu)造函數(shù)應(yīng)該已大寫字母開始。
原型屬性（prototype）
在 JavaScript 中，每一個函數(shù)有一個特殊的屬性 prototype 。

var f = function(){ }; console.log(f.hasOwnProperty("prototype")); // true console.log(Object.hasOwnProperty("prototype")); // true console.log(Array.hasOwnProperty("prototype")); // true

用戶自定義的函數(shù)，它的原型屬性的值默認(rèn)值：{ constructor: f}

var f = function(){ }; console.log(f.hasOwnProperty("prototype")); // true console.log(Object.getOwnpropertyNames(f.prototype).lenght === 1); // true console.log(Object.getOwnpropertyNames(f.prototype)[0] === constructor); // true console.log(Object.getOwnPropertyDescriptor(f.protptype, "constructor")); // { value: f, writable: true, enumerable: false, configurable: true}

內(nèi)置的函數(shù)，它的原型屬性的默認(rèn)值是

Object.prototype 就是 Object.prototype, Object.prototype 被設(shè)計為 new Object()新對象的父對象

在嚴(yán)格模式下，內(nèi)置的構(gòu)造函數(shù)的原型屬性不能被改變，否則會報錯。
操作符 new
操作符 new 是用來和函數(shù)一起，創(chuàng)建一個對象。

// 語法 new function_name(args);
new 是如何工作的？
每一個函數(shù)都有一個屬性叫做原型屬性（prototype）

它的值默認(rèn)是{ constructor: F}

創(chuàng)建一個新的空對象，將它的父對象設(shè)置為 F.prototype

執(zhí)行構(gòu)造函數(shù)，把 this 指向這個新對象

如果構(gòu)造函數(shù)沒有返回值，或者返回的不是一個對象，那么新對象將作為返回值。如果返回的是一個對象，那么返回值為這個對象。

var F1 = function(){ this.name = 1; }; var F2 = function(){ this.name = 2; return 3; }; var F3 = function(){ this.name = 3; return { name: "qingzhui" }; }; var f1 = new F1(); // { name: 1} var f2 = new F2(); // { name: 2} var f3 = new F3(); // { name: "qingzhui"}
使用 new 創(chuàng)建的對象的父對象是什么？
如果構(gòu)造函數(shù)F返回的不是一個對象，或者沒有返回值，那么它的父對象只指 F.prototype

如果構(gòu)造函數(shù)F有返回語句，返回一個對象，要看返回的對象是怎么創(chuàng)建的。來判斷它的父對象。
繼承
全面理解面向?qū)ο蟮?JavaScript

文章同時發(fā)表在：
http://blog.qingzhui.net/post...

GPU云服務(wù)器云服務(wù)器 js中的對象 javascript中的 javaScript中的this javascript中的函數(shù)

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91623.html

上一篇：移動端預(yù)覽壓縮上傳圖片

下一篇：magix，阿里媽媽前端頁面區(qū)塊化利器

相關(guān)文章

H5學(xué)習(xí)

摘要：為此決定自研一個富文本編輯器。本文，主要介紹如何實現(xiàn)富文本編輯器，和解決一些不同瀏覽器和設(shè)備之間的。對ES6Generator函數(shù)的理解 Generator 函數(shù)是 ES6 提供的一種異步編程解決方案，語法行為與傳統(tǒng)函數(shù)完全不同。 JavaScript 設(shè)計模式 ② 巧用工廠模式和創(chuàng)建者模式我為什么把他們兩個放在一起講？我覺得這兩個設(shè)計模式有相似之處，有時候會一個設(shè)計模式不能滿...

aristark 2019-08-22 11:21 評論0 收藏0

前端開發(fā)周報: CSS 布局方式與JavaScript數(shù)據(jù)結(jié)構(gòu)和算法

摘要：如果沒有學(xué)習(xí)過計算機(jī)科學(xué)的程序員，當(dāng)我們在處理一些問題時，比較熟悉的數(shù)據(jù)結(jié)構(gòu)就是數(shù)組，數(shù)組無疑是一個很好的選擇。 showImg(https://segmentfault.com/img/bVTSjt?w=400&h=300); 1、常見 CSS 布局方式詳見：一些常見的 CSS 布局方式梳理，涉及 Flex 布局、Grid 布局、圣杯布局、雙飛翼布局等。http://cherryb...

huhud 2019-08-20 18:59 評論0 收藏0

前端開發(fā)周報: CSS 布局方式與JavaScript數(shù)據(jù)結(jié)構(gòu)和算法

摘要：如果沒有學(xué)習(xí)過計算機(jī)科學(xué)的程序員，當(dāng)我們在處理一些問題時，比較熟悉的數(shù)據(jù)結(jié)構(gòu)就是數(shù)組，數(shù)組無疑是一個很好的選擇。 showImg(https://segmentfault.com/img/bVTSjt?w=400&h=300); 1、常見 CSS 布局方式詳見：一些常見的 CSS 布局方式梳理，涉及 Flex 布局、Grid 布局、圣杯布局、雙飛翼布局等。http://cherryb...

?xiaoxiao, 2019-08-29 13:16 評論0 收藏0

發(fā)表評論

登陸后可評論

0條評論

leo108

男|高級講師

我要關(guān)注我要私信

TA的文章
閱讀更多

tensorflow

閱讀 3338·2023-04-26 00:07

傳奇4怎么防止封ip?傳奇4封號/封IP解決辦法

閱讀 3948·2021-11-23 10:08

利用Python自動發(fā)送郵件

閱讀 2958·2021-11-22 09:34

什么主機(jī)空間好-美國虛擬主機(jī)空間哪個好？

閱讀 868·2021-09-22 15:27

前端每日實戰(zhàn)：140# 視頻演示如何用純 CSS 創(chuàng)作文本的淡入動畫效果

閱讀 1758·2019-08-30 15:54

聊一聊幾種常用web圖片格式：gif、jpg、png、webp

閱讀 3763·2019-08-30 14:07

SVG的正確使用姿勢

閱讀 926·2019-08-30 11:12

送給CSS初學(xué)者的懸停過渡動畫三部曲

閱讀 691·2019-08-29 18:44

最新活動

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

全面學(xué)習(xí)javascript中的對象

相關(guān)文章

H5學(xué)習(xí)

**前端開發(fā)周報: CSS 布局方式與JavaScript數(shù)據(jù)結(jié)構(gòu)和算法**

**前端開發(fā)周報: CSS 布局方式與JavaScript數(shù)據(jù)結(jié)構(gòu)和算法**

發(fā)表評論

0條評論

leo108

男|高級講師

TA的文章

tensorflow

傳奇4怎么防止封ip?傳奇4封號/封IP解決辦法

利用Python自動發(fā)送郵件

什么主機(jī)空間好-美國虛擬主機(jī)空間哪個好？

前端每日實戰(zhàn)：140# 視頻演示如何用純 CSS 創(chuàng)作文本的淡入動畫效果

聊一聊幾種常用web圖片格式：gif、jpg、png、webp

SVG的正確使用姿勢

送給CSS初學(xué)者的懸停過渡動畫三部曲

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

全面學(xué)習(xí)javascript中的對象

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！