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, ...
随机推荐
- Node.js使用MySQL的连接池
使用Nodejs+MySQL肯定比PHP和MySQL的组合更适合做服务器端的开发. 使用Nodejs你会从他的异步行为中获益良多.比如,提升性能,你无须在从已有的MySQL数据库迁移到其他的NoSQL ...
- 切勿用普通for循环遍历LinkedList
ArrayList与LinkedList的普通for循环遍历 对于大部分Java程序员朋友们来说,可能平时使用得最多的List就是ArrayList,对于ArrayList的遍历,一般用如下写法: p ...
- 发个招聘贴，魔都求手游C++后端，UNITY前端，开发实习生
上海游旺网络科技有限公司成立于2015年5月,是一家极具潜力的新创移动游戏公司.公司初创团队均来自腾讯,盛大,畅游,墨麟,蜗牛等知名互联网公司,公司创始人团队参与制作过<鬼吹灯><Q ...
- 最佳编程字体：M+
英文原文:The Best Font for Programming: M+ 程序员的最佳等宽字体是 M+. 一个偶然机会遇到了这个字体,在命运多舛的 kod 编辑器体验了.这个字体非比寻常,我坚持 ...
- ios开发 ad hoc怎么用
简单的说就是这样 ad hoc 方式是苹果用来给未上线的app做测试用的,首先你要在苹果开发平台上申请一个ad hoc的证书,再在profile中生成一个ad hoc 的profile文件(只需要在生 ...
- 网友写的解决uniGUI限制的方法
群友写的解决uniGUI试用版限制修改SessionTimeOut,思路很精巧,贴过来分享,感谢朋友的奉献.当然,如果真正用uniGUI实做项目,买份正版是正道! var UniServerOpt ...
- Eclipse 4.2 failed to start after TEE is installed
--------------- VM Arguments--------------- jvm_args: -Dosgi.requiredJavaVersion=1.6 -Dhelp.lucene ...
- jquery chosen 插件多选初始化
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- Asp.net WebForm 中无法引用App_Code文件夹下的类
在VS2013中新建asp.net webform应用程序,手动添加"APP_Code"文件夹并新建类文件,发现这些类无法在APP_Code文件夹以外被引用. 解决办法: 选中类文 ...
- wpf简单进度条
UserControl x:Class="WpfApplication1.UserControl2" xmlns="http://schemas.microsoft.co ...