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, ...
随机推荐
- C#-派生类
VS派生类 继承.派生类 class AClass : FClass 构建函数继承 public classname (string astring): base(astring){};默认不继承基类 ...
- 测试-LoadRunner
1录脚本 设置解析方式,html形式,会精炼成一个函数,此时找有用的url,写出函数:url方式,函数比较多. 参数化 两参数成对时,在脚本处选成对. 加上进程,加上返回值判断. 最后一段接口url, ...
- MODIS产品分析和数据处理
ENVI+IDL 17种MODIS产品的功能解释 https://wenku.baidu.com/view/6fd329dcf524ccbff0218440.html ENVI读取MODIS数据大致步 ...
- 关于单例的DCL方式分析
public class Singleton { /** * 单例对象实例 */ private volatile static Singleton instance = null; public s ...
- Android-天气预报Demo-JSON数据解析
在上两篇博客,Android-解析JSON数据(JSON对象/JSON数组),Android-Gson解析JSON数据(JSON对象/JSON数组),是介绍了解析本地文件里面的JSON数据: Andr ...
- python 应用 base64、hmac、hashlib包实现：MD5编码 base64编码解码、SHA256编码、urlsafe_b64encode编码等等基本所有的加密签名的方法
用python做HTTP接口自动化测试的时候,接口的很多参数是经过各种编码加密处理后在传到后台的,这里列举出python实现 应用 base64.hmac.hashlib包实现:md5编码 sha1编 ...
- AOP编程的学习总结
前几天听到一个同事说起AOP 然后就想学习下应用到项目中去,自己也是在网上找了很多的资料,之后发现 网上的大部分资料的内容几乎都是如出一撤,于是自己就整理了一下再加上这几天的学习总结到的知识写到这篇文 ...
- CentOS7布署.Net Core
本文记录的所有东西,都是吸取别人的经验,自己实践得来,记录下来,也是为了某一天,用上的时候,能够更加的得心应手,平日的学习,都是未雨绸缪之举,但愿,这些笔记,也能帮上正在摸索的你. 第一步,下载虚拟机 ...
- STL在数组算法的使用
find(a:起始位置 , b: 终止位置 , c: 要查找的内容) ------>查找寻找内容的位置 count(a:起始位置 , b: 终止位置 , c: 要查找的内容) -- ...
- hdoj1435 Stable Match（稳定婚姻问题）
简单稳定婚姻问题. 题目描述不够全面,当距离相同时容量大的优先选择. 稳定婚姻问题不存在无解情况. #include<iostream> #include<cstring> # ...