JavaScript之Object对象常用属性与方法手册
MDN Object参考地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object
简单描述
Object 构造函数创建一个对象包装器。
创建对象的方式:可以通过new Object(), Object.create()方法,或者使用字面量标记(初始化标记)初始化对象。
当以非构造函数形式被调用时,Object 等同于 new Object()。
如下:
var obj = Object({age:28,name:'jack'});
console.log(obj); //{age: 28, name: "jack"}
属性
Object.prototype
Object.prototype 属性表示 Object 的原型对象。
Object.prototype 属性的属性特性:
- writable:true
- enumerable:false
- configurable:true
几乎所有的 JavaScript 对象都是 Object 的实例;一个典型的对象继承了Object.prototype的属性(包括方法),尽管这些属性可能被遮蔽(亦称为覆盖)。但是有时候可能故意创建不具有典型原型链继承的对象,比如通过Object.create(null)创建的对象,或者通过Object.setPrototypeOf方法改变原型链。
改变Object原型,会通过原型链改变所有对象;除非在原型链中进一步覆盖受这些变化影响的属性和方法。这提供了一个非常强大的、但有潜在危险的机制来覆盖或扩展对象行为。
[已废弃]Object.prototype.__proto__
该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。为了更好的支持,建议只使用
Object.getPrototypeOf()。
通过现代浏览器的操作属性的便利性,可以改变一个对象的 [[Prototype]] 属性, 这种行为在每一个JavaScript引擎和浏览器中都是一个非常慢且影响性能的操作,使用这种方式来改变和继承属性是对性能影响非常严重的,并且性能消耗的时间也不是简单的花费在 obj.__proto__ = ... 语句上, 它还会影响到所有继承来自该 [[Prototype]] 的对象,如果你关心性能,你就不应该在一个对象中修改它的 [[Prototype]]。相反, 创建一个新的且可以继承 [[Prototype]] 的对象,推荐使用 Object.create()。
Object.prototype 的 __proto__ 属性是一个访问器属性(一个getter函数和一个setter函数), 暴露了通过它访问的对象的内部[[Prototype]] (一个对象或 null)。
实例:
let Circle = function () {};
Circle.prototype.add = function(num1,num2){
return num1 + num2;
}
let shape = {};
let circle = new Circle();
// 设置该对象的原型链引用
// 过时且不推荐使用的。这里只是举个例子,尽量不要在生产环境中这样做。
shape.__proto__ = circle;
// 判断该对象的原型链引用是否属于circle
console.log(shape.__proto__ === circle); // true
result = shape.add(1,2);
console.log(result); //
let shape = function () {};
let p = {
a: function () {
console.log('aaa');
}
};
shape.prototype.__proto__ = p;
let circle = new shape();
circle.a();//aaa
console.log(shape.prototype === circle.__proto__);//true
//或者
let shape = function () {};
var p = {
a: function () {
console.log('a');
}
};
let circle = new shape();
circle.__proto__ = p;
circle.a(); // a
console.log(shape.prototype === circle.__proto__);//false
//或者
function test() {}
test.prototype.myname = function () {
console.log('myname');
}
let a = new test()
console.log(a.__proto__ === test.prototype);//true
a.myname();//myname
//或者
let fn = function () {};
fn.prototype.myname = function () {
console.log('myname');
}
let obj = {
__proto__: fn.prototype
};
obj.myname();//myname
Object.prototype.constructor
返回创建实例对象的 Object 构造函数的引用。注意,此属性的值是对函数本身的引用,而不是一个包含函数名称的字符串。对原始类型来说,如1,true和"test",该值只可读。
所有对象都会从它的原型上继承一个 constructor 属性:
var o = {};
o.constructor === Object; // true
var o = new Object;
o.constructor === Object; // true
var a = [];
a.constructor === Array; // true
var a = new Array;
a.constructor === Array // true
var n = new Number(3);
n.constructor === Number; // true
例子:如下情况,该对象具有创建自身的create方法。
function Parent() {};
function CreatedConstructor() {}
CreatedConstructor.prototype = Object.create(Parent.prototype);
CreatedConstructor.prototype.create = function create() {
return new this.constructor();
}
new CreatedConstructor().create().create(); // error undefined is not a function since constructor === Parent
在上面的示例中,将显示异常,因为构造函数链接到Parent。为了避免它,只需分配您将要使用的必要构造函数。
function Parent() {};
function CreatedConstructor() {}
CreatedConstructor.prototype = Object.create(Parent.prototype);
CreatedConstructor.prototype.constructor = CreatedConstructor; // set right constructor for further using
CreatedConstructor.prototype.create = function create() {
return new this.constructor();
}
new CreatedConstructor().create().create(); // it's pretty fine
现在很清楚为什么更改构造函数会很有用,再看下面的例子:
function ParentWithStatic() {}
ParentWithStatic.startPosition = { x: 0, y:0 };
ParentWithStatic.getStartPosition = function getStartPosition() {
return this.startPosition;
}
function Child(x, y) {
this.position = {
x: x,
y: y
};
}
Child.prototype = Object.create(ParentWithStatic.prototype);
Child.prototype.constructor = Child;
Child.prototype.getOffsetByInitialPosition = function getOffsetByInitialPosition() {
var position = this.position;
var startPosition = this.constructor.getStartPosition(); // error undefined is not a function, since the constructor is Child
return {
offsetX: startPosition.x - position.x,
offsetY: startPosition.y - position.y
}
};
对于此示例,我们需要保持父构造函数继续正常工作。
方法
Object.setPrototypeOf()
Object.setPrototypeOf() 方法设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性)到另一个对象或 null。
语法:Object.setPrototypeOf(obj, prototype)
参数:
- obj:要设置其原型的对象。
- prototype:该对象的新原型(一个对象 或 null)。
如果对象的[[Prototype]]被修改成不可扩展(通过
Object.isExtensible()查看),就会抛出TypeError异常。如果prototype参数不是一个对象或者null(例如,数字,字符串,boolean,或者 undefined),则什么都不做。否则,该方法将obj的[[Prototype]]修改为新的值。Object.setPrototypeOf()是ECMAScript 6最新草案中的方法,相对于
Object.prototype.__proto__,它被认为是修改对象原型更合适的方法。
例如:
var dict = Object.setPrototypeOf({}, null);
Polyfill
使用较旧的 Object.prototype.__proto__ 属性,我们可以很容易地定义Object.setPrototypeOf 如果它不可用:
// 仅适用于Chrome和FireFox,在IE中不工作:
Object.setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
obj.__proto__ = proto;
return obj;
}
Object.getPrototypeOf()
描述:方法返回指定对象的原型(内部[[Prototype]]属性的值)。
语法:
Object.getPrototypeOf(object)
参数:object,要返回其原型的对象。
返回值:给定对象的原型。如果没有继承属性,则返回 null 。
实例:
var proto = {};
var obj = Object.create(proto);
console.log(Object.getPrototypeOf(obj) === proto); // true
var reg = /a/;
console.log(Object.getPrototypeOf(reg) === RegExp.prototype); // true
//Object.getPrototypeOf( Object )是把Object这一构造函数看作对象,
//返回的当然是函数对象的原型,也就是 Function.prototype。
console.log(Object.getPrototypeOf(Object)== Function.prototype) //true
Object.values()
Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。
语法:
Object.values(obj)
参数:obj,被返回可枚举属性值的对象。
返回值:一个包含对象自身的所有可枚举属性值的数组。
var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]
// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']
// array like object with random key ordering
// when we use numeric keys, the value returned in a numerical order according to the keys
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']
// getFoo is property which isn't enumerable
var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
my_obj.foo = 'bar';
console.log(Object.values(my_obj)); // ['bar']
// non-object argument will be coerced to an object
console.log(Object.values('foo')); // ['f', 'o', 'o']
如果要 Object.values兼容不支持它的旧环境,可在 tc39/proposal-object-values-entries 或 es-shims/Object.values 中找到 Polyfill 。根据Object.keys()的Polyfill仿写一个:
if (!Object.values) Object.values = function(obj) {
if (obj !== Object(obj))
throw new TypeError('Object.values called on a non-object');
var val=[],key;
for (key in obj) {
if (Object.prototype.hasOwnProperty.call(obj,key)) {
val.push(obj[key]);
}
}
return val;
}
JavaScript之Object对象常用属性与方法手册的更多相关文章
- JS中的RegExp对象常用属性和方法
JavaScript提供了一个RegExp对象来完成有关正则表达式的操作和功能,每一条正则表达式模式对应一个RegExp实例.有两种方式可以创建RegExp对象的实例. 使用RegExp的显式构造函数 ...
- 全面理解Javascript中Function对象的属性和方法
http://www.cnblogs.com/liontone/p/3970420.html 函数是 JavaScript 中的基本数据类型,在函数这个对象上定义了一些属性和方法,下面我们逐一来介绍这 ...
- JavaScript之Number、String、Array常用属性与方法手册
Number isFinite函数 Number.isFinite() 方法用来检测传入的参数是否是一个有穷数(finite number). 语法: Number.isFinite(value) 例 ...
- Javascript进阶:对象实例属性和方法
Ecmascript中,Object类型是所有它的实例的基础.换句话说,Object类型所具有的任何属性和方法也同样存在于更具体的对象中. Object的每个实例都具有以下属性和方法,这些都能方便于我 ...
- javascript基本属性访问对象的属性和方法
var myName = "Shelley"; //字符串基本类型 alert(myName.length); //隐式创建String对象,数值与myName相同,并执行len ...
- js对象常用属性和方法:复制一个对象,获取一个对象的所有key和所有value的方法
记录对象的一些实用使用方法及属性 // Object.assign() 多个对象合并 key相同则后面的覆盖前面的 const target = { a: 1, b: 2 }; const sourc ...
- JavaScript的String对象的属性和方法
---恢复内容开始--- 属性: length 字符串的长度 prototype 字符串的原型对象 constructor 字符串的构造函数,会返 ...
- javascript中document对象的属性和方法
document.documentElement; document.firstChild;document.childNodes[0];// 取得对<html>的引用document.b ...
- Javascript常用对象的属性和方法
javascript为我们提供了一些非常有用的常用内部对象和方法.用户不需要用脚本来实现这些功能.这正是基于对象编程的真正目的. 在javascript提供了string(字符串).math(数值计算 ...
随机推荐
- QMQ去哪儿网-mq中间件(启动失败)
简介 去哪儿网近日宣布开源其内部广泛使用的消息中间件 QMQ .QMQ 自 2012 年诞生以来在去哪儿网所有业务场景中广泛的应用,包括跟交易息息相关的订单场景: 也包括报价搜索等高吞吐量场景.目前在 ...
- 关于在运行java连接MongoDB时遇到的连接超时问题
在linux虚拟机里运行创建集合的时候,遇到了以下问题: 这里我最开始时使用的虚拟机IP地址进行连接,因此就出现了错误,连接超时. 在网上查了一些类似的问题,说要改驱动,后来才发现不是这个问题. 在本 ...
- ALSA概述--高级linux声音驱动基本介绍和应用
基本介绍: ALSA是Advanced Linux Sound Architecture,高级Linux声音架构的简称,它在Linux操作系统上提供了音频和MIDI(Musical Instrumen ...
- 国内使用google搜索引擎
百度搜索 "谷歌访问助手",点击第一个搜索结果,如下: 或者直接点击链接:http://www.ggfwzs.com/ ,然后点击相应的浏览器下载谷歌访问助手,解压,将解压好的谷 ...
- Linux编程 23 shell编程(结构化条件判断 命令if -then , if-then ... elif-then ...else,if test)
一.概述 在上一篇里讲到了shell脚本,shell按照命令在脚本中出现的顺序依次进行处理,对于顺序操作已经足够了,但许多程序要求对shell脚本中的命令加入一些逻辑流程控制,这样的命令通常叫做 结构 ...
- Plugin with id 'com.novoda.bintray-release' not found.的解决方案
import Module的时候,有时候会提示Plugin with id 'com.novoda.bintray-release' not found. 点击Open File,定位到该Module ...
- Spring Boot 系列(九)数据层-集成Spring-data-jpa
实际开发中,不可避免地会对数据进行反复的增删改查操作,然而这部分工作是十分繁琐枯燥的.那么,随即而生的ORM框架就能很好的解决这个问题. 我们常用的ORM框架有:Hibernate.Mybatis.J ...
- MFC控件GDI编程
MFC控件GDI编程 一丶学习内容 1.了解常用的GDI函数绘图. 2.使用常用的画笔画刷. 二丶常用的GDI函数绘图 上方则为我们常用的GDI函数了. 画线 矩形. 以及圆 等等. 2.1 画线代码 ...
- 第三方工具系列--Lombok常用注解
原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/9329798.html Lombok注解解析: @NonNull 使用在方法的参数或者构造 ...
- Perl的比较操作符
比较操作符 perl的比较操作符和bash完全相反.数值比较采用符号,字符串比较采用字母. 数值 字符串 意义 ----------------------------- == eq 相等 != ne ...