对象的创建:

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. WPF 解决无边框产生的相关问题

    原文:WPF 解决无边框产生的相关问题 最大化: 在设置WindowStyle="None" AllowsTransparency="True"后,最大化会覆盖 ...

  2. go语言 实现对称加密解密算法

    package main import ( "bytes" "crypto/aes" "crypto/cipher" "crypt ...

  3. NG-ALAIN 边学边记2

    1. 下载Git上的源码  : https://github.com/ng-alain/ng-alain.git 2.解压文件: 3.进入到目录下: 4.打开CMD 切换到 E:\NgAlain\ng ...

  4. B - 青蛙的约会

    两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面. 它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止. 可是它们出发之前忘记了一件很重要的事情,既没有问清楚对方 ...

  5. 返回一条最近一次cURL操作明确的文本的错误信息。

    参考:https://www.runoob.com/php/func-curl_error.html <?php // 创建一个指向一个不存在的位置的cURL句柄 $ch = curl_init ...

  6. MVC5+EF6 入门完整教程2 :从前端UI开始

    MVC分离的比较好,开发顺序没有特别要求,先开发哪一部分都可以,这次我们主要讲解前端UI的部分. ASP.NET MVC抛弃了WebForm的一些特有的习惯,例如服务器端控件,ViewState这些东 ...

  7. 「题解」「CF1019B」The hat

    目录 题目 背景 程序输出 交互程序输入 题解 程序 题目 背景 这是一道交互题. 一共有 \(n\) 个人做成一圈,他们的编号从 \(1\) 到 \(n\). 现在每个人的手里面都有一个数字 \(a ...

  8. L1-2 倒数第N个字符串

    思路 这题就是一道进制转换,用26进制表示一个数,以及26进制下的数的加减操作. 代码 #include <bits/stdc++.h> using namespace std; int ...

  9. php设计模式之简单工厂模式代码实例

    <?php header("Content-type:text/html;charset=utf-8"); /** * 共同接口 */ interface db { func ...

  10. Flink读写Kafka

    Flink 读写Kafka 在Flink中,我们分别用Source Connectors代表连接数据源的连接器,用Sink Connector代表连接数据输出的连接器.下面我们介绍一下Flink中用于 ...