ES6-Object‘s Extends
依赖文件地址 ：https://github.com/chanceLe/ES6-Basic-Syntax/tree/master/js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[es6]-08-对象的扩展</title>
<script src="./js/browser.js"></script>
<script type="text/babel">
/*
* 对象的扩展
*/ /*属性的简洁表示法
* ES6允许直接写入变量和函数，作为对象的属性和方法。
* 这样书写更加简洁。
*/ var foo = 'bar';
var baz = {foo};
console.log(baz);
//等同于 var baz2 = {foo:foo};
/*
* 上面代码表明，ES6允许在对象之中，只写属性名，不写属性值。
* 这时，属性值等于属性名所代表的变量。下面还有个例子：
*/
function f(x,y){
return {x,y}
}
//等价于
function f1(x,y){
return {x:x,y:y}
}
console.log(f(1,2));
// 方法也可以简写
var o = {
method(){
return "hello!";
}
}
console.log(o.method()); //hello!
//下面是一个实际的例子
var birth = '2000/01/01';
var Person = {
name:"zhangdan",
birth,
hello(){
console.log("my name is ",this.name);
}
}
Person.hello();
//这种写法用于函数的返回值，将会非常方便。
function getPoint(){
var x=1;
var y=10;
return {x,y};
}
console.log(getPoint()); //CommonJS模块输出变量，就非常合适使用简洁写法。
var ms = {};
function getItem(key){
return key in ms? ms[key]:null;
}
function setItem(key,value){
ms[key] = value;
}
function clear(){
ms = {};
}
//module.exports = {getItem,setItem,clear};
//等价于
/*module.exports = {
getItem:getItem,
setItem:setItem,
clear:clear
}
*/
//注意简洁写法的属性名总是字符串，这会导致一些看上去比较奇怪的结果。
var obj = {
class(){
console.log("class");
}
}
//上面代码中，class是字符串，所以不会因为它属于关键字，而导致语法解析报错。
//如果某个方法的值是一个Generator函数，前面需要加上星号。
/*
var obj = {
* m(){
yield "hello world!";
}
}
console.log(obj.m(),"haha");
*/
//上面的代码中，报错？？？ /*
* 属性名表达式
* js语言定义对象的属性，有两种方法：
* obj.foo = true;
* obj["a"+"bc"] = 123;
* 方法一直接用标识符作为属性名，方法二是用表达式作为属性名，这时要将表达式放在[]内。
* 但是，如果使用字面量方式定义对象（使用大括号），在es5中只能使用方法一（标识符）定义属性。
*
* es6允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即把表达式放在[]内。
*/
let propKey = "foo";
let obj2 = {
[propKey]:true,
['a'+'bc']:123
}
console.log(obj2);
//表达式还可用于定义方法名。
let obj3={
["h"+"ello"](){
return "hi";
}
}
console.log(obj3.hello());
//属性名表达式与简洁表示法，不能同时使用会报错。 /*
* 方法的name属性
* 函数的name属性，返回函数名。对象方法也是函数，因此也有name属性。
*/
var person = {
sayName(){
console.log(this.name);
},
firstName(){
return "nicholas"
}
}
console.log(person.sayName.name);
console.log(person.firstName.name);
//上面代码中，方法的name属性返回函数名。
//如果使用了取值函数，则会在方法前加上get，
// 存值函数，会加上set。（但是，实际上，我并没能分出来这个区别。） //两种特殊情况：bind方法创造的函数，name属性返回bound+函数名，
// Function构造函数创造的函数，name属性返回anonymous。
console.log((new Function()).name); //anonymous。
var doSomething = function(){}
console.log(doSomething.bind().name); //bound doSomething //如果对象的方法是一个Symbol值，namname属性返回这个Symbol值的描述。
const key1 = Symbol("description");
const key2 = Symbol();
let obj4 = {
[key1](){},
[key2](){}
}
console.log(obj4[key1].name); //''
console.log(obj4[key2].name); //''
//事实上，打出来是完全一样的，？？？ /*
* Object.is()
* es5可以通过下面的代码，部署Object.is()
*/
Object.defineProperty(Object,"is",{
value:function(x,y){
if(x===y){
//针对+0不等于-0的情况
return x!==0 || 1/x === 1/y;
}
//针对NaN的情况
return x !==x && y!==y;
},
configurable:true,
enumerable:false,
writable:true
}) /*
* Object.assign()
* 该方法用于对象的合并，将源对象的所有可枚举属性，复制到目标
* 对象。
* 第一个参数是目标对象，剩下的参数都是源对象。
* 如果有同名属性，后面的属性会覆盖前面的属性。
* 如果只有一个参数，就返回这个参数。如果这个参数不是对象，会先转换成对象。
* 由于undefined和null无法转成对象，所以他们作为参数会报错。
*
* 如果非对象出现在源对象的位置（即非首参数），首先这些参数都会转成对象，如果
* 无法转成对象，就会跳过。这意味着如果undefined和null不在首参数，就不会报错。
*
* 其他类型的值，不在首参数也不会报错，但只有字符串会合入目标对象，数值和布尔值都会被
* 忽略，因为只有字符串的包装对象会产生可枚举的实义属性。数值和布尔值转成的包装对象
* 他们的原始值都存放在[[PrimitiveValue]]:"false"属性中。不会被Object.aasign()拷贝。
*
* Object.assgn()不拷贝继承属性，也不拷贝不可枚举属性（enumerable：false）
*/
var target = {a:1};
var source1 = {b:2};
var source2 = {c:3};
var source3 = {b:5};
Object.assign(target,source1,source2,source3);
console.log(target);
console.log(Object.assign(target) === target); //true console.log(Object.assign({a:"b"},{[Symbol("c")]:"d"}));
//结果显示属性名为Symbol值的属性，也会被Object.assign拷贝。 //注意点，Object.assign()方法实行的是浅拷贝，也就是说，如果属性值是一个对象，那么目标对象拷贝到的
//是这个对象的引用。
//对于嵌套的对象，一旦遇到同名属性，Object.assign()的处理方法是替换，而不是添加。 //Object.assign()可以用来处理数组，但是会把数组当做对象，并且一定会覆盖索引相同的值.
console.log(Object.assign([1,2,3],[4,5])); //[4,5,3] /*
* 用途： 1.为对象添加属性 2.为对象添加方法 3.克隆对象
* 4.将多个对象合并到某个对象。
* 5.为属性指定默认值，这个跟jquery插件开发的那个东西一样。
*/
function clone(origin){
return Object.assign({},origin);
}
//上面代码将原始对象拷贝到一个空对象，就得到了原始对象的克隆。不过上面这种不能克隆继承的值，如果
//要保持继承链，可以用下面的代码: function clone2(origin){
let originProto = Object.getprototypeOf(origin);
return Object.assign(Object.create(originProto),origin);
} /*
* 属性的可枚举性。
* 对象的每个属性都有一个描述对象，用来控制该属性的行为。
* Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。
*/
let obj5 = {foo:123};
console.log(Object.getOwnPropertyDescriptor(obj5,'foo'));
/*
* 描述对象的enumerable就是可枚举性，es5有三个操作会忽略enumerable:false的属性:
* for...in...循环：只遍历对象自身的和继承的可枚举属性。
* Object.keys() 返回对象自身的所有可枚举属性的键名
* JSON.stringify()：只串行化对象自身的可枚举属性
*
* ES6新增的Object.assign会忽略enumerable:false的属性。
* 这四个操作中，只有for...in...会返回继承的属性。
* 另外，ES6规定，所有class的原型的方法都是不可枚举的。
*/
let k = Object.getOwnPropertyDescriptor(class {foo(){}}.prototype,"foo").enumerable;
console.log(k); //false //总的来说，操作中引入继承的属性会让问题复杂化，大多数时候，我们只关心对象自身的属性。
//所以，尽量不要用for...in...循环，而用Object.keys()代替。 /*
* 属性的遍历
* ES6一共有5种方法遍历对象的属性。
* 1.for...in ：循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）。
* 2.Object.keys(obj) : 返回一个数组，包括对象自身的(不含继承的)所有可枚举属性（不含Symbol属性）。
* 3.Object.getOwnpropertyNames(obj) :返回一个数组，包含对象自身的所有属性(不含Symbol属性，但是包括不可枚举属性)。
* 4.Object.getOwnPropertySymbols(obj) : 返回一个数组，包含对象自身的所有Symbol属性。
* 5.Reflect.ownKeys(obj) :返回一个数组，包含对象自身的所有属性，不管属性名是Symbol或字符串，也不管是否可枚举。
*
* 以上5种方法遍历对象的属性，都遵守同样的属性遍历次序规则：
* 首先遍历所有属性名为数值的属性，按照数字排序。
* 其次遍历所有属性为字符串的属性，按照生成时间排序。
* 最后遍历所有属性名为Symbol值的属性，按照生成时间排序。
* 下面有个例子：
*/
let m = Reflect.ownKeys({[Symbol()]:0,b:0,10:0,2:0,a:0});
console.log(m); //结果体现了遍历的次序规则。 //_proto__属性，Object.setPrototypeOf()和Object.getprototypeOf()
/*
* __proto__属性，用来设置或读取当前对象的prototype对象。目前所有浏览器（包括IE11）都部署了这个属性。
*/ /*
//es6的写法
var obj6 = {
method(){}
}
obj6.__proto__ = someOtherObj; //es5的写法
var obj7 = Object.create(someOtherObj);
obj.method = function(){}
*/
/*
* 该属性没有写入es6的正文，而是写入了附录，原因是双下划线说明它本质上是一个内部属性。而不是一个正式的对外的API，
* 只是由于浏览器的广泛支持，才被加入ES6。标准明确规定，只有浏览器必须部署这个属性，其他环境不一定要部署，而且新的
* 代码最好是认为这个属性不存在的。因此最好不要使用这个属性，而是用下面的Object.setprototypeOf()Object.getprototypeOf()
* 和Object.create()代替。
*
* 在实现上，__proto__调用的是Object.prototype.__proto__。
* 如果一个对象部署了__proto__属性，该属性的值就是对象的原型。
*/ /*
* Object.setPrototypeOf()
* 作用与__proto__相同，是es6官方推荐的设置对象原型的方法。
* 格式： Object.setPrototypeOf(object,prototype);
* 下面是一个例子：
*/
let proto = {};
let obj8 = {x:10};
Object.setPrototypeOf(obj8,proto);
proto.y = 20; proto.z = 25;
console.log(obj8.x,obj8.y,obj8.z) ; //10，20，25 /*
* Object.getPrototypeOf()与上一个配套，用于读取一个对象的prototype对象。
*/
console.log(Object.getPrototypeOf(obj8));
</script>
</head>
<body>
</body>
</html>
ES6-Object‘s Extends的更多相关文章
- es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- es6 Object.assign
ES6 Object.assign 一.基本用法 Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target).它至少需要两个对象作为参数,第一个参数是目 ...
- js es6 Object.freeze
将对象冻结,使用Object.freeze方法 const foo = Object.freeze({}); // 常规模式时,下面一行不起作用: // 严格模式时,该行会报错 foo.prop = ...
- es6 Object对象扩展新方法
ES6给Object拓展了许多新的方法,如: keys(obj):获取对象的所有key形成的数组 var obj = { foo: 'bar', baz: 42 }; Object.keys ...
- [ES6] Object.assign (with defaults value object)
function spinner(target, options = {}){ let defaults = { message: "Please wait", spinningS ...
- es6 Object的几个新方法
扩展对象 Object.preventExtensions Object.isExtensible 密封对象 Object.seal Object.isSealed 冻结对象 Object.freez ...
- es6 Object 数据属性和访问器属性
原文 :http://www.jb51.net/article/91698.htm 总结 ES5提供了Object.getOwnPropertyDescripter()方法来获取给定属性的描述符. p ...
- es6 Object.assign(target, ...sources)
Object.assign() 方法用于将所有可枚举属性(对象属性)的值从一个或多个源对象复制到目标对象.它将返回目标对象. 语法 Object.assign(target, ...sources) ...
- ES6 Object.setPrototypeOf ()方法和defineProperty()方法的使用
将一个指定的对象的原型设置为另一个对象或者null(既对象的[[Prototype]]内部属性). 示例: <script type="text/javascript"> ...
- ES6 object.defineProperty
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象. Object.defineProperty(obj, prop, ...
随机推荐
- 201709011工作日记--ART与Dalvik&&静态类与非静态类
1.ART 与 Dalvik 的优缺点对比 什么是Dalvik:Dalvik是Google公司自己设计用于Android平台的Java虚拟机.dex格式是专为Dalvik应用设计的一种压缩格.Dalv ...
- （最小生成树） Networking -- POJ -- 1287
链接: http://poj.org/problem?id=1287 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 7494 ...
- Hdu1427 速算24点 2017-01-18 17:26 46人阅读 评论(0) 收藏
速算24点 Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Submiss ...
- Java web 调试技巧之查看浏览器中调试中的network
在java web开发过程中尤其后台开发经常需要查看浏览器调试中的network项:今天在开发在线预览系统时用到了flexpaper插件,这个插件会调用FlexPaperViewer.swf这个软件( ...
- Android-AppUtils工具类
常用APP的工具类,包含版本号.版本名称.安装的应用程序ICON public class AppUtils { private AppUtils(){} /** * 设置状态栏的颜色 * @para ...
- Androd Studio测试
测试的分类: 在软件开发领域,程序员开发编码后,需要测试部门的测试,才可以发布软件版本,所以对测试的概念需要了解: 黑盒测试:我的理解是,黑盒测试更多的是体力活,按照测试用例,在屏幕上不停的操作的方式 ...
- L-BFGS
L-BFGS算法比较适合在大规模的数值计算中,具备牛顿法收敛速度快的特点,但不需要牛顿法那样存储Hesse矩阵,因此节省了大量的空间以及计算资源.本文主要通过对于无约束最优化问题的一些常用算法总结,一 ...
- 摘抄-----java codeReview要做的事
整洁的代码 清单项目 分类 使用可以表达实际意图(Intention-Revealing)的名称 有意义的名称 每一个概念只用一个词 有意义的名称 使用方案/问题领域名称 有意义的名称 类应该是比较小 ...
- DevOps Workshop 研发运维一体化（成都站) 2016.05.08
成都的培训与广州.上海.北京一样,只是会议室比较小,比较拥挤,大家都将就了.可惜换了电脑以后,没有找到培训时的照片了,遗憾. 培训思路基没有太大变化,基本按照下面的思路进行: 第一天对软件开发的需求管 ...
- Team Foundation Server (TFS)与Project Server集成，使用DNS（友好地址）地址注册PWA
问题描述: 当Team Foundation Server(TFS 2010/2012/2013)与Project Server高可用性的环境集成时,必然会使用Project Server (PWA) ...