【JavaScript】【對象】屬性和方法的總結歸納

qiangdada 發布于2019-08-19 17:47 / 3465人閱讀

摘要：構造函數原型對象實例對象之間的關系錯綜復雜，關于它們的屬性和方法很多，長得也很像。表示能否修改屬性的值。屬性和方法以下的屬性和方法均以下面的代碼為例構造函數指向原型對象，包含所有被實例共享的屬性和方法。

構造函數、原型對象、實例對象之間的關系錯綜復雜，關于它們的屬性和方法很多，長得也很像。這里歸納出來，方便記憶和查閱。

對象屬性類型 數據屬性

[[Configurable]]：表示能否通過delete刪除屬性從而重新定義屬性、能否修改屬性的特性、能否把屬性修改為訪問器屬性。默認值為true。
[[Enumerable]]：表示是否可枚舉。默認值為true。
[[Writable]]：表示能否修改屬性的值。默認值為true。
[[Value]]：包含屬性的數據值，在這里讀寫屬性。默認值為undefined。

修改屬性的特性：Object.defineProperty()、Object.defineProperties()。調用這兩個方法時，如果不指定，configurable、enumerable、writable特性的默認值都是false。

//定義一個屬性
var person = {};
Object.defineProperty(person, "name", {
    value: "hiyohoo",
    configurable: true,
    enumerable: true,
    writable: true
});

//定義多個屬性
var person = {};
Object.defineProperties(person, {
    name: {
        value: "hiyohoo"
    },
    age: {
        value: 24,
        configurable: true,
        writable: true
    }
});

獲取屬性的特性：Object.getOwnPropertyDescriptor()只能用于實例屬性，要取得原型屬性的描述符，需要在原型上使用該方法。

var descriptor = Object.getOwnPropertyDescriptor(person, "age");
alert(descriptor.writable);    //true

訪問器屬性

[[Configurable]]
[[Enumerable]]
[[Get]]：讀取屬性時調用該函數。默認值為undefined。
[[Set]]：寫入屬性時調用該函數。默認值為undefined。

訪問器屬性不能直接定義，必須使用Object.defineProperty()來定義。訪問器屬性常用于改變該屬性，其他屬性也會變化的情況。

var book = {
    _year: 2004,    //屬性前面的下劃線記號常用于表示只能通過對象方法訪問的屬性。
    edition: 1
};
Object.defineProperty(book, "year", {
    get: function() {
        return this._year;
    },
    set: function(newValue) {
        if (newValue > 2004) {
            this._year = newValue;
            this.edition += newValue - 2004;
        }
    }
});
book.year = 2016;
console.log(book.edition);    //13

屬性和方法

以下的屬性和方法均以下面的代碼為例：

var Person = function(name) {
    this.name = name;
};
Person.prototype.school = "HNU";
Person.prototype.sayName = function() {
    return this.name;
};

var person = new Person("hiyohoo");

構造函數

prototype指向原型對象，包含所有被實例共享的屬性和方法。

console.log(Person.prototype);    //Person{}

原型對象

constructor指向構造函數。

console.log(Person.prototype.constructor === Person);    //true

isPrototypeOf()判斷實例與原型之間的關系。

console.log(Person.prototype.isPrototypeOf(person));    //true

實例對象

constructor沿著原型鏈找到原型中的constructor屬性，最終指向構造函數。

console.log(person.constructor === Person);    //true

__proto__Firefox、Safari、Chrome支持這個屬性，指向原型對象。

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

hasOwnProperty()從Object中繼承而來，判斷屬性是否是實例的私有屬性，而不是繼承而來的共享屬性。

console.log(person.hasOwnProperty("name"));    //true
console.log(person.hasOwnProperty("school"));    //false

Object

Object.getPrototypeOf() ECMAScript 5中新增的方法，返回實例的原型。

console.log(Object.getPrototypeOf(person));    //Person{}

Object.keys() ECMAScript 5中新增的方法，返回一個包含所有可枚舉實例屬性的字符串數組。

console.log(Object.keys(person));    //["name"]
console.log(Object.keys(Person.prototype));    //["school", "sayName"]

Object.getOwnPropertyNames()返回所有實例屬性，無論是否可枚舉。

console.log(Object.getOwnPropertyNames(person));    //["name"]
console.log(Object.getOwnPropertyNames(Person.prototype));    //["constructor", "school", "sayName"]

操作符

