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 ...
随机推荐
- 2019春Python程序设计作业1(0319-0325)
判断题 1-1 在Python 3.x中可以使用中文作为变量名. (2分) T F Python变量使用前必须先声明,并且一旦声明就不能再当前作用域内改变其类型.(2分) T ...
- js 获取dom 为null 测试
<!DOCTYPE html> <html> <head> </head> <body> <h1> 这是H1 </h1&g ...
- node.js入门学习(一)环境安装,REPL,fs模块,path模块,http模块
一.node.js介绍 1.1.node.js是什么 官网首页总结:Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时. 1)node.js是一个开发平台,就像j ...
- 那些10w+的公众号都在写什么?
出于好奇,那些10w+的公众号都写了些什么,于是我写了几个脚本爬取了各行业Top的公众号文章,进行了关键词统计. 抓取数据.分析用到了3中语言:Node.js,Java,Python.废话不多说,直接 ...
- Codeforces 919D Substring ( 拓扑排序 && DAG上的DP )
题意 : 给出含有 N 个点 M 条边的图(可能不连通或者包含环),每个点都标有一个小写字母编号,然后问你有没有一条路径使得路径上重复字母个数最多的次数是多少次,例如图上有条路径的顶点标号顺序是 a ...
- Spring Boot教程(十九)RESTful API单元测试
下面针对该Controller编写测试用例验证正确性,具体如下.当然也可以通过浏览器插件等进行请求提交验证. @RunWith(SpringJUnit4ClassRunner.class) @Spri ...
- python-opencv学习第一章
一.opencv读入图像 retval=cv2.imread(文件名[,显示控制参数]) 常用三个参数如下 CV. IMREAD_UNCHANGED 不改变原先什么样子现在就是什么样子 CV. IMR ...
- React曾经忽略的知识点(上)
1.JSX 防注入攻击 你可以放心地在 JSX 当中使用用户输入 const title = response.potentiallyMaliciousInput; // 直接使用是安全的: cons ...
- 20165218 《网络对抗技术》Exp6 信息收集与漏洞扫描
Exp6 信息收集与漏洞扫描 实践过程记录 一.各种搜索技巧的应用 1_搜索网址目录结构 dir_scanner use auxiliary/scanner/http/dir_scanner This ...
- JPagination分页插件的使用(ASP.NET中使用)
前台代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.asp ...