Javascript的对象

本文章为笔记,如有错误请指正,万分感谢

JavaScript的对象是属性的无序集合,并且方法(函数)是属性,属性也是对象。

创建对象

  • 使用关键字new
    语法var obj = new [构造函];
    使用该方法创建对象,创建对象的__proto__属性会指向构造函数的prototype属性。
    例如:
function Test(i) {
    this.i = i;
}
Test.prototype.z = 5;
var testObj = new Test(1);
testObj.i;//1
testObj.z;//5
  • 直接使用字面量
    语法var obj={[属性1],[属性2],...};
  • 使用Object.create()方法创建
    语法var obj = Object.create([对象]);
    使用该方法创建对象,创建对象的__proto__属性会指向传入的对象。

对象的结构

function foo(){}
foo.prototype.z = 3;
var obj =new foo();
obj.y = 2;
obj.x = 1;
上方代码的对象的结构

对象的标签

先解释下什么是"标签",在这里指的是固有属性,即对象被创建时就会拥有的属性,下面的属性标签也是,当属性被创建时就会拥有的属性。这些标签可以控制对象和属性的状态
——以上是我的理解,好像没有官方文档这样说明

__proto__标签(属性)

__proto__是原型的意思,其值是对象的原型(是个对象),是个对象都拥有的标签,她是对象的隐性属性,不建议调用,兼容性较差。

class标签

class标签是记录对象的类型。class标签的值是无法直接得到的,我们可以使用Object.prototype.toString.call([对象])方法来的到其的值

extensible标签

extensible标签是用于控制对象是否允许添加和删除属性的,默认允许(true)。
Object.isExtensible([对象])可以检测对象的extensible标签值
Object.preventExtensions([对象]);可以阻止对象扩展属性,即extensible标签值为false

var obj = {x : 1, y : 2};
Object.isExtensible(obj); // true
Object.preventExtensions(obj);
Object.isExtensible(obj); // false
obj.z = 1;
obj.z; // undefined, add new property failed
Object.getOwnPropertyDescriptor(obj, 'x');
// Object {value: 1, writable: true, enumerable: true, configurable: true}

Object.preventExtensions([对象]);方法通常会配合如下方法使用

Object.seal(obj);//该方法可以将对象下所有属性的configurable标签值变为false
Object.getOwnPropertyDescriptor(obj, 'x');
// Object {value: 1, writable: true, enumerable: true, configurable: false}
Object.isSealed(obj); // true

Object.freeze(obj);//该方法可以将对象下所有属性的configurable标签和writable标签的值变为false
Object.getOwnPropertyDescriptor(obj, 'x');
// Object {value: 1, writable: false, enumerable: true, configurable: false}
Object.isFrozen(obj); // true

对象的属性

JavaScript的对象属性是以键值对的的方式存放的,键值对的key必须是字符串类型,如果不是则会被toString操作。
例如

var obj = {a : "a" ,b : 1} 

检测属性是否存在

  • 使用in关键字
    语法[属性名] in [对象]
    该方法可以检测出对象在原型链上的的属性
  • 使用hasOwnProperty()方法
    语法[对象].hasOwnProperty([属性名])
    该方法无法检测出对象在原型链上的的属性

对象的属性标签

Object.getOwnPropertyDescriptor([对象],[属性名])该方法可以给出属性的标签及其对应值

Object.getOwnPropertyDescriptor({pro : true}, 'pro');
// Object {value: true, writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptor({pro : true}, 'a'); // undefined
  • writable 标记对象属性是否可写,值为ture/false
  • enumerable标记对象属性是否可枚举或被遍历,值为ture/false
  • configurable标记对象属性的标签是否可配置,对象属性是否可删除,值为ture/false
  • value对象属性的值,赋值的属性的值为undefined(而不是null)。
  • get/set
属性标签的值所造成的影响

对象属性的值的读写

var obj = {x : 1, y : 2};
使用.操作符来读写属性值
obj.x; // 1
obj.y = 4;
由于JavaScript的对象属性是以键值对的的方式存放的所以我们可以使用key来读写属性值
obj["y"]; // 2
obj[x] = 3;

如果该对象的属性不属于该对象而属于该对象的原型链上的则只会覆写同名属性而不是改变属性的值

属性的删除

使用delete关键字删除,成功删除会返回true否则会返回false
如果对象属性的configurable标签值为true或者对象属性不存在又或者对象的属性属于原型链上的而不属于对象本身的都会删除失败
例如

var person = {age : 28, title : 'fe'};
delete person.age; // true
delete person['title']; // true
person.age; // undefined
delete person.age; // true

delete Object.prototype; // false,

var descriptor = Object.getOwnPropertyDescriptor(Object, 'prototype');
descriptor.configurable; // false

如果该属性曾被覆写,则删除该属性后则该属性依然存在并且会还原该属性在原型链上的值;
例如

function person(){}
var person= new person;
person.prototype.misYesr = 0;
person.misYesr  = 1;
delete person.misYesr;//true
person.misYesr;//0

属性的枚举

使用for in来枚举对象的属性key
枚举的内容可能是无序的,也会枚举原型链上可枚举的属性
使用方法:

var o = {x : 1, y : 2, z : 3};
var key;
for (key in o) {
    console.log(key); // x, y, z
}

使用propertyIsEnumerable()方法可以检测该属性是否可被枚举
例如:

o.propertyIsEnumerable('toString'); // false

其他创建对象属性的方法

  • 自定义对象属性
    语法Object.defineProperty([对象],[属性名],[对象标签及其值(不设定默认为false,value的值默认为undefined)])
    例如:
Object.defineProperty(person, 'name', {configurable: true, value : '本拉登'});

当然也可以一次性创建多个

Object.defineProperties(person, {
    title : {value : 'fe', enumerable : true},
    corp : {value : 'BABA', enumerable : true},
    salary : {value : 50000, enumerable : true, writable : true}
});
/**********/
Object.getOwnPropertyDescriptor(person, 'salary');
// Object {value: 50000, writable: true, enumerable: true, configurable: false}
Object.getOwnPropertyDescriptor(person, 'corp');
// Object {value: "BABA", writable: false, enumerable: true, configurable: false}
  • 使用get/set方法
var man = {
    get age() {
        return new Date().getFullYear() - 1988;
    },
    set age(val) {
        console.log('Age can\'t be set to ' + val);
    }
}
console.log(man.age); // 27
man.age = 100; // Age can't be set to 100
console.log(man.age); // still 27
/**
 *我们可以随时使用 Object.defineProperty() 给一个已经存在的对象添加一个 setter。
 */
var o = { a:0 };
Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } });
o.b = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
console.log(o.a) // 5

get/set在原型链上的注意事项

function foo() {}
Object.defineProperty(foo.prototype, 'z', {get : function(){return 1;}});
var obj = new foo();
obj.z; // 1
obj.z = 10;
obj.z; // still 1
/*******************/
/**
 *只能使用Object.defineProperty()方法来覆盖
 */
Object.defineProperty(obj, 'z', {value : 100, configurable: true});
obj.z; // 100;
delete obj.z;
obj.z; // back to 1
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,588评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,456评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,146评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,387评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,481评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,510评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,522评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,296评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,745评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,039评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,202评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,901评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,538评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,165评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,415评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,081评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,085评论 2 352

推荐阅读更多精彩内容