• 枚举对象属性

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
})
  • 简单模拟基于数据劫持的数据绑定

思考:

  1. 劫持的数据是用来绑定到模板上的 | {{ }} ng-bind
  2. 怎么绑定,定义watcher监听表达式值的变化,渲染dom
  3. 数据变了,怎么通知watcher更新模 | setter劫持
  4. 谁来通知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://segmentfault.com/a/1190000011300742

object in javascript的更多相关文章

  1. 向json中添加新的熟悉或对象 Add new attribute (element) to JSON object using JavaScript

    How do I add new attribute (element) to JSON object using JavaScript? JSON stands for JavaScript Obj ...

  2. IOS Object和javaScript相互调用

    在IOS开发中有时会用到Object和javaScript相互调用,详细过程例如以下: 1. Object中运行javascript代码,这个比較简单,苹果提供了非常好的方法 - (NSString ...

  3. What is the most efficient way to deep clone an object in JavaScript?

    What is the most efficient way to deep clone an object in JavaScript? Reliable cloning using a libra ...

  4. How to access the properties of an object in Javascript

    Javascript has three different kinds of properties: named data property, named accessor property and ...

  5. What is an Activation object in JavaScript ?

    ********************* from Professional JavaScript for Web Development Execution Context And Scope T ...

  6. Iterable object of JavaScript

    数组是可迭代的,所以数组可以用于for of,字符串也是可迭代的,所以字符串也可以用作for of,那么,对象呢? 试一试: var somebody = { start:0, end:100 } f ...

  7. 详解javascript,ES5标准中新增的几种高效Object操作方法

    1.Object 对象 (JavaScript) 提供对所有 JavaScript 对象通用的功能.参考网站:https://msdn.microsoft.com/zh-cn/library/kb6t ...

  8. JavaScript: 认识 Object、原型、原型链与继承。

    目录 引用类型与对象 类与对象 成员组成 成员访问 实例方法 / 属性 引用类型与对象 JavaScript 存在着两种数据类型:"基本数据类型" 与 "引用数据类型&q ...

  9. JavaScript原型链以及Object,Function之间的关系

    JavaScript里任何东西都是对象,任何一个对象内部都有另一个对象叫__proto__,即原型,它可以包含任何东西让对象继承.当然__proto__本身也是一个对象,它自己也有自己的__proto ...

随机推荐

  1. maven项目解决pom.xml头部 http://maven.apache.org/xsd/maven-4.0.0.xsd报错的问题

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_36611526/article/d ...

  2. Selenium 警告框处理

    警告框分三种类型: alert:显示带有一条指定消息和一个 OK 按钮的警告框. confirm:显示一个带有指定消息和 OK 及取消按钮的对话框. prompt:显示可提示用户进行输入的对话框. 我 ...

  3. (60) 结构体指针、结构体变量嵌套、结构体指针嵌套、函数指针、数组指针、指针数组、typedef 综合运用

    #include<stdio.h> #include<iostream> #include<malloc.h> /* author : 吴永聪 program: 结 ...

  4. logstash之OutPut插件

    output插件是经过了input,然后过滤结构化数据之后,接下来我们需要借助output传到我们想传到的地方.output相当于一个输出管道. 2.3.1: 将采集数据标准输出到控制台 配置示例: ...

  5. C++学习一二

    为了更深入的学习程序编写,以及进行相关算法的编写.决定每天花点时间学习C++:以下是每天的学习笔记. 一.std代表命名空间,可以用using来省略. 二.std:endl.输出一个换行符,并且“刷新 ...

  6. linux系统PS命令,按CPU、内存使用率对进程排序

    https://blog.csdn.net/weixin_42123737/article/details/90081318

  7. leetcode-mid-dynamic programming- Longest Increasing Subsequence-NO

    不会... 参考: 思路类似于coin那个题,for循环中在满足条件时就及时更新当下位置的信息 def lengthOfLIS(nums): """ :type nums ...

  8. Oracle数据库用户的密码过期问题处理

    SQL> select username, user_id, account_status,expiry_date, profile from dba_users where username ...

  9. MyRocks安装部署

    参考:https://www.cnblogs.com/WonderHow/p/5621591.html CentOS 7.3 gflags:git clone https://github.com/g ...

  10. kafka 通信报文格式

    1. 序列化一条消息 消息有 key 和 value kafka 提供了基础数据类型的序列化工具,对于业务的自定义类需要自行实现序列化 ProducerRecord 是对象,含 KV 和 header ...