日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
這6點(diǎn)知識(shí)讓我對(duì)JavaScript的對(duì)象有了更進(jìn)一步的了解

1. 對(duì)象方法 & this

成都創(chuàng)新互聯(lián)企業(yè)建站,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn)，專注于網(wǎng)站建設(shè)技術(shù)，精于網(wǎng)頁(yè)設(shè)計(jì)，有多年建站和網(wǎng)站代運(yùn)營(yíng)經(jīng)驗(yàn)，設(shè)計(jì)師為客戶打造網(wǎng)絡(luò)企業(yè)風(fēng)格，提供周到的建站售前咨詢和貼心的售后服務(wù)。對(duì)于成都網(wǎng)站建設(shè)、成都網(wǎng)站制作中不同領(lǐng)域進(jìn)行深入了解和探索，創(chuàng)新互聯(lián)在網(wǎng)站建設(shè)中充分了解客戶行業(yè)的需求，以靈動(dòng)的思維在網(wǎng)頁(yè)中充分展現(xiàn)，通過(guò)對(duì)客戶行業(yè)精準(zhǔn)市場(chǎng)調(diào)研，為客戶提供的解決方案。

方法只是保存函數(shù)值的屬性。

簡(jiǎn)單對(duì)象方法

 
 
 
 
    
  
  
  
  
  1. let rabbit = {};
    2. 
  
  
  
  
  2. rabbit.speak = function(line) {
    3. 
  
  
  
  
  3.     console.log("小兔子說(shuō)： "+ line );
    4. 
  
  
  
  
  4. };
    5. 
  
  
  
  
  5. rabbit.speak("我還活著。")
    6.

輸出：

 
 
 
 
    
  
  
  
  
  1. T小兔子說(shuō)： 我還活著。
    2.

對(duì)象方法 & this

當(dāng)一個(gè)函數(shù)作為方法被調(diào)用時(shí)，對(duì)象會(huì)將函數(shù)作為屬性并立即調(diào)用，就像在object.method()中一樣，其主體中的特殊變量this將指向被調(diào)用的對(duì)象。

 
 
 
 
    
  
  
  
  
  1. function speak(line) {
    2. 
  
  
  
  
  2.   console.log(this.type + "小兔子說(shuō)：" + line)
    3. 
  
  
  
  
  3. };
    4. 
  
  
  
  
  4. let whiteRabbit = {type: "白色", speak: speak}
    5. 
  
  
  
  
  5. 
  
  
  
  
  6. whiteRabbit.speak("噢，我真可愛(ài)！")
    7.

輸出：

 
 
 
 
    
  
  
  
  
  1. 白色小兔子說(shuō)：噢，我真可愛(ài)！
    2.

apply & call

 
 
 
 
    
  
  
  
  
  1. function speak(line) {
    2. 
  
  
  
  
  2.   console.log(`${this.type}的小兔子說(shuō)：${line}` );
    3. 
  
  
  
  
  3. };
    4. 
  
  
  
  
  4. let whiteRabbit = {type: "白色", speak: speak};
    5. 
  
  
  
  
  5. 
  
  
  
  
  6. speak.apply(whiteRabbit, ["你這個(gè)小壞蛋!"]);
    7. 
  
  
  
  
  7. speak.call({type: "黑色"}, "嘿嘿，我不壞，你不愛(ài)!");
    8. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. 白色的小兔子說(shuō)：你這個(gè)小壞蛋!
    2. 
  
  
  
  
  2. 黑色的小兔子說(shuō)：嘿嘿，我不壞，你不愛(ài)!
    3.

2.Prototype(原型)

  • 幾乎所有的對(duì)象都有一個(gè)prototype
  • prototype是另一個(gè)用作屬性的備用源的對(duì)象
  • 當(dāng)一個(gè)對(duì)象訪問(wèn)自身沒(méi)有屬性時(shí)，它會(huì)從它的prototype搜索該屬性，如果沒(méi)有找到就繼續(xù)從它的prototype的prototype查找，依此類推，直到 null 為止。

