今天复习es6,又看到Object的一堆方法,与es5的表现又有不一致,耗费了一整天,整理一下;

前几天在司徒正美的书里又看到了es5 Object的字眼,为了向下兼容,大神们也是牛逼的整理出一系列ie仿Object方法,详情看javascript框架设计这本书(大神没有给宣传费);

这是es5的Object的方法:

Object.keys  Object.getOwnPropertyNames  Object.getPrototypeOf  Object.defineProperty  Object.defineProperties  Object.getOwnPropertyDescriptor  Object.create  Object.seal  Object.freeze  Object.preventExtensions  Object.isSealed  Object.isFrozen

Object.isExtensible 

这一堆方法看的我也是晕了,没事,我们就看看常用的(其实现在这些方法都不常用)。
Object.getOwnPropertyNames

用于收集当前对象不可遍历属性与可遍历属性(不包括原型链),以数组形式返回。

//getOwnPerpertyNames()能返回出不可遍历属性,keys不能
var obj={
aa:1,
to:function(){
return 1;
}
}
Object.defineProperty(obj,"name",{
value:2 //name:2
})
console.log(Object.getOwnPropertyNames(obj))//含name
console.log(Object.keys(obj));//不含name

Object.getPrototypeOf
返回参数对象的内部属性[[prototype]],就是标准浏览器的内置属性__proto__,此方法被es6推荐,es6自然不会让你随便操控一个内置的属性了。(第一参数必须为对象)。

Object.defineProperty

暴露了属性描述的接口,这些接口包括能不能被遍历,可不可写,可不可删除修改等等,与后面一些方法相关。

var obj={}
Object.defineProperty(obj,"a",{
value:37,
writable:false, //数据不能重写set
enumerable:false//不可被for in 用getOwnPropertyNames()得到
configurable:false //false不准删除对象属性
})
console.log( Object.getOwnPropertyDescriptor(obj,"a"));

Object.defineProperties就是Object.defineProperty的加强版给个例子就明白了

var obj={};
Object.defineProperties(obj,{
"value":{
value:{
writable:false
},
"name":{
value:"Json",
writable:false
}
}
})
var a=1;
for(var p in obj){
a=p;
}
console.log(a);//

Object.getOwnpropertyDescriptor用于获取某对象的本地属性的配置对象。其中configurable,enumerable肯定在其中,视情况再包含value,writable或set,get

例子来啦:

 var obj={},value=0;
Object.defineProperty(obj,
"aaa",{
set:function(a){
value:a;
},
get:function(){
return value
}
})
console.log(Object.getOwnPropertyDescriptor(obj,"aaa"));//一个包含set,get,configurable,enumerable的对象
console.log(typeof obj.aaa);//number
console.log(obj.hasOwnProperty("aaa"));//true

Object.create 用于创建一个子类的原型,第一个参数为父类的原型,第二个是子类另外要添加的属性的配置对象。

 Object.create(Object.prototype,{
{x:{
value:1,
writable:true,
enumerable:true,
configurable:true
}}
})

Tips:Object.create(null)还能生成一种叫纯净对象的东西,什么也没有,在Object.prototype被污染,或极需节省内存的情况下使用。

//框架为不支持此方法模拟的Object.create()
Object.create=function(prototype,descs){
function f(){}
f.prototype=prototype;
var obj = new f();
if (descs!=null) {
Object.defineProperties(obj,descs);
};
return obj;
}

后面3个是关于约束对象的API
Object.preventExtensions: 阻止添加本地属性,允许修改原有属性,不能添加本地属性,但可以添加原型属性,本地属性可被删除。对对象约束最轻
Object.seal:不允许删除已有本地属性,不允许添加本地属性,允许修改已有属性。
Object.freeze:无疑是最专制的,他连本地属性也不让改了。内部实现就是遍历一下,把writable都改false

 var a ={aa:"aa"}
Object.freeze(a)
a.bb=2;
console.log(a.bb);//undefine
a.aa=3;
console.log(a.aa);//

tips:访问属性的复制只能通过Object.defineProperty()和Object.getOwnPropertyDescriptor()完成了

大家懂了木?再来个例子

function Animal(name){
this.name=name;
}
Animal.prototype.getName=function(){
return this.name;
}
function Dog(name,age){
Animal.call(this,name);
this.age=age;
}
Dog.prototype=Object.create(Animal.prototype,{
getAge:{
value:function(){
return this.age;
}
},
setAge:{
value:function(age){
this.age=age;
}
}
})
var dog=new Dog('dog',4);
console.log(dog.name);//dog
dog.setAge(6);
sconsole.log(dog.getAge());//

那再开始es6的介绍吧,es6其实没有多加多少属性,大部分都是推荐了es5的方法。新加的方法也很简单,稍微介绍一下(里面包含部分es5方法)。
那开始:
Object.keys(Class) 求出此类的所有方法名,不包括symbol和不可遍历属性
Object.getOwnPropertyNames(Class) 求所有属性,包括不可枚举属性,不包括symbol
Class.hasOwnProperty()返回是不是该对象的属性,如果在类的原型链上返回false
Tips:es6的__proto__指向父类,子类prototype.__proto__指向父类的prototype。

