• 枚举对象属性

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. 各种注意事项(还有c++的一些操作)

    转c++时间: 2017年8月9号 1.记得打头文件 2.=与==的区别(赋值|比较) 3.各种运算符的比较级(与Pascal不同),主要是==与位运算 *4.在OJ上scanf和printf时间优于 ...

  2. Spring Boot 的各种start

    新建一个springBoot项目时,你会选择很多依赖,在项目中的build.gradle中你会看见各种start,例如下边的代码: 今天就在这里列举一下各种start: 1.spring-boot-s ...

  3. html body标签 语法

    html body标签 语法 标签body是什么意思? 标签body是一个网页的身体部分,也就是用于定义网页的主体内容,也是一个HTML文档中必须的部分. 作用:定义文档的主体. 广州大理石机械构件 ...

  4. Netty 介绍和应用场景(一)

    1.为什么选择Netty 需要了解了Socket通信(IO/NIO/AIO)编程,对于通信模型已经有了一个基本的认识.,果想把这些真正的用于实际工作中,那么还需要不断的完善.扩展和优化.比如经典的TC ...

  5. (44)FreeRTOS学习之一

    一:FreeRTOS 作为一个轻量级的操作系统,FreeRTOS 提供的功能包括:任务管理.时间管理.信号量.消息队列.内存管理.记录功能等,可基本满足较小系统的需要.FreeRTOS 内核支持优先级 ...

  6. BZOJ 1022 Luogu P4279 [SHOI2008]小约翰的游戏 (博弈论)

    题目链接: (bzoj) https://www.lydsy.com/JudgeOnline/problem.php?id=1022 (luogu) https://www.luogu.org/pro ...

  7. [CSP-S模拟测试]:maze(二分答案+最短路)

    题目传送门(内部题88) 输入格式 第一行两个数$n,m$.第二行四个数$sx,sy,tx,ty$.分别表示起点所在行数.列数,终点所在行数.列数.接下来$n$行,每行$m$个数,描述迷宫.最后一行一 ...

  8. Maven构建生命周期

    以下引用官方的生命周期解释https://maven.apache.org/guides/introduction/introduction-to-the-lifecycle.html: 一.构建生命 ...

  9. ali之monkey学习

    monkey主要用来进行压力测试,稳定性测试 http://www.cnblogs.com/yyangblog/archive/2011/03/10/1980068.html 1,什么是monkey ...

  10. Redis大key的发现与删除方法全解析

    个推作为国内第三方推送市场的早期进入者,专注于为开发者提供高效稳定的推送服务,经过9年的积累和发展,服务了包括新浪.滴滴在内的数十万APP.由于我们推送业务对并发量.速度要求很高,为此,我们选择了高性 ...