JavaScript 对象属性与方法
对象的创建:
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.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 对象属性与方法的更多相关文章
- Javascript对象属性与方法汇总
Javascript对象属性与方法汇总 发布时间:2015-03-06 编辑:www.jquerycn.cn 详细介绍下,javascript对象属性与对象方法的相关知识,包括javascript字符 ...
- 转: JavaScript 获取对象属性和方法
一.获取对象属性和方法 Object.keys()for in 返回对象的可枚举属性和方法的名称数组. Object.getOwnPropertyNames() 返回的数组的所有属性(可枚举或不可枚举 ...
- JavaScript 获取对象属性和方法
ShineJaie 原创整理,转载请注明出处. 一.获取对象属性和方法 Object.keys() 返回对象的可枚举属性和方法的名称数组. Object.getOwnPropertyNames() 返 ...
- JavaScript 访问对象属性和方法及区别
这篇文章主要介绍了浅析JavaScript访问对象属性和方法及区别的相关资料,仅供参考 属性是一个变量,用来表示一个对象的特征,如颜色.大小.重量等:方法是一个函数,用来表示对象的操作,如奔跑.呼吸. ...
- JavaScript document属性和方法
JavaScript document属性和方法 --------------------------------------------属性: 1. Attributes 存储节点的属性列表 ...
- 删除要被替换的元素的所有事件处理 程序和 JavaScript 对象属性
使用本节介绍的方法替换子节点可能会导致浏览器的内存占用问题,尤其是在 IE 中,问题更加明显.在删除带有事件处理程序或引用了其他 JavaScript 对象子树时,就有可能导致内存占用问题.假设 某个 ...
- JavaScript对象属性的基础教程指南
JavaScript是使用“对象化编程”的,或者叫“面向对象编程”的.所谓“对象化编程”,意思是把JavaScript能涉及的范围划分成大大小小的对象,对象下面还继续划分对象直至非常详细为止,所有的编 ...
- Js基础知识7-JavaScript所有内置对象属性和方法汇总
对象什么的,程序员可是有很多呢... JS三大对象 对象,是任何一个开发者都无法绕开和逃避的话题,她似乎有些深不可测,但如此伟大和巧妙的存在,一定值得你去摸索.发现.征服. 我们都知道,JavaScr ...
- JavaScript 对象属性
JavaScript 对象属性 属性中的 . 和 [ ](点 和 方括号)的区别 . :取对象自身的属性值: [ ]:括号内容可以是变量: var obj = {}; obj.name = 'Twx ...
随机推荐
- 什么是OOP
面向对象是相对于面向过程而言的.面向过程语言是一种基于功能分析的.以算法为中心的程序设计方法:而面向对象是一种基于结构分析的.以数据为中心的程序设计思想.早在面向过程语言时代,有一句话说:程序=算法+ ...
- Echarts--来自官网
引入 ECharts ECharts 3 开始不再强制使用 AMD 的方式按需引入,代码里也不再内置 AMD 加载器.因此引入方式简单了很多,只需要像普通的 JavaScript 库一样用 scrip ...
- SSM项目中的.tld文件是什么,有什么作用?怎么自定义tld文件
原文链接:https://www.cnblogs.com/guaishoubiubiu/p/8721277.html TLD术语解释:标签库描述文件,如要在JSP页面中使用自定义JSP标签,必须首先定 ...
- quartus在线调试的方法
quartus在线调试的方法 在Quartus II Version 7.2 Handbook Volume 3: Verification中的Section V. In-System Design ...
- #! /usr/bin node 和#! /usr/bin/env node两者的区别
是Unix和Linux脚本语言的第一行,目的就是指出,你想要你的这个文件中的代码用什么可执行程序去运行它 !/usr/bin/node是告诉操作系统执行这个脚本的时候,调用/usr/bin下的node ...
- 【StarUML】 活动图
StarUML中的活动图本质上是流程图,活动图相对来说,更加专业,它有对信号的处理,对状态动作.数据区别表示,使得更清晰地了解控制流的走向. 1.基本元素 a.活动状态图(Activity).动作状态 ...
- Uncaught TypeError: o.a is not a constructor
最近在学webpack打包工具,看着挺好玩的,虽然也是工作需要 首先安装啥的我就不说了,后面慢慢写,打包完了以后,运行代码发现提示这个 找半天代码没问题啊,我这个js基础薄弱的人用这个webpack还 ...
- 在一个formitem中多input的验证方法-antd的验证
实现效果如下: 当点击按钮的时候 对一个FormItem里的多个input/或者是input和select进行校验 同时通过Rol/Col实现布局 Rselect/input组件封装的组件如下fie ...
- 题解【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 ...
- CSS和JS两种颜色渐变文字效果代码
js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...