对象的创建:

1 字面量创建
    var obj = {a:1,b:2};
构造函数创建
    var obj = new Object();
obj.a = 1;
obj.b = 2;

3 Object.create(targetObj):根据已有对象创建

  • 使用已有对象提供新对象的原型链,现有对象会将targetObj作为自己的原型链
  • 返回一个新对象,带着指定的原型对象和属性
  • 该方法可以用于实现类的继承
    var span = document.createElement("span");
span.k = "extends!";
var obj1 = Object.create(span);
// console.dir(obj1.__proto__.k);//extends!
console.dir(obj1.__proto__);//span
console.log(obj1.prototype);//undefined
console.log(obj1 === span);//false,返回的是新对象

Object.assign 对象浅复制

Object.assign(targetObj,sourceObj1,sourceObj2......);

该方法用于将一个或多个源对象的属性拷贝(浅复制)到目标对象,返回目标对象。

  • 只能复制对象属性,不能复制对象的原型链属性
  • 只能复制可枚举类型,
  • 引用关系也会一同被复制,只能浅复制
  • 多个源对象复制时,如果有相同的属性,后面的将会覆盖前面的
  • 复制属性定义应当使用Object.getOwnPropertyDescriptor()和Object.defineProperty()
  • String和Symbol类型也会被拷贝,undefined和null可以被拷贝不报错
  • IE不支持该方法,需要考虑兼容
        var t = {x:1}
var obj = {a:1,b:null,c:undefined,d:t}
var obj2 = Object.assign({},obj);
console.log(obj2);//可以复制null
obj2.d.x = 1000;
console.log(t.x);//1000,浅复制,存在引用

Object.assign与Object.create

assign:复目标对象属性给自身,包括原型

create:将目标对象作为自己的原型

        var span = {};
span.t = "get prop!";
span.__proto__.x = "get prop!";
var obj = Object.create(span);
var obj1 = Object.assign({},span);
console.log("create:",obj);
console.log("assign:",obj1);

Object.defineProperty(obj,property,descObj)

        var obj = {_b:1};
Object.defineProperty(obj,"a",{
configurable:false,//是否可删除属性并且重定义描述对象
enumerable:false,//是否可枚举,比如for循环和Object.keys
writable:false,//是否可更改(改的话不会报错但是改不了)
value:10
});
// obj.a = 1000;
// console.log(obj.a);//10,不可更改
// console.log(Object.keys(obj));//没有a,不可枚举
for ( var key in obj) {
console.dir(key);//没有a,不可枚举
}
delete obj.a;
console.log(obj.a);//不可删除
 以上四个属性在不显式调用Object.defineProperty()的时候,
    前三个默认值都为true,而value为你自己设定的值,如果不设定的话则为undefined。一旦用defineProperty设置,前三个默认为false
 原型链属性不可被修改描述对象
  

Object.defineProperties(obj,{prop1:{},prop2:{}......})

  • 该方法用于为一个对象定义多个属性描述对象Object.defineProperties(obj,{prop1:{},prop2:{}......})

Object.getOwnPropertyNames(obj)

  • 该方法用于获取对象的全部属性名称组成的数组,并返回该数组

Object.getOwnPropertyDescriptor(obj,prop)

  • 该方法用于获取对象某个属性的描述对象,并返回该对象

obj.propertyIsEnumerable(prop)

  • 该方法用于判断对象是否包含某个属性,返回布尔值

obj.isPrototypeOf(o)

  • obj是否是o的原型
  • 是否有类的继承关系、

Obj.hasOwnProperty(prop)和 in

  • hasOwnProperty只能判断对象属性,不能判断原型属性
  • in既能判断对象属性,又能判断原型属性
        var obj = {a:1,b:2,c:3}
var obj1 = Object.create(obj);
console.log("a" in obj1);//true
console.log(obj1.hasOwnProperty("a"));//false

Object.frozen(obj)

  • 冻结对象,不能删除与重置属性,不能重置属性的描述对象
  • 不能被Object.create()增加冻结的对象属性
  • 可以被Obejct.assign()复制,并且复制之后的属性可删除和修改

Object.is()

判断,等同于===,但是有几个例外情况

console.log(NaN === NaN);//false
console.log(Object.is(NaN,NaN));//true
 

