6.1.1理解对象
创建自定义对象最简单的方式就是创建一个object实例。然后添加方法和实例
var person = new Object()
person.name = "hi"
person.sayName = function() {
alert(this.name)
对象字面量(创建方式)
var person = {
name: "hi",
sayName: function() {
alert()
}
}
6.1.2 属性类型
为了实现js引擎。es定义了只有内部才用的特性(不能直接访问)。描述了属性
es有两种属性:数据属性和访问器属性
1数据属性
数据属性包含一个数据值的位置/ 这个位置可以读取和写入值。数据属性有四个描述其行为的特性
- [[Configurable]] 表示---能否通过delete删除属性从而重新定义属性
---能否修改属性的特性
---能否把属性修改为访问器属性
总结:像前面那种直接在对象上定义属性。他们的这个特性值都是true(说明default是true) - [[Enumerable]] --- 能否被for in 返回属性
总结:像前面那种直接在对象上定义属性。他们的这个特性值都是true(说明default是true) - [[Writable]] ---能否修改属性的值
总结:像前面那种直接在对象上定义属性。他们的这个特性值都是true(说明default是true) - [[Value]] 包含这个属性的数据值。读取这个属性值的时候,从这个位置读。写入时候,把
新值保存在这个位置。这个特性的默认值是undefined
像前面那种直接在对象上定义属性,它们的前三项特性都是true。最后一项被设置为指定的值。
var person = {
name:"hi"
}
//这里创建了一个名为name的属性,为它指定的值是“hi”,也就是说[[Value]]特性将被设置为“hi”,而对这个值的任何修改都会反应在这个位置
要修改属性的默认的特性。需要用到Object.defineProperty()方法//同时也可以这样创建一个属性
//作为创建一个新的属性,如果不特别指定。configurable,enumerable,writable都默认为false。
//当configurable设置为false的时候,就不能再变回来。只能修改writable属性(当writable为true的时候)
//也就是说该属性的这四个特性都不能被更改了(除了writable,但是当writable被设置为false后也不可以更改)
//当configurable设置为true的时候,其他属性可以被任意修改
它接受三个参数(属性所在的对象,属性的名字,一个描述符对象)。描述符对象的属性必须是那四个。设置一个或者多个值
可以修改对应的特性值。
var person = {}
Object.defineProperty(person, "name", {
writeable: false
value:"hi"
})
alert(person.name) // "hi"
person.name = "bye"
alert(person.name) // "hi"
2.访问器属性
访问器属性不包含数据值,但是包含一对getter和setter函数(不过他们不是必需的)
读取访问器属性的时候,会调用getter函数,这个函数返回有效的值。
写入访问器属性的时候,调用setter函数并传入新值。这个函数决定处理数据。
访问器属性有如下四个特性
- [[Configurable]] 表示---能否通过delete删除属性从而重新定义属性
---能否修改属性的特性
---能否把属性修改为访问器属性
总结:像前面那种直接在对象上定义属性。他们的这个特性值都是true(说明default是true) - [[Enumerable]] --- 能否被for in 返回属性
总结:像前面那种直接在对象上定义属性。他们的这个特性值都是true(说明default是true) - [[Get]] : 读取属性时候调用的函数,默认undefined
- [[Set]] : 写入属性时候调用的函数。默认undefined
具体实现
<script>
var person = {
_name : "abc", //注意此处的_name有一个下划线
};
Object.defineProperty(person,"name",{
//注意第二个参数的前面没有下划线,所以_name和name是两个不同的属性
set : function(value){
this._name = "new name " + value;
//注意这里是给_name属性赋值
},
get : function(){
return "this is name get by function : " + this._name;
//注意这里是返回字符串加上_name的值
}
});
//到这里,person于是就有了两个属性:_name和name属性 // 直接获取_name属性
console.log(person._name); //abc //通过name属性来间接获取_name的值,因为会执行name属性的getter访问器属性(方法)
console.log(person.name); //this is name get by function : abc // 直接修改_name属性
person._name = "xyz";
console.log(person._name); //xyz //修改name属性,但是name属性的setter访问器属性(方法),会作用到_name属性上
person.name = "wtf"; //该字符串会在前面加上new name,然后在赋值给_name
console.log(person._name); //new name wtf
console.log(person.name); //this is name get by function : new name wtf
</script>
作用:比如更新本对象的全部属性
其实有些情况setter和getter很实用,比如在设置属性的时候需要将属性值做一些处理,当然这些处理可以在外部定义函数实现,也可以直接处理之后赋值,但是,使用setter和getter更加符合编程的思维,赋值或者获取属性值是不需要进行额外的操作,因为操作已经封装了,并且对外部来说是透明的。