空對(duì)象的原型

原型鏈最終的指向是Object的prototype, 而Object中的__proto__是null

 
 
 
 
    
  
  
  
  
  1. let empty = {};
    2. 
  
  
  
  
  2. console.log(empty.toString);
    3. 
  
  
  
  
  3. console.log(empty.toString());
    4.

輸出：

 
 
 
 
    
  
  
  
  
  1. [Function: toString]
    2. 
  
  
  
  
  2. [object Object]
    3.

其他對(duì)象(數(shù)組、函數(shù)等等)的默認(rèn)屬性

  • 許多對(duì)象沒(méi)有直接將Object.prototype作為自己的原型，但有自己的默認(rèn)屬性
  • 從Function.prototype派生的函數(shù)和從Array.prototype派生的數(shù)組
 
 
 
 
    
  
  
  
  
  1. console.log(Object.getPrototypeOf(isNaN) ==
    2. 
  
  
  
  
  2.             Function.prototype);
    3. 
  
  
  
  
  3. console.log(Object.getPrototypeOf([]) ==
    4. 
  
  
  
  
  4. Array.prototype);
    5.

輸出：

 
 
 
 
    
  
  
  
  
  1. true
    2. 
  
  
  
  
  2. true
    3.
  • Object.create 創(chuàng)建具有特定原型的對(duì)象
  • protoRabbit充當(dāng)所有兔子共享的屬性的容器

單個(gè)兔子對(duì)象(如殺手兔子)包含僅適用于自身的屬性(在本例中為type)，并從其原型派生共享屬性

 
 
 
 
    
  
  
  
  
  1. let protoRabbit = {
    2. 
  
  
  
  
  2.   speak: function (line) {
    3. 
  
  
  
  
  3.     console.log(`${this.type}兔子說(shuō)：${line}` );
    4. 
  
  
  
  
  4.   }
    5. 
  
  
  
  
  5. }
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. let killerRabbit = Object.create(protoRabbit)
    8. 
  
  
  
  
  8. killerRabbit.type = '殺手'
    9. 
  
  
  
  
  9. killerRabbit.speak('準(zhǔn)備受死吧！')
    10.

輸出：

 
 
 
 
    
  
  
  
  
  1. 殺手兔子說(shuō)：準(zhǔn)備受死吧！
    2.

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

— 構(gòu)造函數(shù)原型

  • 創(chuàng)建從某個(gè)共享原型派生的對(duì)象的更方便的方法是使用構(gòu)造函數(shù)
  • 在 JavaScript 中，調(diào)用前面帶有new關(guān)鍵字的函數(shù)會(huì)將其視為構(gòu)造函數(shù)
  • 構(gòu)造函數(shù)將其this變量綁定到一個(gè)新對(duì)象，除非它顯式返回另一個(gè)對(duì)象值，否則此新對(duì)象將從調(diào)用中返回
  • 用new創(chuàng)建的對(duì)象被稱為是其構(gòu)造函數(shù)的實(shí)例
  • 約定將構(gòu)造函數(shù)的名稱大寫(xiě)，以便于與其他函數(shù)區(qū)分開(kāi)
 
 
 
 
    
  
  
  
  
  1. function Rabbit(type) {
    2. 
  
  
  
  
  2.     this.type = type;
    3. 
  
  
  
  
  3. }
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. let killerRabbit = new Rabbit("killer");
    6. 
  
  
  
  
  6. let blackRabbit = new Rabbit("black");
    7. 
  
  
  
  
  7. console.log(blackRabbit.type);
    8.

輸出：

 
 
 
 
    
  
  
  
  
  1. black
    2.