delete刪除一個configurable為true的私有屬性。

delete person.name;
delete person.school;

console.log(person.name);    //undefined
console.log(person.school);    //HNU

for-in返回所有能夠訪問到的屬性。

for (p in person) {
    console.log(p);    //name school sayName
}

in對象能夠訪問到屬性時返回true

console.log("name" in person);    //true
console.log("sayName" in person);    //true
console.log("age" in person);    //false

同時使用hasOwnProperty()方法和in操作符，可以確定一個屬性是存在于對象中還是存在于原型中。

function isPrototypeProperty(object, name) {
    if (!(name in object)) {
        return ("Can"t find " + """ + name + """);
    } else if (object.hasOwnProperty(name)) {
        return false;
    } else {
        return true;
    }
}

console.log(isPrototypeProperty(person, "name"));    //false
console.log(isPrototypeProperty(person, "school"));    //true
console.log(isPrototypeProperty(person, "age"));    //Can"t find "age"

instanceof用于判斷一個對象是否是某個對象的實例。

console.log(person instanceof Person);    //true
console.log(person instanceof Object);    //true

轉載請注明出處：https://segmentfault.com/a/1190000004561741

文章不定期更新完善，如果能對你有一點點啟發，我將不勝榮幸。

云服務器 GPU云服務器匹配對象的屬性和函數對象不支持屬性或方法 javascript對象方法對象的屬性

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

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

Javascript各種數組遍歷方法歸納總結和兼容寫法

摘要：主要用于枚舉對象數組遍歷效率最低的方法。當前數組元素的值。傳遞給函數的初始值注意對于空數組是不會執行回調函數的。前言 PS: 2018/04/26 優化一下排版,重新梳理一下方法,補充一些信息,刪除JQuery庫用法,只講解Javascript自帶的, for in 語句用于遍歷數組或者對象的屬性（對數組或者對象的屬性進行循環操作）。主要用于枚舉對象, 數組遍歷效率最低的方法。 va...

Sanchi 2019-08-26 10:29 評論0 收藏0
js基礎歸納總結1

摘要：局部變量在函數中聲明的變量，會成為函數的局部變量。局部變量的作用域是局部的只能在函數內部訪問它們。單獨的情況下，指的是全局對象。在事件中，指的是接收事件的元素。布爾值提供一種布爾數據類型。所有不具有真實值的即為布爾值為零負零空值。閉包閉包的優點：1.可以讀取函數內部的變量2.這些變量的值始終保持在內存中適用場景作用域作用域指的是有權訪問的變量集合。在 JavaScript 中有...

Jeff 2019-08-26 13:54 評論0 收藏0
JavaScript知識架構學習路徑（一）- 變量篇

摘要：在此，我們首先根據變量的作用域，將變量劃分為三級，具體是全局變量局部變量和參數變量。【摘要】本文是專為JavaScript入門者而總結的，總體上將JavaScript的基礎部分分成了九大塊，分別是變量、運算符、數組、流程控制結構、字符串函數、函數基礎、DOM操作基礎、文檔對象模型DOM和正則表達式。【關鍵字】變量、運算符、數組、流程控制結構、函數、DOM、正則表達式。本篇文章的主...

toddmark 2019-08-19 18:18 評論0 收藏0
jQuery學習和知識點總結歸納

摘要：目前在前端開發所占的比重越來越高，在我們學習和開發的過程中都會去使用。下面把程序員雷雪松對的知識點總結和歸納分享給大家。過濾對同胞元素的搜索。將匹配元素集合縮減為集合中的最后一個元素。返回指定元素相對于其他指定元素的位置。 jQuery目前在Web前端開發所占的比重越來越高，在我們jQuery學習和開發的過程中都會去使用。jQuery幫我們解決了瀏覽器之間JS一些不兼容的地方和簡化了原...

JohnLui 2019-08-19 18:00 評論0 收藏0
一個關于對象引用的bug引發的對于引用類型及數組的簡單思考

摘要：圖示如下而對于引用類型的復制可不是這樣這個復制只是將的引用賦值給，二者是屬于同一個引用，訪問的都是堆內存中的同一個對象，任何一個該引用的變量發生變化，會對其余使用該引用的變量也發生變化。這兩天自己在寫代碼的時候，出現一個BUG，代碼如下： class Car { constructor(carId) { this.position =...

lijinke666 2019-08-21 18:32 評論0 收藏0