您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

详解JavaScript中的Object对象 的示例代码

2025/5/6 11:46:26发布40次查看
object是在javascript中一个被我们经常使用的类型,而且js中的所有对象都是继承自object对象的。虽说我们平时只是简单地使用了object对象来存储数据,并没有使用到太多其他功能,但是object对象其实包含了很多很有用的属性和方法,尤其是es5增加的方法,因此,本文将从最基本的介绍开始,详细说明了object的常用方法和应用。
基础介绍创建对象
首先我们都知道,对象就是一组相似数据和功能的集合,我们就是用它来模拟我们现实世界中的对象的。那在javascript中,创建对象的方式通常有两种方式:构造函数和对象字面量。
new构造函数法
var person = new object(); person.name = "狼狼的蓝胖子"; person.age = 25;
这种方式使用new关键字,接着跟上object构造函数,再来给对象实例动态添加上不同的属性。这种方式相对来说比较繁琐,一般推荐使用对象字面量来创建对象。
对象字面量
对象字面量很好理解,使用key/value的形式直接创建对象,简洁方便。
var person = { name: “狼狼的蓝胖子”, age: 25 };
这种方式直接通过花括号将对象的属性包起来,使用key/value的方式创建对象属性,每个属性之间用逗号隔开。
注意:如果是最后一个属性,后面就不要加逗号,因为在一些旧的浏览器下会报错。
对象实例的属性和方法不管通过哪种方式创建了对象实例后,该实例都会拥有下面的属性和方法,下面将会一一说明。
constructor属性
constructor属性是保存当前对象的构造函数,前面的例子中,constructor保存的就是object方法。
var obj1 = new object(); obj1.id = "obj1"; var obj2 = { "id": "obj2" }; console.log(obj1.constructor);//function object(){} console.log(obj2.constructor);//function object(){}
hasownproperty(propertyname)方法
hasownproperty方法接收一个字符串参数,该参数表示属性名称,用来判断该属性是否在当前对象实例中,而不是在对象的原型链中。我们来看看下面这个例子:
var arr = []; console.log(arr.hasownproperty("length"));//true console.log(arr.hasownproperty("hasownproperty"));//false
在这个例子中,首先通过定义了一个数组对象的实例arr,我们知道数组对象实际是通过原型链继承了object对象,然后拥有自己的一些属性,我们通过hasownproperty方法判断length是arr自己的属性,而hasownproperty是在原型链上的属性。
hasownproperty方法可以和for..in结合起来获取对象自己的key。
isprototypeof(object)方法
isprototype方法接收一个对象,用来判断当前对象是否在传入的参数对象的原型链上,说起来有点抽象,我们来看看代码。
function myobject() {} var obj = new myobject(); console.log(object.prototype.isprototypeof(obj));
我们知道myobject是继承自object对象的,而在js中,继承是通过prototype来实现的,所以object的prototype必定在myobject对象实例的原型链上。
propertyisenumerable(prototypename)方法
prototypeisenumerable用来判断给定的属性是否可以被for..in语句给枚举出来。看下面代码:
var obj = { name: "objname" } for (var i in obj) { console.log(i); }
执行这段代码输出字符串“name”,这就说明通过for…in语句可以得到obj的name这个属性,但是我们知道,obj的属性还有很多,比如constructor,比如hasownprototype等等,但是它们没有被输出,说明这些属性不能被for…in给枚举出来,可以通过propertyisenumerable方法来得到。
console.log(obj.propertyisenumerable("constructor"));//false
判断“constructor”是否可以被枚举,输出false说明无法被枚举出来。
tolocalestring()方法
tolocalstring方法返回对象的字符串表示,和代码的执行环境有关。
var obj = {}; console.log(obj.tolocalestring());//[object object] var date = new date(); console.log(date.tolocalestring());//2016/2/28 下午1:39:27
tostring()方法
tostring用来返回对象的字符串表示。
var obj = {}; console.log(obj.tostring());//[object object] var date = new date(); console.log(date.tostring());//sun feb 28 2016 13:40:36 gmt+0800 (中国标准时间)
valueof()方法
valueof方法返回对象的原始值,可能是字符串、数值或bool值等,看具体的对象。
var obj = { name: "obj" }; console.log(obj.valueof());//object {name: "obj"} var arr = [1]; console.log(arr.valueof());//[1] var date = new date(); console.log(date.valueof());//1456638436303
如代码所示,三个不同的对象实例调用valueof返回不同的数据。
属性的类型在javascript中,属性有两种类型,分别是数据属性和访问器属性,我们来看看这两种属性具体是什么东西。
数据属性
数据属性我们可以理解为我们平时定义对象时赋予的属性,它可以进行读和写。但是,es5中定义了一些特性,这些特性是用来描述属性的各种特征,特性是内部值,不能直接访问到。特性通过用两对方括号表示,比如[[enumerable]]。属性的特性会有一些默认值,要修改特性的默认值,必须使用es5定义的新方法object.defineproperty方法来修改。
数据属性有4个描述其特征的特性,下面将依次说明每一个特性:
(1)[[configurable]]:该特性表示是否可以通过delete操作符来删除属性,默认值是true。
var obj = {}; obj.name = "myname"; delete obj.name; console.log(obj.name);//undefined
这段代码很明显,通过delete删除了obj的name属性后,我们再访问name属性就访问不到了。
我们通过object.defineproperty方法来修改[[configurable]]特性。
var obj = {}; obj.name = "myname"; object.defineproperty(obj, "name", { configurable: false }) delete obj.name; console.log(obj.name);//myname
通过将configurable特性设置成false之后,delete就无法删除name属性了,如果在严格模式下,使用delete去删除就会报错。
(2)[[enumerable]]:表示是否能够通过for…in语句来枚举出属性,默认是true
我们来看看前面的例子:
var obj = { name: "objname" } for (var i in obj) { console.log(i);//name }
这段代码只输出了name属性,我们来将constructor属性的[[enumerable]]设置为true试试。
var obj = { name: "objname" } object.defineproperty(obj, "constructor", { enumerable: true }) for (var i in obj) { console.log(i);//name,constructor } console.log(obj.propertyisenumerable("constructor"));//true
这段代码中,for…in循环得到了name和constructor两个属性,而通过propertyisenumerable方法来判断constructor也返回了true。
(3)[[writable]]:表示属性值是否可以修改,默认为true
如果[[writable]]被设置成false,尝试修改时将没有效果,在严格模式下会报错
(4)[[value]]:表示属性的值,默认为undefined
我们通过一个简单的例子来看看这两个特性:
var obj = { name: "name" }; console.log(obj.name);//name object.defineproperty(obj, "name", { value: "newvalue", writable: false }) console.log(obj.name);//newvalue obj.name = "oldvalue"; console.log(obj.name);//newvalue
我们首先定义了obj对象的name属性值为“name”,然后通过defineproperty方法来修改值,并且将其设置为不可修改的。接着我们再修改name属性的值,可以发现修改无效。
如果我们通过defineproperty来修改name属性的值,是否可以修改呢?答案是可以的:
object.defineproperty(obj, "name", { value: "oldvalue" }) console.log(obj.name); //oldvalue
访问器属性
访问器属性有点类似于c#中的属性,和数据属性的区别在于,它没有数据属性的[[writable]]和[[value]]两个特性,而是拥有一对getter和setter函数。
[[get]]:读取属性时调用的函数,默认是undefined
[[set]]:设置属性时调用的函数,默认是undefined
getter和setter是一个很有用的东西,假设有两个属性,其中第二个属性值会随着第一个属性值的变化而变化。这种场景在我们平时的编码中起始是非常常见的。在之前的做法中,我们往往要去手动修改第二个属性的值,那现在我们就可以通过get和set函数来解决这个问题。看下面这个例子:
var person = { age: 10 } object.defineproperty(person, "type", { get: function () { if (person.age > 17) { return "成人"; } return "小孩"; } }) console.log(person.type);//小孩 person.age = 18; console.log(person.type);//成人
通过修改age的值,type的值也会相应的修改,这样我们就不用再手动的去修改type的值了。
下面这种方式也是可以实现同样的效果:
var person = { _age: 10, type: "小孩" } object.defineproperty(person, "age", { get: function () { return this._age; }, set: function (newvalue) { this._age = newvalue; this.type = newvalue > 17 ? "成人" : "小孩"; } }) console.log(person.type); person.age = 18; console.log(person.type);
关于访问器属性,有几点要注意:
1、严格模式下,必须同时设置get和set
2、非严格模式下,可以只设置其中一个,如果只设置get,则属性是只读的,如果只设置set,属性则无法读取
3、object.defineproperty是es5中的新方法,ie9(ie8部分实现,只有dom对象才支持)以下浏览器不支持,一些旧的浏览器可以通过非标准方法definegetter()和definesetter()来设置,这里就不说明了,有兴趣的同学可以查找相关资料。
特性操作的相关方法
es5提供了一些读取或操作属性特性的方法,前面用到的object.defineproperty就是其中之一。我总结了一些比较常用的方法如下:
(1)object.defineproperty
定义一个对象的属性,这个方法前面我们已经用到多次,简单说说其用法。
object.defineproperty(obj,propname,descriptor);
defineproperty有点类似于定于在object上的静态方法,通过object直接调用,它接收3个参数:
obj:需要定义属性的对象
propnane:需要被定义的属性名称
defineproperty:属性描述符,包含一些属性的特性定义
例子如下:
var obj = {}; object.defineproperty(obj, "name", { value: "name", configurable: true, writable: true, enumerable: true });
(2)object.defineproperties
和defineproperty类似,是用来定义对象属性的,不同的是它可以用来同时定义多个属性,我们通过命名也可以看出来,用法如下:
var obj = {}; object.defineproperty(obj, { "name": { value: "name", configurable: true, writable: true, enumerable: true }, "age": { value: 20 } });
(3)object.getownpropertydescriptor
es5中还提供了一个读取特性值的方法,该方法接收对象及其属性名作为两个参数,返回一个对象,根据属性类型的不同,返回对象会包含不同的值。
var person = { _age: 10, type: "小孩" } object.defineproperty(person, "age", { get: function () { return this._age; }, set: function (newvalue) { this._age = newvalue; this.type = newvalue > 17 ? "成人" : "小孩"; } }) console.log(object.getownpropertydescriptor(person, "type"));//object {value: "成人", writable: true, enumerable: true, configurable: true} console.log(object.getownpropertydescriptor(person, "age")); //object {enumerable: false, configurable: false, get: function(),set: function ()}
object的方法在es5中,object对象上新增了一批方法,这些方法可以直接通过object进行访问,前面用到的defineproperty就是新增的方法之一。除此之外还有很多方法,我将其总结归纳如下:
对象创建型方法object.create(proto, [propertiesobject])
在前面我们提到,创建一个对象有两种方法:构造函数和对象字面量。
这两种方法有一个缺点就是:如果要创建多个对象,写起来很繁琐,所以后来就有了一种创建自定义构造函数的方法来创建对象,如下所示:
function person(name, age) { this.name = name; this.age = age; } var person = new person("jack", 15);
这种方式可以很方便的创建多个同样的对象,也是目前比较常用的方法。
es5提供的object.create方法也是一个创建对象的方法,这个方法允许为创建的对象选择原型对象,不需要定义一个构造函数。用法如下:
var obj = object.create(object.prototype, { name: { value: "jack" } }) console.log(obj.name);//jack
这个方法接收的第一个参数作为被创建对象的原型,第二个参数是对象的属性。注意:在这个例子中,name属性是无法被修改的,因为它没有设置writable特性,默认则为false。
个人看法:object.create这种创建对象的方式略显繁琐,除非是需要修改属性的特性,否则不建议使用这种方式创建对象。
属性获取型方法object.keys
object.keys是用来获取给定对象的所有可枚举的自身属性的属性名,它返回一个数组。
function parent() { this.lastname = "black" } function child(firstname) { this.firstname = firstname; } child.prototype = new parent(); var son = new child("jack"); console.log(object.keys(son));//["firstname"]
代码中返回了firstname,并没有返回从prototype继承而来的lastname和不可枚举的相关属性。
在一些旧的浏览器中,我们可以使用hasownproperty和for…in来达到类似的效果。
object.keys = object.keys || function (obj) { var keys = []; for (var key in obj) { if (obj.hasownproperty(key)) { keys.push(key); } } return keys; }
object.getownpropertynames()
getownpropertynames用来获取对象自身的所有属性,包括可枚举和不可枚举的所有属性,如下所示:
function parent() { this.lastname = "black" } function child(firstname) { this.firstname = firstname; } child.prototype = new parent(); var son = new child("jack"); object.defineproperty(son, "age", { enumerable: false }) console.log(object.keys(son));//["firstname"] console.log(object.getownpropertynames(son));//["firstname", "age"]
我们定义给son对象定义了一个不可枚举的属性age,然后通过keys和getownpropertynames两个方法来获取属性列表,能明显看出了两者区别。
属性特性型方法这个主要是前面提到的三个方法:defineproperty,defineproperties和getownpropertydescriptor三个方法
对象限制型方法es5中提供了一系列限制对象被修改的方法,用来防止被某些对象被无意间修改导致的错误。每种限制类型包含一个判断方法和一个设置方法。
阻止对象扩展
object.preventextensions()用来限制对象的扩展,设置之后,对象将无法添加新属性,用法如下:
object.preventextensions(obj);
该方法接收一个要被设置成无法扩展的对象作为参数,需要注意两点:
1、对象的属性不可用扩展,但是已存在的属性可以被删除
2、无法添加新属性指的是无法在自身上添加属性,如果是在对象的原型上,还是可以添加属性的。
function person(name) { this.name = name; } var person = new person("jack"); object.preventextensions(person); delete person.name; console.log(person.name);//undefined person.prototype.age = 15; console.log(person.age);//15
object.isextensible方法用来判断一个对象是否可扩展,默认情况是true
将对象密封
object.seal可以密封一个对象并返回被密封的对象。
密封对象无法添加或删除已有属性,也无法修改属性的enumerable,writable,configurable,但是可以修改属性值。
function person(name) { this.name = name; } var person = new person("jack"); object.seal(person); delete person.name; console.log(person.name);//jack
将对象密封后,使用delete删除对象属性,还是可以访问得到属性。
通过object.issealed可以用来判断一个对象是否被密封了。
冻结对象
object.freeze方法用来冻结一个对象,被冻结的对象将无法添加,修改,删除属性值,也无法修改属性的特性值,即这个对象无法被修改。
function person(name) { this.name = name; } var person = new person("jack"); object.freeze(person); delete person.name; console.log(person.name);//jack person.prototype.age = 15; console.log(person.age);//15
分析上面的代码我们可以发现,被冻结的对象无法删除自身的属性,但是通过其原型对象还是可以新增属性的。
通过object.isfrozen可以用来判断一个对象是否被冻结了。
可以发现:这三个限制对象的方法的限制程度是依次上升的。
总结object虽说是一个我们平时开发中最经常用到的对象,但是它的很多功能还没有被我们挖掘出来。本文首先介绍了object的基本使用,接着介绍了一些比较少使用到的属性特性,最后分析了一些比较常用的方法,尤其是es5中提供的新方法。欢迎大家交流!!
以上就是详解javascript中的object对象 的示例代码的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product