— 默認(rèn)情況下，構(gòu)造函數(shù)具有Object.prototype

  • 構(gòu)造函數(shù)(實(shí)際上是所有函數(shù))會(huì)自動(dòng)獲取一個(gè)名為prototype的屬性，默認(rèn)情況下，該屬性包含一個(gè)從Object.prototype派生的普通空對(duì)象
  • 使用此構(gòu)造函數(shù)創(chuàng)建的每個(gè)實(shí)例都將此對(duì)象作為其原型
 
 
 
 
    
  
  
  
  
  1. function Rabbit(type) {
    2. 
  
  
  
  
  2.   this.type = type;
    3. 
  
  
  
  
  3. }
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. let blackRabbit = new Rabbit("黑色");
    6. 
  
  
  
  
  6. Rabbit.prototype.speak = function(line) {
    7. 
  
  
  
  
  7.   console.log(`${this.type}的兔子說(shuō)：${line}` );
    8. 
  
  
  
  
  8. };
    9. 
  
  
  
  
  9. blackRabbit.speak("Boom...一波王炸！");
    10.

輸出：

 
 
 
 
    
  
  
  
  
  1. 黑色的兔子說(shuō)：Boom...一波王炸！
    2.

4. 重寫(xiě)派生屬性

— 相同的原型名稱

  • 如果原型中有同名的屬性，則不會(huì)更改此屬性
  • 該屬性被添加到對(duì)象本身
 
 
 
 
    
  
  
  
  
  1. function Rabbit(type) {
    2. 
  
  
  
  
  2.     this.type = type;
    3. 
  
  
  
  
  3. }
    4. 
  
  
  
  
  4. let blackRabbit = new Rabbit("black");
    5. 
  
  
  
  
  5. let killerRabbit = new Rabbit("killer");
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. Rabbit.prototype.teeth = "small";
    8. 
  
  
  
  
  8. console.log(killerRabbit.teeth);
    9. 
  
  
  
  
  9. // small
    10. 
  
  
  
  
  10. killerRabbit.teeth = "long, sharp, and bloody";
    11. 
  
  
  
  
  11. console.log(killerRabbit.teeth);
    12. 
  
  
  
  
  12. // long, sharp, and bloody
    13. 
  
  
  
  
  13. console.log(blackRabbit.teeth);
    14. 
  
  
  
  
  14. // small
    15. 
  
  
  
  
  15. console.log(Rabbit.prototype.teeth);
    16. 
  
  
  
  
  16. // small
    17.

下面 console.log(blackRabbit.teeth)的結(jié)果是small，因?yàn)閎lackRabbit對(duì)象不具有teeth屬性，它繼承自Rabbit對(duì)象自己的teeth屬性，值為 small。

5. 原型的干擾

— 可枚舉與不可枚舉

 
 
 
 
    
  
  
  
  
  1. let map = {}
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. function storePhi(event, phi) {
    4. 
  
  
  
  
  4.   map[event] = phi
    5. 
  
  
  
  
  5. }
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. storePhi('pizza', 0.069)
    8. 
  
  
  
  
  8. storePhi('touched tree', -0.081)
    9. 
  
  
  
  
  9. 
  
  
  
  
  10. Object.prototype.nonsense = 'hi'
    11. 
  
  
  
  
  11. 
  
  
  
  
  12. for(let name in map) {
    13. 
  
  
  
  
  13.   console.log(name)
    14. 
  
  
  
  
  14. }
    15. 
  
  
  
  
  15. 
  
  
  
  
  16. console.log('nonsense' in map)
    17. 
  
  
  
  
  17. console.log('toString' in map)
    18.

輸出結(jié)果:

 
 
 
 
    
  
  
  
  
  1. pizza
    2. 
  
  
  
  
  2. touched tree
    3. 
  
  
  
  
  3. nonsense
    4. 
  
  
  
  
  4. true
    5. 
  
  
  
  
  5. true
    6.

toString沒(méi)有出現(xiàn)在for/in循環(huán)中，但是in運(yùn)算符中返回true，這是因?yàn)?JS 區(qū)分可枚舉屬性和不可枚舉屬性。

