ES5-ES6-ES7_对象的扩展
简化的对象写法
省略同名的属性值,省略方法的function
let x = 1;
let y = 2;
let point = {
x,
y,
setX (x) {
this.x = x
}
};
console.log(point)
Object.create(prototype, [descriptors])
以指定对象(prototype)为原型创建新的对象,为新的对象指定新的属性, 并对属性进行描述(descriptors)
- value : 指定值
- writable : 标识当前属性值是否是可修改的, 默认为false
- configurable: 标识当前属性是否可以被删除 默认为false
- enumerable: 标识当前属性是否能用for in 枚举 默认为false
var obj1 = {
name: 'huang',
age: 13
}
var obj2 = {}
obj2 = Object.create(obj1, {
sex: {
value: '男',
writable: true
}
});
console.log(obj2)
console.log(obj1)
// 以obj1为原型创建的对象obj2,是不能继承obj1对象下的属性的,在obj2中作为原型存在
// 可以获取到并且可以修改
console.log(obj2.name) // huang
obj2.name = 'liu'
console.log(obj2.name) // liu
// 新增的属性,进行操作的时候要看创建的时候是怎么描述的,可不可以修改,删除等
console.log(obj2.sex) // 男
delete obj2.sex // 运行结果没有删掉,是因为创建这个属性的时候默认是不可以删除的
Object.defineProperties(object, descriptors)
为指定对象定义扩展多个属性
get :用来获取当前属性值得回调函数(当获取扩展属性的时候会自动调用)
set :修改当前属性值得触发的回调函数,并且实参即为修改后的值
存取器属性:setter,getter一个用来存值,一个用来取值
var obj = {
firstName: 'kobi',
lastName: 'bulanen'
}
Object.defineProperties(obj, {
fullName: {
get: function () {
return this.firstName + ' ' + this.lastName
},
set: function (data) { // 监听扩展属性,当扩展属性发生变化的时候会自动调用,自动调用的时候会将变化的值作为实际参数注入到set函数中
var names = data.split(' ')
this.firstName = names[0]
this.lastName = names[1]
}
}
})
console.log(obj)
console.log(obj.fullName) //kobi bulanen
obj.firstName = 'tim' // 原来的属性可以这样修改
obj.lastName = 'can' // 扩展的属性也可以这样修改,但是这个属性扩展的时候必须要有set方法
console.log(obj.fullName) //tim can
对象本身其实也有这个get和set方法
对象本身的两个方法
get propertyName(){} 用来得到当前属性值的回调函数
set propertyName(){} 用来监视当前属性值变化的回调函数
var obj = {
firstName: 'kobi',
lastName: 'bulanen',
get fullName() {
return this.firstName + ' ' + this.lastName
},
set fullName(data) {
var names = data.split(' ')
this.firstName = names[0]
this.lastName = names[1]
}
}
console.log(obj.fullName) //kobi bulanen
obj.fullName = 'tim can' // 当对象没有set方法的时候是修改不成功的
console.log(obj.fullName) // tim can
Object.is(v1, v2)
判断2个数据是否完全相等
let Obj1 = {
name: 'huang'
}
let Obj2 = {
name: 'huang'
}
console.log(0 == -0) // true
console.log(NaN == NaN) // false NaN跟任何数据都不相等
console.log(Object.is(0, -0)) // false
console.log(Object.is(NaN, NaN)) // true
console.log(Object.is(Obj1, Obj2)) // false
Object.assign(target, source1, source2..)
将源对象的属性复制到目标对象上
let Obj1 = {
name: 'huang'
}
let Obj2 = {
name: 'liu'
}
let Obj3 = {}
// 第一个是目标对象,第二个开始就要复制属性的对象
// 如果复制的属性有重复的情况,那么结果是最后一个对象的属性
Object.assign(Obj3, Obj1, Obj2)
console.log(Obj3) // {name: "liu"}
直接操作 __proto__ 属性
let Obj1 = {
moneny: 30000
}
let Obj2 = {}
Obj2.__proto__ = Obj1 // 表示的是obj1是obj2的原型
console.log(Obj2) //他还是个空对象,但是会有obj1的原型
console.log(Obj2.moneny) // 能够获取到obj1原型下的moneny属性的值
ES5-ES6-ES7_对象的扩展的更多相关文章
- ES6 对对象的扩展
1.对象类别 普通对象:具有JavaScript对象的所有默认内部行为 特异对象: 具有某些与默认行为不符的内部行为 标准对象: ECMAScript 6 规范中新定义的对象,例如Array,Date ...
- ES6中对象的扩展
ES6不仅为字符串.数值和数组带来了扩展,也为对象带来了很多新特性.这一节,我们来一起学习一下对象的扩展. 对象的传统表示法 我们回顾一下,对象的传统表示法: let person = { " ...
- 关于es6中对象的扩展
1.Object.is() es5比较两个值是否相等,只有两个运算符,相等(==) 和 严格相等(===),他们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0 等于 -0.es6提 ...
- ES6 之 对象的扩展
1.Object.is() 判断俩个值是否相等 +0 不等于 -0 NaN 等于自身 console.log(Object.is('foo','foo')); // true console.log( ...
- es6学习笔记--字符串&数值&数组&函数&对象的扩展
这几天抽空学习了es6语法,关于字符串,数值,数组,函数以及对象的扩展,看到es6标准入门这本书,里面讲的扩展特别多,我认为有几部分在项目上用不到,就挑有用的当笔记学习了. 字符串的扩展 str.in ...
- ES6的新特性(9)——对象的扩展
对象的扩展 属性的简洁表示法 ES6 允许直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. const foo = 'bar'; const baz = {foo}; baz // {f ...
- ES6对象的扩展及新增方法
1.属性的简洁表示法 ES6允许直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. const foo = 'bar'; const baz = {foo}; baz//{foo:'bar ...
- ES6学习笔记(8)----对象的扩展
参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 对象的扩展 1.属性名的简洁表示法 : ES6允许在代码中直接写变量,变量名是属性名,变量值是属 ...
- ES6 数组、对象的扩展
8. 数组的扩展 扩展运算符(...),将一个数组转为用逗号分隔的参数序列. 复制数组 const a2=[...a1] 合并数组 [...arr1, ...arr2, ...arr3]; arr1. ...
- ES6(阮一峰)对象的扩展
1.属性的简洁表示法 允许直接写入变量和函数,作为对象的属性和方法. const foo = 'bar'; const baz = {foo};//等同于 const baz = {foo : &qu ...
随机推荐
- .NET使用ServerManager获取网站物理路径
最近因为工作需要,用wpf做了一个辅助小工具,如下图 为了获取网站的物理路径,我分析了通过ServerManager获取到的变量,也通过百度搜索了很多,但仍然没有找到方法. 后来使用必应,在国外网站找 ...
- react children
children react 中,属性名是一一对应的,除了children. 对于一个组件来说,其this.props.children拿到的是什么呢???举个
- WORLD 文件选择的操作方法
1,按住鼠标左键拖动选择文本. 2,双击鼠标可选中光标前面一个字,如果光标左右两边是一个词,那么就会选中整个词. 3,三击-----整段. 4,光标(鼠标)移至文本左边(外面),变成向右倾斜的光标箭头 ...
- JS对url进行编码和解码(三种方式区别)
Javascript语言用于编码的函数,一共有三个,最古老的一个就是escape().虽然这个函数现在已经不提倡使用了,但是由于历史原因,很多地方还在使用它,所以有必要先从它讲起. escape 和 ...
- HTML5中的input type为file控件限制上传文件类型及扩展
简单介绍 input file控件限制上传文件类型如下:1.文件类型中间用,分开:2.html和htm这样的要写成两个: 3实例: <input type="file" na ...
- clipboard.js -- js实现将文本复制到剪贴板的方法
资源 推荐使用:clipboard.js 官方教程地址:https://clipboardjs.com/#example-text 官方github地址:https://github.com/zeno ...
- 直接插入排序算法的C++实现
直接插入算法:每趟将一个待排序的关键字按照其值的大小插入到已经排好的部分有序序列的适当位置上,直到所有待排序的关键字都被插入到有序序列中为止. 理论上,在直接插入排序中第二层循环是可以提前结束的,即某 ...
- eNSP 常用操作
1.eNSP关闭保存文件的提示信息 总是提示如下信息: Oct 12 2017 23:49:24-08:00 Huawei DS/4/DATASYNC_CFGCHANGE:OID 1.3.6.1.4. ...
- vue axios数据请求get、post方法的使用
我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入 ...
- Android RecycleView多种布局实现(工厂模式)
RecycleView是个很常用的控件,很多APP中都可以看到它的身影,同时它也是个很难用的控件,主要就难在多种布局的实现. 在<第一行代码—Android>这本书里边有个RecycleV ...