object in javascript
枚举对象属性
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://segmentfault.com/a/1190000011300742
object in javascript的更多相关文章
- 向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 ...
- IOS Object和javaScript相互调用
在IOS开发中有时会用到Object和javaScript相互调用,详细过程例如以下: 1. Object中运行javascript代码,这个比較简单,苹果提供了非常好的方法 - (NSString ...
- 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 ...
- How to access the properties of an object in Javascript
Javascript has three different kinds of properties: named data property, named accessor property and ...
- What is an Activation object in JavaScript ?
********************* from Professional JavaScript for Web Development Execution Context And Scope T ...
- Iterable object of JavaScript
数组是可迭代的,所以数组可以用于for of,字符串也是可迭代的,所以字符串也可以用作for of,那么,对象呢? 试一试: var somebody = { start:0, end:100 } f ...
- 详解javascript,ES5标准中新增的几种高效Object操作方法
1.Object 对象 (JavaScript) 提供对所有 JavaScript 对象通用的功能.参考网站:https://msdn.microsoft.com/zh-cn/library/kb6t ...
- JavaScript: 认识 Object、原型、原型链与继承。
目录 引用类型与对象 类与对象 成员组成 成员访问 实例方法 / 属性 引用类型与对象 JavaScript 存在着两种数据类型:"基本数据类型" 与 "引用数据类型&q ...
- JavaScript原型链以及Object,Function之间的关系
JavaScript里任何东西都是对象,任何一个对象内部都有另一个对象叫__proto__,即原型,它可以包含任何东西让对象继承.当然__proto__本身也是一个对象,它自己也有自己的__proto ...
随机推荐
- 各种注意事项(还有c++的一些操作)
转c++时间: 2017年8月9号 1.记得打头文件 2.=与==的区别(赋值|比较) 3.各种运算符的比较级(与Pascal不同),主要是==与位运算 *4.在OJ上scanf和printf时间优于 ...
- Spring Boot 的各种start
新建一个springBoot项目时,你会选择很多依赖,在项目中的build.gradle中你会看见各种start,例如下边的代码: 今天就在这里列举一下各种start: 1.spring-boot-s ...
- html body标签 语法
html body标签 语法 标签body是什么意思? 标签body是一个网页的身体部分,也就是用于定义网页的主体内容,也是一个HTML文档中必须的部分. 作用:定义文档的主体. 广州大理石机械构件 ...
- Netty 介绍和应用场景(一)
1.为什么选择Netty 需要了解了Socket通信(IO/NIO/AIO)编程,对于通信模型已经有了一个基本的认识.,果想把这些真正的用于实际工作中,那么还需要不断的完善.扩展和优化.比如经典的TC ...
- (44)FreeRTOS学习之一
一:FreeRTOS 作为一个轻量级的操作系统,FreeRTOS 提供的功能包括:任务管理.时间管理.信号量.消息队列.内存管理.记录功能等,可基本满足较小系统的需要.FreeRTOS 内核支持优先级 ...
- BZOJ 1022 Luogu P4279 [SHOI2008]小约翰的游戏 (博弈论)
题目链接: (bzoj) https://www.lydsy.com/JudgeOnline/problem.php?id=1022 (luogu) https://www.luogu.org/pro ...
- [CSP-S模拟测试]:maze(二分答案+最短路)
题目传送门(内部题88) 输入格式 第一行两个数$n,m$.第二行四个数$sx,sy,tx,ty$.分别表示起点所在行数.列数,终点所在行数.列数.接下来$n$行,每行$m$个数,描述迷宫.最后一行一 ...
- Maven构建生命周期
以下引用官方的生命周期解释https://maven.apache.org/guides/introduction/introduction-to-the-lifecycle.html: 一.构建生命 ...
- ali之monkey学习
monkey主要用来进行压力测试,稳定性测试 http://www.cnblogs.com/yyangblog/archive/2011/03/10/1980068.html 1,什么是monkey ...
- Redis大key的发现与删除方法全解析
个推作为国内第三方推送市场的早期进入者,专注于为开发者提供高效稳定的推送服务,经过9年的积累和发展,服务了包括新浪.滴滴在内的数十万APP.由于我们推送业务对并发量.速度要求很高,为此,我们选择了高性 ...