Object是在javascript中三个被大家平时使用的种类,何况JS中的全体指标都是三番五次自Object对象的。虽说我们平日只是轻巧地选拔了Object对象来积攒数据,并不曾使用到太多其余功效,不过Object对象实际饱含了累累很有用的性子和方法,特别是ES5扩充的不二法门,由此,本文将从最宗旨的牵线起来,详细表达了Object的常用方法和行使。

详解Javascript中的Object对象,javascriptobject

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中提供的新点子。接待大家调换!!

本文地址:

Object是在javascript中贰个被大家日常利用的档期的顺序,况且JS中的全数指标都以承接自Object对象的。虽说大家日常只是轻易地应用了Object对象来存款和储蓄数据,并从未利用到太多别的功用,但是Object对象实际饱含了广大很有用的习性和章程,尤其是ES5日增的情势,因而,本文将从最宗旨的牵线起来,详细表达了Object的常用方法和接纳。

参谋资料

JavaScript高端程序设计(第3版)

基础介绍

您恐怕感兴趣的稿子:

  • Javascript 面向对象 对象(Object)
  • 关于Javascript 对象(object)的prototype
  • Javascript Object 对象学习笔记
  • JavaScript创设二个object对象并操作对象属性的用法
  • 一种新的javascript对象创制形式Object.create()

Object是在javascript中四个被大家常常利用的门类,並且JS中的全数指标都现在续自Object对象的。虽说…

归来最上端

一、驾驭对象

创制对象

基础介绍

( 一)对象属性的分类

JS对象属性有二种档案的次序:数据属性和做客器属性

先是大家都精晓,对象正是一组一般数据和功效的集纳,我们就是用它来模拟大家切实世界中的对象的。那在Javascript中,创制对象的办法一般有三种方式:构造函数和目的字面量。

创立对象

率先大家都清楚,对象正是一组一般数据和意义的集纳,大家正是用它来效仿大家实际世界中的对象的。那在Javascript中,成立对象的法子一般有二种办法:构造函数和对象字面量。

1、数据属性

数据类型有八个描述其行为的表征:

  • [[Configurable]] :
    表示能无法通过delete删除属性、能不能够修改属性的性格(改为访问器属性),私下认可值为true。
  • [[Enumerable]]:是或不是可(通过for-in)枚举,私下认可值为true。
  • [[Writable]]:表示是不是修改属性的值,默许值为true。
  • [[Value]]:富含那天性子的数据值,暗中同意值为undefined。

new构造函数法

new构造函数法
1 var person = new Object();
2 person.name = "狼狼的蓝胖子";
3 person.age = 25;

这种格局采纳new关键字,接着跟上Object构造函数,再来给指标实例动态增加上差异的习性。这种办法相对来讲相比麻烦,一般推荐应用对象字面量来创设对象。

2、访谈器属性