Object.setPrototypeOf设置一个对象的__proto__;
Object.setPrototypeOf的内部实现其实是

 Object.setPrototypeOf=function(obj,proto){
obj.__proto__=proto;
return obj;
}

而要实现类B继承类A即为Object.setPrototypeOf(B.prototype,A.prototype);Object.setPrototypeOf(B,A);
所以可以判断此类是否继承了父类;Object.setPrototypeOf(子类)===父类;
Object.is()判断两个值是否严格相等,类似于"=="
Object.assign()这是我用的最多的方法了,经常用于复制对象,保证对象的纯净,详细了解见阮一峰的es6入门教程;
Reflect.enumerate():返回所有for in 循环所遍历的属性
Reflect.ownKeys(obj)返回一个数组,包含全部属性;

还有

ES5有三个操作会忽略enumerable为false的属性。

for...in 循环:只遍历对象自身的和继承的可枚举的属性;而ES6规定所有class原型的方法都是不可枚举的
Object.keys():返回对象自身的所有可枚举的属性的键名
JSON.stringify():只串行化对象自身的可枚举的属性
ES6新增了两个操作,会忽略enumerable为false的属性。

Object.assign():只拷贝对象自身的可枚举的属性
Reflect.enumerate():返回所有for...in循环会遍历的属性

记了这么多,重要的差不多都介绍了;好多也没举例子,不过相信聪明的你一看就懂了-0-。嘿嘿

javascript Object的新方法的更多相关文章

  1. JavaScript ES6 数组新方法 学习随笔

    JavaScript ES6 数组新方法 学习随笔 新建数组 var arr = [1, 2, 2, 3, 4] includes 方法 includes 查找数组有无该参数 有返回true var ...

  2. JavaScript:Object.prototype.toString方法的原理

    在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法. var arr = []; console.log(Obje ...

  3. firefox-Developer开发者站点——关于Object.create()新方法的介绍

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create Objec ...

  4. 给Object扩展新方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. JavaScript中Object.prototype.toString方法的原理

    在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法. ? 1 2 var arr = []; console.lo ...

  6. javascript一种新的对象创建方式-Object.create()

    1.Object.create() 是什么? Object.create(proto [, propertiesObject ]) 是E5中提出的一种新的对象创建方式,第一个参数是要继承的原型,如果不 ...

  7. 用javascript得到客户端IP的新方法

    javascript得到客户端IP的新方法 很久以来,我都是经过http://fw.qq.com/ipaddress来得到客户端用户的IP,这个方法简单.快速.实用 . 我们调用它的写法是: < ...

  8. es6 Object的几个新方法

    扩展对象 Object.preventExtensions Object.isExtensible 密封对象 Object.seal Object.isSealed 冻结对象 Object.freez ...

  9. JavaScript:Object属性方法

    Object的属性(firebug中没有找到) var pro={ city:"shanghai", list:[,,,,] } var Person=function(name, ...

随机推荐

  1. 使用fetch代替ajax请求 post传递方式

    let postData = {a:'b'}; fetch('http://data.xxx.com/Admin/Login/login', { method: 'POST', mode: 'cors ...

  2. day 7-18 mysql case when语句

    概述: sql语句中的case语句与高级语言中的switch语句,是标准sql的语法,适用于一个条件判断有多种值的情况下分别执行不同的操作. 首先,让我们看一下CASE的语法.在一般的SELECT中, ...

  3. 数组中元素累加 reduce

    例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  4. redis 中主从、哨兵和集群分片模式这三个有什么区别 ?

    集群分片 比如 5主5从,也就是说 数据过来之后会均匀的分配到5台服务器上面,5台服务器上面的数据是不同的,但是每个服务器都有一个从服务器,上面的数据跟这一台主服务器的数据是一样的: 也就是说,对于这 ...

  5. falsk sqlalchemy 自关联创建评论回复数据库

    本项目在于创建类似微信上的评论回复功能的数据库 基类: from app import db from datetime import datetime class Basemadel(object) ...

  6. 转载 -- jquery easyui datagrid 动态表头 + 嵌套对象属性展示

    代码功能: 1.datagrid 的表头由后台生成,可以配置在数据库 2.datagrid 的列绑定数据 支撑嵌套对象 $(function() { var columns = new Array() ...

  7. Tomcat配置Https环境

    windows环境下:http://blog.csdn.net/supersky07/article/details/7407523 linux环境下:http://blog.csdn.net/cuk ...

  8. Linux命令替换字符串

    :%s/str1/str2/ 用str2替换str1

  9. codevs3044

    codevs3044 题面 大意:给出n个矩形求覆盖的总面积 看了hzwer的blog 似懂非懂 链接 可能还要多练点吧qaq #include <bits/stdc++.h> using ...

  10. 51nod-1445-变色DNA(最短路)

    题意:题目是说从0到n-1,我还是习惯从1到n,所以以下我都这么写,大概题意就是(i, j)==‘Y’表示可以从i颜色变成j颜色,然后问我们最少删除几个会影响结果的‘Y’,能到n这个颜色: 没有意义的 ...