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, ...
随机推荐
- hdu1081 To The Max 2016-09-11 10:06 29人阅读 评论(0) 收藏
To The Max Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...
- C++虚函数表(vtbl)
C++的虚函数的作用就是为了实现多态的机制,利用内存的指针偏移来实现将基类型的指针指向的内存空间用子类对象来初始化.这样经过内部虚表的运作,实现可以通过基类指针来调用子类所定义的方法. 这种技术,其实 ...
- 拷贝构造函数——防篡改
对于普通类型的对象来说,他们之间的复制是简单的,比如: int a = 88; int b = a; 而类和普通对象不同,类对象内部结构一般较为复杂,存在各种成员变量. #include <io ...
- SSH登录警告（WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!）
在配置本机与docker容器实现ssh无密码访问时出现以下报错 # federico @ linux in ~ [18:35:52] C:127$ sudo ssh-copy-id -i .ssh/i ...
- Vue2.5 Web App 项目搭建 (TypeScript版)
参考了几位同行的Blogs和StackOverflow上的许多问答,在原来的ng1加TypeScript以及Webpack的经验基础上,搭建了该项目,核心文件如下,供需要的人参考. package.j ...
- 查看sql server数据库连接数的三种方法
怎样才能查看sql server数据库连接数呢?下面就将为您介绍三种查看的方法,供您参考,希望能够帮助到您. 1.通过系统的“性能”来查看:开始->管理工具->性能(或者是运行里面输入 m ...
- 用C#开发的双色球走势图（原创）值得园友拥有（二）接上一篇
昨晚由于时间的原因只写了一部分内容,今天将这一部分内容补充完毕,多谢各位园友的支持. 这是用C#开发的双色球走势图(原创)值得园友拥有 新的园友可以看昨晚写的内容,以免脱节.首先回复园友的评论,有说好 ...
- kubernetes 应用基本准则
不要直接部署裸的Pod. 为工作负载选择合适的Controller. 使用Init容器确保应用程序被正确的初始化. 在应用程序工作负载启动之前先启动service. 使用Deployment hist ...
- ODP.NET 之 ExecuteNoQuery 执行 Merge into 返回值
当执行Oracle.ManagedDataAccess.Client.OracleCommand.ExecuteNonQuery时,如果sql语句是 merge into ...,则返回值表现不稳定, ...
- PaaS服务之路漫谈（三）
此文已由作者尧飘海授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. Monolithic架构在产品访问量很大的情况下,有可能常会导致整个产品迭代或升级过程不能按预期进行,或者上 ...