今天复习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. array_filter与array_map

    php数组array_filter函数和array_slice函数:<?php /* array_filter()用回调函数过滤数组中的单元 array_filter(array,functio ...

  2. CodeForces 126B Password

    题目链接:http://codeforces.com/problemset/problem/126/B 题目大意: 多组数据每组给定1个字符串S,问是否存在S的一个尽量长的子串,同时是S的前缀和后缀, ...

  3. 解决方法:CentOS7用yum安装软件显示错误:cannot find a valid baseurl for repo: base/7/x86_64

    在Linux学习中,发现使用yum安装软件出现以下的错误: 百度了各种方法,很多人也发现光是修改REBOOT=yes也没用,多次进行挂载.修改网卡配置文件.重置IP地址.重启网络.创建又删除配置文件的 ...

  4. Java Json 数据下划线与驼峰格式进行相互转换

    概述 今天遇见一个需求,需要对json数据进行下划线与驼峰格式之间进行转换,在Fastjson.Jackson.Gson都提供了转换的方式,在这里进行一下列举. User类: public class ...

  5. LAMP 版本查看

    mysql 1 在终端下执行 mysql -V 2  mysql --help |grep Distrib 3 在mysql 里查看 select version() 4 在mysql 里查看 sta ...

  6. echo "" > 和 echo "" >> 的区别

    在写shell脚本中,如果判断一个文件已经存在,但希望重写这个文件,一般用如下方式 echo "" > file.txt 这个表示清空文件的内容,如果使用 echo “” & ...

  7. CMD & Git Shell & Bash Shell

    CMD & Git Shell & Bash Shell https://mvdan.cc/sh/cmd/shfmt PC

  8. python数据结构与算法第八天【冒泡排序】

    1.排序算法的稳定性 稳定排序算法会让原本有相同键值的记录维持相对次序 例如:对以下元组按照元组的第一个元素升序排列,元组如下: (4,1) (3,1) (3,7) (5,6) 若要满足条件,则可能的 ...

  9. css繼承

    概念:就是上級設置了css屬性,下級默認有同樣的樣式,如果下級需要不一樣的樣式,那麼就需要單獨對下級設置. 範圍: font-family:字體 font-weight:粗細 font-size:尺寸 ...

  10. java构造器和构建器

    本文摘自:https://blog.csdn.net/wh2827991/article/details/79013115 在实例化一个类的过程中,通常会遇到多个参数的构造函数,但如果有些参数是非必需 ...