object in javascript

geekzhou 發布于2019-08-21 16:40 / 2494人閱讀

摘要：枚舉對象屬性列舉的可枚舉屬性，包括自身和原型鏈上的只列舉對象本身的可枚舉屬性創建對象的幾種方式對象字面量通過構造函數以指定的對象作為原型來創建對象這樣，的原型就是了如何判斷對象是否是空對象對象屬性的描述符屬性的描述符分描述符和訪問描述符，對

枚舉對象屬性

for....in

列舉obj的可枚舉屬性，包括自身和原型鏈上的

object.keys()

只列舉對象本身的可枚舉屬性

創建對象的幾種方式

對象字面量

    const pre="test"
    const obj= {
        "name":"luyun",
        [pre+"prop"]:"wu shuang lian quan"
    }

通過構造函數

    const obj= new Object()
    const d = new Date()

Object.create()

以指定的對象作為原型來創建對象

var Animal = {
  type: "Invertebrates", // Default value of properties
  displayType: function() {  // Method which will display type of Animal
    console.log(this.type);
  }
};
var animal1 = Object.create(Animal);
//這樣，animal1的原型就是Animal了

如何判斷對象是否是空對象

    typeof {} == "object"

    Object.keys({}).length===0

對象屬性的描述符

屬性的描述符分data描述符和訪問描述符，對一個屬性來說，只能存在一種描述符，configurable、enumerable是公共的。

    const users={
        a:"luyun"
    }
    Object.getOwnPropertyDescriptor( users, "a" );

    //數據描述符
    // {
    //      value: 2,
    //      writable: true,
    //      enumerable: true,
    //      configurable: true
    // }

writeable 是否可以修改

enumable 是否可枚舉，出現在 for in 中

configurable 是否可通過defineProperty()來修改描述符，為false時，屬性不能刪除

Getter、Setter

當你給一個屬性定義getter、setter或者兩者都有時，這個屬性會被定義為“訪問描述符”（和“數據描
述符”相對）

 const users={
     "name":"luyun"
 }

Object.defineProperty(users,"kongfu",{
    get:function(){
        return "正十七"
    },
    enumerable:true
})

簡單模擬基于數據劫持的數據綁定

思考：

劫持的數據是用來綁定到模板上的 | {{ }} ng-bind

怎么綁定，定義watcher監聽表達式值的變化，渲染dom

數據變了，怎么通知watcher更新模 | setter劫持

誰來通知watcher | 發布訂閱模式

首先封裝Object.defineProperty監聽屬性的變化

function observe(data) {
    const keys = Object.keys(data)
    keys.forEach(key => {
        gs(data, key, data[key])
    })
}

//劫持數據
function gs(obj, key, val) {
    let originVal = val
    const subpub = new Subpub()
    Object.defineProperty(obj, key, {
        configurable: true,
        enumerable: true,
        get() {
            //這里應該確定訂閱者是誰
            Subpub.target && subpub.addWatcher()
            return originVal
        },
        set(value) {
            originVal = value
            //訂閱了當前屬性的都要更新
            subpub.notice()
        }
    })
}

發布訂閱，需要知道哪些地方用到了當前屬性的值，在屬性值變化時，要更新這些地方

function Subpub() {
    this.subList = [] //保存訂閱某個屬性的訂閱者
}
Subpub.prototype.addSub = function (watcher) {
    this.subList.push(watcher)
}
//通知訂閱者們，數據變化了，你們要各自行動了
Subpub.prototype.notice = function () {
    this.subList.forEach(item => {
        item.render()
    })
}

Subpub.prototype.addWatcher = function () {
    Subpub.target.addSubpub(this)
}

function Watcher(exp, fn) {
    Subpub.target = this
    this.exp = exp
    //監聽的屬性的初始值
    this.value = user[exp] //這里寫死的user，應該是當前環境下的數據，比如angular中$scope
    this.fn = fn
    Subpub.target = null
}
Watcher.prototype.render = function () {
    const oldValue = this.value
    const newValue = user[this.exp]
    this.fn(newValue, oldValue)
}
Watcher.prototype.addSubpub = function (subpub) {
    subpub.addSub(this)
}

