object in javascript

geekzhou 发布于2019-08-21 16:40 / 2422人阅读

摘要：枚举对象属性列举的可枚举属性，包括自身和原型链上的只列举对象本身的可枚举属性创建对象的几种方式对象字面量通过构造函数以指定的对象作为原型来创建对象这样，的原型就是了如何判断对象是否是空对象对象属性的描述符属性的描述符分描述符和访问描述符，对

枚举对象属性

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后的输出:
 >   初始的卢云
     后来的卢云
     [ "无双连拳", "正十七", "无绝心法" ]

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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