JavaScript 对象属性与方法的更多相关文章

  1. Javascript对象属性与方法汇总

    Javascript对象属性与方法汇总 发布时间:2015-03-06 编辑:www.jquerycn.cn 详细介绍下,javascript对象属性与对象方法的相关知识,包括javascript字符 ...

  2. 转: JavaScript 获取对象属性和方法

    一.获取对象属性和方法 Object.keys()for in 返回对象的可枚举属性和方法的名称数组. Object.getOwnPropertyNames() 返回的数组的所有属性(可枚举或不可枚举 ...

  3. JavaScript 获取对象属性和方法

    ShineJaie 原创整理,转载请注明出处. 一.获取对象属性和方法 Object.keys() 返回对象的可枚举属性和方法的名称数组. Object.getOwnPropertyNames() 返 ...

  4. JavaScript 访问对象属性和方法及区别

    这篇文章主要介绍了浅析JavaScript访问对象属性和方法及区别的相关资料,仅供参考 属性是一个变量,用来表示一个对象的特征,如颜色.大小.重量等:方法是一个函数,用来表示对象的操作,如奔跑.呼吸. ...

  5. JavaScript document属性和方法

    JavaScript document属性和方法 --------------------------------------------属性: 1. Attributes     存储节点的属性列表 ...

  6. 删除要被替换的元素的所有事件处理 程序和 JavaScript 对象属性

    使用本节介绍的方法替换子节点可能会导致浏览器的内存占用问题,尤其是在 IE 中,问题更加明显.在删除带有事件处理程序或引用了其他 JavaScript 对象子树时,就有可能导致内存占用问题.假设 某个 ...

  7. JavaScript对象属性的基础教程指南

    JavaScript是使用“对象化编程”的,或者叫“面向对象编程”的.所谓“对象化编程”,意思是把JavaScript能涉及的范围划分成大大小小的对象,对象下面还继续划分对象直至非常详细为止,所有的编 ...

  8. Js基础知识7-JavaScript所有内置对象属性和方法汇总

    对象什么的,程序员可是有很多呢... JS三大对象 对象,是任何一个开发者都无法绕开和逃避的话题,她似乎有些深不可测,但如此伟大和巧妙的存在,一定值得你去摸索.发现.征服. 我们都知道,JavaScr ...

  9. JavaScript 对象属性

    JavaScript 对象属性 属性中的 . 和 [ ](点 和 方括号)的区别 .  :取对象自身的属性值: [ ]:括号内容可以是变量: var obj = {}; obj.name = 'Twx ...

随机推荐

  1. 什么是OOP

    面向对象是相对于面向过程而言的.面向过程语言是一种基于功能分析的.以算法为中心的程序设计方法:而面向对象是一种基于结构分析的.以数据为中心的程序设计思想.早在面向过程语言时代,有一句话说:程序=算法+ ...

  2. Echarts--来自官网

    引入 ECharts ECharts 3 开始不再强制使用 AMD 的方式按需引入,代码里也不再内置 AMD 加载器.因此引入方式简单了很多,只需要像普通的 JavaScript 库一样用 scrip ...

  3. SSM项目中的.tld文件是什么,有什么作用?怎么自定义tld文件

    原文链接:https://www.cnblogs.com/guaishoubiubiu/p/8721277.html TLD术语解释:标签库描述文件,如要在JSP页面中使用自定义JSP标签,必须首先定 ...

  4. quartus在线调试的方法

    quartus在线调试的方法 在Quartus II Version 7.2 Handbook Volume 3: Verification中的Section V. In-System Design ...

  5. #! /usr/bin node 和#! /usr/bin/env node两者的区别

    是Unix和Linux脚本语言的第一行,目的就是指出,你想要你的这个文件中的代码用什么可执行程序去运行它 !/usr/bin/node是告诉操作系统执行这个脚本的时候,调用/usr/bin下的node ...

  6. 【StarUML】 活动图

    StarUML中的活动图本质上是流程图,活动图相对来说,更加专业,它有对信号的处理,对状态动作.数据区别表示,使得更清晰地了解控制流的走向. 1.基本元素 a.活动状态图(Activity).动作状态 ...

  7. Uncaught TypeError: o.a is not a constructor

    最近在学webpack打包工具,看着挺好玩的,虽然也是工作需要 首先安装啥的我就不说了,后面慢慢写,打包完了以后,运行代码发现提示这个 找半天代码没问题啊,我这个js基础薄弱的人用这个webpack还 ...

  8. 在一个formitem中多input的验证方法-antd的验证

    实现效果如下: 当点击按钮的时候 对一个FormItem里的多个input/或者是input和select进行校验  同时通过Rol/Col实现布局 Rselect/input组件封装的组件如下fie ...

  9. 题解【Codeforces438D】The Child and Sequence

    题目描述 At the children's day, the child came to Picks's house, and messed his house up. Picks was angr ...

  10. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...