我們通過(guò)簡(jiǎn)單分配創(chuàng)建的所有屬性都是可枚舉的，Object.prototype中的標(biāo)準(zhǔn)屬性都是不可改變的，這就是為什么它們不出現(xiàn)在這樣的for/in循環(huán)中的原因。

 
 
 
 
    
  
  
  
  
  1. let map = {};
    2. 
  
  
  
  
  2. function storePhi(event, phi) {
    3. 
  
  
  
  
  3.     map[event] = phi;
    4. 
  
  
  
  
  4. }
    5. 
  
  
  
  
  5. 
  
  
  
  
  6. storePhi("pizza", 0.069);
    7. 
  
  
  
  
  7. storePhi("touched tree", -0.081);
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. Object.defineProperty(Object.prototype, "hiddenNonsense",
    10. 
  
  
  
  
  10.                 {enumerable: false, value: "hi"})
    11. 
  
  
  
  
  11. 
  
  
  
  
  12. for (var name in map) {
    13. 
  
  
  
  
  13.     console.log(name)
    14. 
  
  
  
  
  14. }
    15. 
  
  
  
  
  15. 
  
  
  
  
  16. console.log(map.hiddenNonsense)
    17.

輸出：

 
 
 
 
    
  
  
  
  
  1. pizza
    2. 
  
  
  
  
  2. touched tree
    3. 
  
  
  
  
  3. hi
    4.

通過(guò)使用Object.defineproperty函數(shù)可以定義自己的不可枚舉屬性，該函數(shù)允許我們控制要?jiǎng)?chuàng)建的屬性的類型，在該示例中，hiddenNonsense在 map 中，但在 for...in 中不會(huì)顯示。

— hasOwnProperty vs in 操作符

 
 
 
 
    
  
  
  
  
  1. const map = {}
    2. 
  
  
  
  
  2. console.log("toString" in map)
    3. 
  
  
  
  
  3. console.log(map.hasOwnProperty("toString"))
    4.

輸出：

 
 
 
 
    
  
  
  
  
  1. true
    2. 
  
  
  
  
  2. false
    3.

hasOwnProperty方法告訴我們對(duì)象本身是否具有該屬性，而無(wú)需查看其原型,這通常是比in運(yùn)算符提供給我們的信息更有用的信息。

因此，如果你對(duì)基礎(chǔ)對(duì)象原型感到困惑時(shí)，建議你可以這樣寫(xiě)for/in循環(huán):

 
 
 
 
    
  
  
  
  
  1. for (var name in map) {
    2. 
  
  
  
  
  2.     if (map.hasOwnProperty(name)) {
    3. 
  
  
  
  
  3.         // ... this is an own property
    4. 
  
  
  
  
  4.     }
    5. 
  
  
  
  
  5. }
    6.

6.無(wú)原型對(duì)象

Object.create函數(shù)使我們能夠創(chuàng)建具有特定原型的對(duì)象。我們還可以傳遞null作為原型，用來(lái)創(chuàng)建不帶原型的新對(duì)象。

因此，我們不再需要hasOwnProperty，因?yàn)閷?duì)象擁有的所有屬性都是它自己的屬性?，F(xiàn)在，無(wú)論人們對(duì)Object.prototype做了什么，我們都可以安全地使用for/in循環(huán)

 
 
 
 
    
  
  
  
  
  1. var map = Object.create(null);
    2. 
  
  
  
  
  2. map["pizza"] = 0.069;
    3. 
  
  
  
  
  3. console.log("toString" in map);
    4. 
  
  
  
  
  4. // false
    5. 
  
  
  
  
  5. console.log("pizza" in map);
    6. 
  
  
  
  
  6. // true
    7.

作者：Valentino Gagliardi 譯者：前端小智 來(lái)源：valentinog

原文：https://medium.com/javascript-in-plain-english/six-things-you-should-know-about-objects-in-javascript-ccd11a9e1998

本文轉(zhuǎn)載自微信公眾號(hào)「 大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系****公眾號(hào)。


文章名稱：這6點(diǎn)知識(shí)讓我對(duì)JavaScript的對(duì)象有了更進(jìn)一步的了解
文章轉(zhuǎn)載：http://m.5511xx.com/article/cocjgdg.html