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 ...
随机推荐
- 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 ...
- Selenium 警告框处理
警告框分三种类型: alert:显示带有一条指定消息和一个 OK 按钮的警告框. confirm:显示一个带有指定消息和 OK 及取消按钮的对话框. prompt:显示可提示用户进行输入的对话框. 我 ...
- (60) 结构体指针、结构体变量嵌套、结构体指针嵌套、函数指针、数组指针、指针数组、typedef 综合运用
#include<stdio.h> #include<iostream> #include<malloc.h> /* author : 吴永聪 program: 结 ...
- logstash之OutPut插件
output插件是经过了input,然后过滤结构化数据之后,接下来我们需要借助output传到我们想传到的地方.output相当于一个输出管道. 2.3.1: 将采集数据标准输出到控制台 配置示例: ...
- C++学习一二
为了更深入的学习程序编写,以及进行相关算法的编写.决定每天花点时间学习C++:以下是每天的学习笔记. 一.std代表命名空间,可以用using来省略. 二.std:endl.输出一个换行符,并且“刷新 ...
- linux系统PS命令,按CPU、内存使用率对进程排序
https://blog.csdn.net/weixin_42123737/article/details/90081318
- leetcode-mid-dynamic programming- Longest Increasing Subsequence-NO
不会... 参考: 思路类似于coin那个题,for循环中在满足条件时就及时更新当下位置的信息 def lengthOfLIS(nums): """ :type nums ...
- Oracle数据库用户的密码过期问题处理
SQL> select username, user_id, account_status,expiry_date, profile from dba_users where username ...
- MyRocks安装部署
参考:https://www.cnblogs.com/WonderHow/p/5621591.html CentOS 7.3 gflags:git clone https://github.com/g ...
- kafka 通信报文格式
1. 序列化一条消息 消息有 key 和 value kafka 提供了基础数据类型的序列化工具,对于业务的自定义类需要自行实现序列化 ProducerRecord 是对象,含 KV 和 header ...