做客器属性有如下4个天性:

  • [[Configurable]]:同上。
  • [[Enumerable]]:同上。
  • [[Get]:在读取属性时调用的函数,暗中同意值为undefined。
  • [[Set]:在写入属性时调用的函数,默许值为undefined。
var person = new Object();
person.name = "狼狼的蓝胖子";
person.age = 25;
对象字面量

对象字面量很好精晓,使用key/value的款式直接创设对象,简洁方便。

1 var person = {
2     name: “狼狼的蓝胖子”,
3     age: 25
4 };

这种办法平素通过花括号将目标的本性包起来,使用key/value的章程创造对象属性,每一种属性之间用逗号隔绝。
在意:借使是最终贰个属性,前面就绝不加逗号,因为在一些旧的浏览器下会报错。

(二)定义或涂改对象属性

这种格局利用new关键字,接着跟上Object构造函数,再来给指标实例动态增添上分化的习性。这种办法相对来讲比较麻烦,一般推荐使用对象字面量来创制对象。

目的实例的性质和方法

任由通过哪类情势创设了指标实例后,该实例都会持有下边包车型地铁性质和艺术,上面将会挨个表明。

1、定义或改造数据属性

  • [[Value]]可直接定义,而[[Configurable]] 、
    [[Enumerable]]和[[Writable]]只能动用格局Object.definedProperty(
    )或Object.definedProperties( )修改暗许的天性。
  • 一旦调用方法Object.definedProperty( )或Object.definedProperties(
    ),若不点名,[[Configurable]] 、
    [[Enumerable]]和[[Writable]]的值都改为false。

Object.definedProperty()和Object.definedProperties()是
ES5(ECMAScript5)特有的,部分浏览器不包容。

目的字面量

constructor属性

constructor属性是保留当前目的的构造函数,后边的例子中,constructor保存的正是Object方法。

金沙糖果派对网站app 1

1 var obj1 = new Object();
2 obj1.id = "obj1";
3 var obj2 = {
4     "id": "obj2"
5 };
6 
7 console.log(obj1.constructor);//function Object(){}
8 console.log(obj2.constructor);//function Object(){}

金沙糖果派对网站app 2

2、定义或改换访谈器属性

访谈器属性不能够一向定义,必须使用Object.definedProperty( )来定义。

目的字面量很好精通,使用key/value的款型直接创制对象,简洁方便。

hasOwnProperty(propertyName)方法

hasOwnProperty方法接收二个字符串参数,该参数表示属性名称,用来判断该属性是不是在当下目的实例中,实际不是在对象的原型链中。大家来探问下边那几个例子:

1 var arr = [];        
2 console.log(arr.hasOwnProperty("length"));//true
3 console.log(arr.hasOwnProperty("hasOwnProperty"));//false

在那么些事例中,首先通过定义了叁个数组对象的实例arr,大家明白数组对象实际是通过原型链承继了Object对象,然后全部自个儿的一部分天性,大家透过hasOwnProperty方法判断length是arr自个儿的性质,而hasOwnProperty是在原型链上的习性。
hasOwnProperty方法可以和for..in结合起来获取对象本身的key。

(三)读取属性的性情

使用Object.getOwnPropertyDescriptor(obj,property)读取钦定对象obj的习性property的值。

var person = {
  name: “狼狼的蓝胖子”,
  age: 25
};
isPrototypeOf(Object)方法

isPrototype方法接收贰个对象,用来推断当前指标是或不是在传唱的参数对象的原型链上,聊到来有个别抽象,我们来看看代码。

1 function MyObject() {}
2 var obj = new MyObject();
3 console.log(Object.prototype.isPrototypeOf(obj));

小编们清楚MyObject是承继自Object对象的,而在JS中,承继是通过prototype来贯彻的,所以Object的prototype必定在MyObject对象实例的原型链上。

二、成立对象

JavaScript中可以利用以下7种方式来创造对象,个中“组合使用构造函数形式和原型方式”使用最广大、承认度最高。

这种措施一向通过花括号将对象的品质包起来,使用key/value的艺术成立对象属性,各样属性之间用逗号隔绝。
在意:假如是终极贰个属性,前面就不用加逗号,因为在局地旧的浏览器下会报错。

propertyIsEnumerable(prototypeName)方法

prototypeIsEnumerable用来决断给定的质量是不是足以被for..in语句给枚举出来。看上边代码:

金沙糖果派对网站app 3

1 var obj = {
2     name: "objName"
3 }  
4 for (var i in obj) {
5     console.log(i);
6 }

金沙糖果派对网站app 4

举行这段代码输出字符串“name”,这就证实经过for…in语句能够收获obj的name那几个个性,不过大家清楚,obj的属性还会有比非常多,譬喻constructor,比方hasOwnPrototype等等,然而它们并没有被输出,表达那一个属性不能够被for…in给枚举出来,可以透过propertyIsEnumerable方法来收获。

1 console.log(obj.propertyIsEnumerable("constructor"));//false

认清“constructor”是还是不是足以被枚举,输出false表达不也许被枚举出来。

(一) 工厂情势

function createStudent(name,country){
    var o=new Object();
    o.name=name;
    o.country=country;
    o.sayName=function(){
        alert(this.name);
    };
    return o;
}
var student1=createStudent("evelyn","China");

缺点:从未缓和对象识其余难题。

对象实例的本性和方法

toLocaleString()方法

toLocalString方法重回对象的字符串表示,和代码的实施景况有关。

1 var obj = {};
2 console.log(obj.toLocaleString());//[object Object]  
3 
4 var date = new Date();
5 console.log(date.toLocaleString());//2016/2/28 下午1:39:27

(二)构造函数方式

function Student(name,country){
    this.name=name;
    this.country=country;
    this.sayName=sayName;
}
function sayName{
        alert(this.name);
 }
var student1=new Student("evelyn","China");//student1既是Student的实例,也是Object的实例

任凭通过哪个种类格局创建了指标实例后,该实例都会具有上边包车型地铁天性和情势,上边将会挨个表达。

toString()方法

toString用来回到对象的字符串表示。

1 var obj = {};
2 console.log(obj.toString());//[object Object]
3 
4 var date = new Date();
5 console.log(date.toString());//Sun Feb 28 2016 13:40:36 GMT+0800 (中国标准时间)

1、关于构造函数

构造函数命名必须首字母大写,而非构造函数应该以贰个小写字母开首。

constructor属性

valueOf()方法

valueOf方法再次回到对象的原始值,大概是字符串、数值或bool值等,看具体的靶子。

金沙糖果派对网站app 5

 1 var obj = {
 2     name: "obj"
 3 };
 4 console.log(obj.valueOf());//Object {name: "obj"}
 5 
 6 var arr = [1];
 7 console.log(arr.valueOf());//[1]
 8 
 9 var date = new Date();
10 console.log(date.valueOf());//1456638436303

金沙糖果派对网站app 6

如代码所示,八个例外的靶子实例调用valueOf重临分化的数码。

2、缺点

对象的主意是全局的函数,但却只被某些对象调用。其余,若是有个别对象有为数非常多主意,就要定义大多大局函数,毫无封装性可言。

constructor属性是保留当前指标的构造函数,前边的例子中,constructor保存的正是Object方法。

属性的花色

金沙糖果派对网站app,在Javascript中,属性有二种档案的次序,分别是数码属性和做客器属性,大家来探视那三种属性具体是何等东西。

(三) 原型格局

function Student(){
}
Student.prototype={  
    constructor:Student, 
    name:"evelyn",
    country:"China",
    sayName:function(){
         alert(this.name);
    }
};
var student1=new Student();
var obj1 = new Object();
obj1.id = "obj1";
var obj2 = {
  "id": "obj2"
};

console.log(obj1.constructor);//function Object(){}
console.log(obj2.constructor);//function Object(){}
数据属性

数据属性我们可以领会为我们平常概念对象时赋予的性格,它能够张开读和写。然则,ES5中定义了一些特色,那么些特征是用来汇报属性的种种特色,天性是当中值,不能够一向访谈到。天性通过用两对方括号表示,比方[[Enumerable]]。属性的风味会有局地暗中同意值,要修改天性的暗许值,必须选用ES5概念的新章程Object.defineProperty方法来修改。
多少属性有4个描述其特点的天性,下边将相继表达每贰个风味:
(1)[[Configurable]]:该天性表示是或不是足以因此delete操作符来删除属性,私下认可值是true。

1 var obj = {};
2 obj.name = "myname";
3 
4 delete obj.name;
5 console.log(obj.name);//undefined

这段代码很精晓,通过delete删除了obj的name属性后,大家再拜见name属性就访谈不到了。
小编们透过Object.defineProperty方法来修改[[Configurable]]特性。

金沙糖果派对网站app 7

1 var obj = {};
2 obj.name = "myname";
3 Object.defineProperty(obj, "name", {
4     configurable: false
5 })                
6 
7 delete obj.name;
8 console.log(obj.name);//myname

金沙糖果派对网站app 8

经过将configurable天性设置成false之后,delete就不能删除name属性了,要是在从严情势下,使用delete去删除就能够报错。

(2)[[Enumerable]]:表示是还是不是可以由此for…in语句来枚举出属性,默许是true
大家来探视前边的例证:

金沙糖果派对网站app 9

1 var obj = {
2     name: "objName"
3 }  
4 for (var i in obj) {
5     console.log(i);//name
6 }

金沙糖果派对网站app 10

这段代码只输出了name属性,大家来将constructor属性的[[Enumerable]]设置为true试试。

金沙糖果派对网站app 11

 1 var obj = {
 2         name: "objName"
 3 }
 4 Object.defineProperty(obj, "constructor", {
 5     enumerable: true
 6 })
 7 
 8 for (var i in obj) {
 9     console.log(i);//name,constructor
10 }
11 console.log(obj.propertyIsEnumerable("constructor"));//true

金沙糖果派对网站app 12

这段代码中,for…in循环获得了name和constructor两性格子,而经过propertyIsEnumerable方法来推断constructor也回到了true。

(3)[[Writable]]:表示属性值是不是可以修改,暗许为true
如果[[Writable]]被安装成false,尝试修改时将未有效应,在严厉格局下会报错

(4)[[Value]]:表示属性的值,默以为undefined

大家经过二个简易的事例来拜访这两特性状:

金沙糖果派对网站app 13

 1 var obj = {
 2     name: "name"
 3 };
 4 console.log(obj.name);//name        
 5 
 6 Object.defineProperty(obj, "name", {
 7     value: "newValue",
 8     writable: false
 9 })
10 console.log(obj.name);//newValue
11 
12 obj.name = "oldValue";
13 console.log(obj.name);//newValue

金沙糖果派对网站app 14

大家率先定义了obj对象的name属性值为“name”,然后通过defineProperty方法来修改值,并且将其安装为不可修改的。接着大家再修改name属性的值,能够窥见修改无效。
假使我们由此defineProperty来修改name属性的值,是还是不是能够修改呢?答案是可以的:

1 Object.defineProperty(obj, "name", {
2     value: "oldValue"
3 })
4 console.log(obj.name); //oldValue

1、关于原型

  • hasOwnProperty()用于检查评定贰个性格是还是不是存在于实例中,可用于区分实例属性和一连原型的性质。
  • ES5的Object.getOwnPropertyDescriptor()方法只可以用于读取实例属性的描述符。
  • “property in
    obj”通过重回布尔值检查测试对象是或不是有有个别属性(不区分实例属性和原型属性)
  • hasPrototypeProperty()用于检查实验叁个属性是还是不是留存于原型中
  • ES5中object.defineProperty()用于定义属性。
  • 目的字面量花样创造的目的原型也就是重写原型。

hasOwnProperty(propertyName)方法

访谈器属性

做客器属性有一点点类似于C#中的属性,和数量属性的区分在于,它从不数量属性的[[Writable]]和[[Value]]多少个特色,而是有着一对getter和setter函数。
[[Get]]:读取属性时调用的函数,暗许是undefined
[[Set]]:设置属性时调用的函数,暗许是undefined
getter和setter是三个很有用的事物,倘使有多少个属性,当中第贰个属性值会趁着第贰个属性值的变化而改换。这种情景在我们一向的编码中初阶是极其普遍的。在头里的做法中,大家往往要去手动修改第贰天性格的值,那今后我们就足以因而get和set函数来解决那些难题。看上边这一个事例:

金沙糖果派对网站app 15

 1 var person = {
 2     age: 10
 3 }
 4 
 5 Object.defineProperty(person, "type", {
 6     get: function () {
 7         if (person.age > 17) {
 8             return "成人";
 9         }
10         return "小孩";
11     }
12 })
13 
14 console.log(person.type);//小孩
15 
16 person.age = 18;
17 console.log(person.type);//成人

金沙糖果派对网站app 16

经过修改age的值,type的值也会相应的修改,那样我们就不用再手动的去修改type的值了。
上面这种艺术也是能够达成平等的效能:

金沙糖果派对网站app 17

 1 var person = {
 2     _age: 10,
 3     type: "小孩"
 4 } 
 5 
 6 Object.defineProperty(person, "age", {
 7     get: function () {
 8         return this._age;
 9     },
10     set: function (newValue) {
11         this._age = newValue;
12         this.type = newValue > 17 ? "成人" : "小孩";
13     }
14 })
15 console.log(person.type);
16 
17 person.age = 18;
18 console.log(person.type);

金沙糖果派对网站app 18

至于访谈器属性,有几点要小心:
1、严刻情势下,必须同一时候安装get和set
2、非严厉方式下,能够只设置个中多个,若是只设置get,则属性是只读的,若是只设置set,属性则无从读取
3、Object.defineProperty是ES5中的新方式,IE9(IE8部分实现,唯有dom对象才支撑)以下浏览器不援助,一些旧的浏览器能够通过非规范方法defineGetter()和defineSetter()来设置,这里就不表达了,有野趣的同学可以寻找有关材质。

2、关于枚举

  • ES5中的constructor和prototype属性的[[Enumerable]]特点默感到false,因而for
    in不会枚举这两性子情。
  • for
    in循环重临可枚举的原型对象和实例对象;object.keys()再次回到可枚举的实例对象的应和数组;object.getOwnPropertyNames()重返全数的实例属性(无论是还是不是可枚举)。

hasOwnProperty方法接收贰个字符串参数,该参数表示属性名称,用来判定该属性是不是在此时此刻指标实例中,实际不是在目标的原型链中。大家来看看上面这几个事例:

性子操作的连带方法

ES5提供了有的读取或操作属性天性的法门,前边用到的Object.defineProperty正是内部之一。笔者总计了一些相比较常用的措施如下:

(1)Object.defineProperty
概念二个对象的属性,这几个主意前边我们曾经选择数次,轻松说说其用法。

1 Object.defineProperty(obj,propName,descriptor);

defineProperty有一点点类似于定于在Object上的静态方法,通过Object直接调用,它接受3个参数:
obj:须要定义属性的靶子
propNane:供给被定义的质量名称
defineProperty:属性描述符,包蕴部分性子的特色定义
事比如下:

金沙糖果派对网站app 19

1 var obj = {};
2 Object.defineProperty(obj, "name", {
3     value: "name",
4     configurable: true,
5     writable: true,
6     enumerable: true
7 });

金沙糖果派对网站app 20

(2)Object.defineProperties
和defineProperty类似,是用来定义对象属性的,不相同的是它能够用来还要定义八个天性,我们通过命名也足以看出来,用法如下:

金沙糖果派对网站app 21

 1 var obj = {};
 2 Object.defineProperty(obj, {
 3     "name": {
 4         value: "name",
 5         configurable: true,
 6         writable: true,
 7         enumerable: true
 8     },
 9     "age": {
10         value: 20 
11     }
12 });

金沙糖果派对网站app 22

(3)Object.getOwnPropertyDescriptor
ES5中还提供了贰个读取性情值的点子,该措施接收目的及其属性名作为五个参数,重临一个指标,遵照属性类型的两样,重回对象会含有区别的值。

金沙糖果派对网站app 23

 1 var person = {
 2     _age: 10,
 3     type: "小孩"
 4 }
 5 Object.defineProperty(person, "age", {
 6     get: function () {
 7         return this._age;
 8     },
 9     set: function (newValue) {
10         this._age = newValue;
11         this.type = newValue > 17 ? "成人" : "小孩";
12     }
13 })
14 
15 console.log(Object.getOwnPropertyDescriptor(person, "type"));//Object {value: "成人", writable: true, enumerable: true, configurable: true}
16 console.log(Object.getOwnPropertyDescriptor(person, "age")); //Object {enumerable: false, configurable: false, get: function(),set: function ()}

金沙糖果派对网站app 24

回到顶上部分

3、缺点

  • 简短传参环节,全数实例在私下认可意况下获得一致属性值。
  • 单独行使原型方式的最大缺欠在于,原型属性分享导致实例之间相互影响。
var arr = [];    
console.log(arr.hasOwnProperty("length"));//true
console.log(arr.hasOwnProperty("hasOwnProperty"));//false

Object的方法

在ES5中,Object对象上增加产量了一群措施,那一个格局能够直接通过Object进行拜候,前面用到的defineProperty就是新增加的办法之一。除外还会有十分多艺术,小编将其计算归咎如下:

(四)组合使用构造函数格局和原型形式(最常用)

function Student(name,country){
    this.name=name;
    this.country=country;
}
Student.prototype={
    constructor:Person,    //重写了默认的prototype对象,constructor不再指向Person(而是指向Object),因而重新设置指向Person
    sayName:function(){
         alert(this.name);
    }
};
var student1=new Student("evelyn","China");

特点:实例共享的天性和方法在原型中定义,除了这么些之外的实例属性在构造函数中定义。

在那么些事例中,首先通过定义了二个数组对象的实例arr,大家领略数组对象实际是因而原型链承袭了Object对象,然后全部本人的片段性质,我们通过hasOwnProperty方法决断length是arr本身的属性,而hasOwnProperty是在原型链上的质量。
hasOwnProperty方法能够和for..in结合起来获取对象本身的key。

对象创设型方法

(五)动态原型情势

function Student(name,country){
    this.name=name;
    this.country=country;
    if(typeof this.sayName!="function"){
        Student.prototype.sayName=function(){
             alert(this.name);
        };
    }
};
var student1=new Student("evelyn","China");

isPrototypeOf(Object)方法

Object.create(proto, [propertiesObject])

在前方我们关系,成立多少个目的有三种办法:构造函数和目的字面量。
那二种办法有二个久治不愈的病魔就是:假使要成立多少个对象,写起来很麻烦,所以往来就有了一种成立自定义构造函数的艺术来成立对象,如下所示:

金沙糖果派对网站app 25

1 function Person(name, age) {
2     this.name = name;
3     this.age = age;
4 }
5 
6 var person = new Person("Jack", 15);

金沙糖果派对网站app 26

这种艺术能够很有利的制造多少个一样的指标,也是当下可比常用的主意。

ES5提供的Object.create方法也是四个创设对象的艺术,这么些主意允许为开创的对象选拔原型对象,不要求定义二个构造函数。用法如下:

金沙糖果派对网站app 27

1 var obj = Object.create(Object.prototype, { 
2     name: {
3         value: "Jack"
4     }
5 })
6 console.log(obj.name);//Jack

金沙糖果派对网站app 28

以此办法接收的首先个参数作为被创造对象的原型,首个参数是指标的性情。注意:在这些例子中,name属性是力不可能及被修改的,因为它从未安装writable性情,暗中同意则为false。
民用意见:Object.create这种创造对象的方法略显繁琐,除非是内需修改属性的特色,不然不建议使用这种方法创设对象。

(六)寄生构造函数格局

function Student(name,country){
    var o=new Object();
    o.name=name;
    o.country=country;
    o.sayName=function(){
        alert(this.name);
    };
    return o;
}
var student1=new Student("evelyn","China");

isPrototype方法接收七个对象,用来推断当前指标是或不是在传诵的参数对象的原型链上,提起来有一点点抽象,大家来拜谒代码。

天性获取型方法

(七)妥善构造函数形式

function Student(name,country){
    var o=new Object();
    o.sayName=function(){
        alert(name);
    };  //只能通过sayName方法访问name的值
    return o;
}
var student1=Student("evelyn","China");
function MyObject() {}
var obj = new MyObject();
console.log(Object.prototype.isPrototypeOf(obj));
Object.keys

Object.keys是用来收获给定对象的全部可枚举的我性质的属性名,它回到多个数组。

金沙糖果派对网站app 29

 1 function Parent() {
 2     this.lastName = "Black"
 3 }
 4 function Child(firstName) {
 5     this.firstName = firstName;
 6 }
 7 Child.prototype = new Parent();
 8 
 9 var son = new Child("Jack");
10 console.log(Object.keys(son));//["firstName"]

金沙糖果派对网站app 30

代码中回到了firstName,并未再次回到从prototype承袭而来的lastName和数不胜数的相干部家属性。
在一部分旧的浏览器中,大家可以行使hasOwnProperty和for…in来达成近似的作用。

金沙糖果派对网站app 31

 1 Object.keys = Object.keys ||
 2     function (obj) {
 3         var keys = [];
 4         for (var key in obj) {
 5             if (obj.hasOwnProperty(key)) {
 6                 keys.push(key);
 7             }
 8         }
 9         return keys;
10     }

金沙糖果派对网站app 32

我们知道MyObject是传承自Object对象的,而在JS中,承继是透过prototype来兑现的,所以Object的prototype必定在MyObject对象实例的原型链上。

Object.getOwnPropertyNames()

getOwnPropertyNames用来获取对象自作者的具有属性,满含可枚举和成千成万的享有属性,如下所示:

金沙糖果派对网站app 33

 1 function Parent() {
 2     this.lastName = "Black"
 3 }
 4 function Child(firstName) {
 5     this.firstName = firstName;
 6 }
 7 Child.prototype = new Parent();
 8 
 9 var son = new Child("Jack");
10 Object.defineProperty(son, "age", {
11     enumerable: false
12 })
13 console.log(Object.keys(son));//["firstName"]  
14 console.log(Object.getOwnPropertyNames(son));//["firstName", "age"]

金沙糖果派对网站app 34

咱俩定义给son对象定义了三个不可胜道的性质age,然后经过keys和getOwnPropertyNames七个措施来赢得属性列表,能刚强看出了两岸分别。

propertyIsEnumerable(prototypeName)方法

特性特性型方法

本条关键是前边提到的几个主意:defineProperty,defineProperties和getOwnPropertyDescriptor八个主意

prototypeIsEnumerable用来决断给定的性情是否可以被for..in语句给枚举出来。看上边代码:

目的限制型方法

ES5中提供了一三种限制对象被修改的章程,用来严防被一些对象被无意修改导致的失实。各种限制类型涵盖叁个肯定格局和四个安装方法。

var obj = {
name: "objName"
} 
for (var i in obj) {
console.log(i);
}
堵住对象扩大

Object.preventExtensions()用来界定对象的增加,设置之后,对象将不能增多新属性,用法如下:

1 Object.preventExtensions(obj);

该方法接收叁个要被设置成无法扩充的靶子作为参数,须求留神两点:
1、对象的习性不可用扩张,可是已存在的性情能够被剔除
2、不可能增添新属性指的是心余力绌在自家上加多属性,假使是在目的的原型上,还能增添属性的。

金沙糖果派对网站app 35

 1 function Person(name) {
 2     this.name = name;
 3 }
 4 var person = new Person("Jack");
 5 Object.preventExtensions(person);
 6 
 7 delete person.name;
 8 console.log(person.name);//undefined
 9 
10 Person.prototype.age = 15;
11 console.log(person.age);//15

金沙糖果派对网站app 36

Object.isExtensible方法用来判别一个对象是否可扩大,暗许情形是true

实行这段代码输出字符串“name”,那就印证经过for…in语句可以获得obj的name那个天性,不过我们明白,obj的品质还恐怕有众多,举例constructor,比如hasOwnPrototype等等,不过它们未有被输出,表达这么些属性无法被for…in给枚举出来,能够经过propertyIsEnumerable方法来赢得。

将对象密闭

Object.seal能够密闭贰个对象并赶回被密闭的指标。
密闭对象不只怕增加或删除已有品质,也心有余而力不足修改属性的enumerable,writable,configurable,可是足以修改属性值。

金沙糖果派对网站app 37

1 function Person(name) {
2     this.name = name;
3 }
4 var person = new Person("Jack");
5 Object.seal(person);
6 delete person.name;
7 console.log(person.name);//Jack

金沙糖果派对网站app 38

将对象密闭后,使用delete删除对象属性,依旧得以访问得到属性。

透过Object.isSealed能够用来推断四个对象是还是不是被密封了。

复制代码 代码如下:

凝冻对象

Object.freeze方法用来冻结多少个对象,被冻结的对象将不能增多,修改,删除属性值,也无从修改属性的天性值,即这么些目的不可能被修改。

金沙糖果派对网站app 39

 1 function Person(name) {
 2     this.name = name;
 3 }
 4 var person = new Person("Jack");
 5 Object.freeze(person);
 6 
 7 delete person.name;
 8 console.log(person.name);//Jack
 9 
10 Person.prototype.age = 15;
11 console.log(person.age);//15

金沙糖果派对网站app 40

解析上面的代码我们得以窥见,被冰冻的靶子不能够删除自个儿的习性,不过通过其原型对象还能够激增属性的。

因此Object.isFrozen能够用来推断贰个目的是或不是被冷冻了。

能够发掘:这四个限制对象的不二诀要的界定程度是逐个上涨的。

回来顶上部分

console.log(obj.propertyIsEnumerable(“constructor”));//false

总结

Object虽说是一个我们一直付出中最平日接纳的靶子,可是它的居多成效还没有被大家发掘出来。本文首先介绍了Object的着力使用,接着介绍了有些相当少使用到的习性特性,最后剖判了有的比较常用的法子,特别是ES5中提供的新措施。接待大家交换!!

 

正文地址:,转发请申明

剖断“constructor”是或不是足以被枚举,输出false表明不只怕被枚举出来。

admin

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注