object in javascript

geekzhou 發(fā)布于2019-08-21 16:40 / 2497人閱讀

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

枚舉對(duì)象屬性

for....in

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

object.keys()

只列舉對(duì)象本身的可枚舉屬性

創(chuàng)建對(duì)象的幾種方式

對(duì)象字面量

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

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

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

Object.create()

以指定的對(duì)象作為原型來創(chuàng)建對(duì)象

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了

如何判斷對(duì)象是否是空對(duì)象

    typeof {} == "object"

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

對(duì)象屬性的描述符

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

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

    //數(shù)據(jù)描述符
    // {
    //      value: 2,
    //      writable: true,
    //      enumerable: true,
    //      configurable: true
    // }

writeable 是否可以修改
enumable 是否可枚舉，出現(xiàn)在 for in 中
configurable 是否可通過defineProperty()來修改描述符，為false時(shí)，屬性不能刪除

Getter、Setter

當(dāng)你給一個(gè)屬性定義getter、setter或者兩者都有時(shí)，這個(gè)屬性會(huì)被定義為“訪問描述符”（和“數(shù)據(jù)描
述符”相對(duì)）

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

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

簡(jiǎn)單模擬基于數(shù)據(jù)劫持的數(shù)據(jù)綁定

思考：

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

怎么綁定，定義watcher監(jiān)聽表達(dá)式值的變化，渲染dom

數(shù)據(jù)變了，怎么通知watcher更新模 | setter劫持

誰來通知watcher | 發(fā)布訂閱模式

首先封裝Object.defineProperty監(jiān)聽屬性的變化

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

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

發(fā)布訂閱，需要知道哪些地方用到了當(dāng)前屬性的值，在屬性值變化時(shí)，要更新這些地方

function Subpub() {
    this.subList = [] //保存訂閱某個(gè)屬性的訂閱者
}
Subpub.prototype.addSub = function (watcher) {
    this.subList.push(watcher)
}
//通知訂閱者們，數(shù)據(jù)變化了，你們要各自行動(dòng)了
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
    //監(jiān)聽的屬性的初始值
    this.value = user[exp] //這里寫死的user，應(yīng)該是當(dāng)前環(huán)境下的數(shù)據(jù)，比如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)

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

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

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