const user = {
    name: "初始的盧云",
    kongfu: "無"
}

observe(user)

//這里只是簡單的打印新值
new Watcher("name", function (newVal,old) {
    console.log(old)
    console.log(newVal)
})
new Watcher("kongfu", function (newVal) {
    console.log(newVal)
})

user.name = "后來的盧云"
user.kongfu=["無雙連拳","正十七", "無絕心法"]

//設置name，kongfu后的輸出:
 >   初始的盧云
     后來的盧云
     [ "無雙連拳", "正十七", "無絕心法" ]

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

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

Javascript Objects - Javascript語法基礎 - Javascript核心

摘要：創建對象對象直接量構造函數原型繼承類繼承對象擁有自有屬性和繼承屬性。遍歷順序是以廣度優先遍歷所以使用便可以判斷是否是對象自有的屬性。可執行對象通過如下方法可以創建一個可執行對象既可以當作對象來使用有原型鏈，也可以當作函數來直接調用原文: http://pij.robinqu.me/Javascript_Core/Javascript_Basics/Objects.html ...

wzyplus 2019-08-19 14:47 評論0 收藏0
Learning Notes - Understanding the Weird Parts of

摘要：標簽前端作者更多文章個人網站 Learning Notes - Understanding the Weird Parts of JavaScript 標簽：前端 JavaScript [TOC] The learning notes of the MOOC JavaScript: Understanding the Weird Parts on Udemy,including...

inapt 2019-08-20 16:19 評論0 收藏0
關于JavaScript對象，你所不知道的事（二）- 再說屬性

摘要：但好在還給我們提供了一個方法，每一個對象都有這樣一個方法，專門用來判斷某個屬性是否是該對象的私有屬性。如果你想要用對象字面形式，你只能在創建對象時定義訪問器屬性。在中，我們使用凍結一個對象，并且使用來判斷一個對象是否被凍結。說完了對象那些不常用的冷知識，是時候來看看JavaScript中對象屬性有哪些有意思的東西了。不出你所料，對象屬性自然也有其相應的特征屬性，但是這個話題有點復雜...

Richard_Gao 2019-08-21 17:49 評論0 收藏0
JS淬煉: Array進階

摘要：的這種實現方式導致了一些尷尬問題，比如刪除元素元素遍歷。后面的參數被忽略掉了，表示并沒有要插入的元素。其實，的本質是跟蹤中的，并始終保持值是。這時候，雖然不大可能，可能會在中間某個中被用戶重新定義。但是在上進行這種操作是很糟糕的。在Javascript中，array是一個類數組的object。顧名思義，它能夠在一個變量上存儲多個值。數組是值的有序集合。每個值叫做一個元素，而每個元素...

jimhs 2019-08-22 10:45 評論0 收藏0
JS基礎05「對象」

摘要：對象是的數據類型。對象是動態的，可以隨時新增和刪除自有屬性。客戶端中表示網頁結構的對象均是宿主對象。提供第二個可選參數，用以對對象的屬性進行進一步描述。沒有原型的對象為數不多，就是其中之一。運算符的左側是屬性名字符串，右側是對象。對象是 JavaScript 的數據類型。它將很多值（原始值或者其他對象）聚合在一起，可通過名字訪問這些值，因此我們可以把它看成是從字符串到值的映射。對象是...

frolc 2019-08-26 10:58 評論0 收藏0
《JavaScript 闖關記》之對象

摘要：屬性名可以是包含空字符串在內的任意字符串，但對象中不能存在兩個同名的屬性。客戶端中表示網頁結構的對象均是宿主對象。這里的函數稱做構造函數，構造函數用以初始化一個新創建的對象。通過關鍵字和構造函數調用創建的對象的原型就是構造函數的屬性的值。對象是 JavaScript 的數據類型。它將很多值（原始值或者其他對象）聚合在一起，可通過名字訪問這些值，因此我們可以把它看成是從字符串到值的映射...

rozbo 2019-08-20 10:50 評論0 收藏0