24 JavaScript对象访问器&JavaScript对象构造器
ES5引入了Getter和Setter
Getter和Setter允许定义对象访问器
JavaScript Getter(get关键字):获取对象属性
<script> var person = { name: "lisi", age: 12, language: "chi", get lang() { return this.language; } }; document.getElementById("demo").innerHTML = person.lang; </script>
JavaScript对象函数方式:
<script> var car1 = { name: "bmw", size: "middle", price: 10000000, getName: function(){ return this.name; }, setName: function(newName){ this.name = newName; } }; document.getElementById("demo").innerHTML = car1.getName(); car1.setName("audi"); document.getElementById("demo").innerHTML = car1.getName(); </script>
JavaScript Setter(set关键字):设置对象属性
<script> var car = { name: "bmw", size: "middle", price: 10000000, set newName(newname){ this.name = newname; } }; car.newName = "benz"; document.getElementById("demo").innerHTML = car.name; </script>
JavaScript对象中,get和set关键字设置的函数调用是以访问属性的形式访问,obj.func = str;
JavaScript对象中,一般函数的访问形式是obj.func(str);
相较之下,get和set方式提供了更简洁的语法。
JavaScript Getter和Setter实现计数器:
<script> var counter = { count: 0, get reset() { this.count = 0; }, get increment() { this.count++; }, get decrement() { this.count--; }, set add(number) { this.count += number; }, set subtract(number) { this.count -= number; } }; counter.increment; counter.add = 100; counter.decrement; counter.subtract = 50; document.getElementById("demo").innerHTML = counter.count; </script>
Object.defineProperty:为对象添加新属性或者修改已经存在的属性
Object.property(obj,prop,desc)
- obj:需要定义属性的当前对象
- prop:当前需要定义的属性名字(字符串类型)
- desc:对定义属性的描述
Object.defineProperty()实现计数器:
<script> var counter1 = { count: 0 }; Object.defineProperty(counter1, "reset", { get: function () { this.count = 0; } }); Object.defineProperty(counter1, "increment", { get: function () { this.count++; } }); Object.defineProperty(counter1, "decrement", { get: function () { this.count--; } }); Object.defineProperty(counter1, "add", { set: function (number) { this.count += number; } }); Object.defineProperty(counter1, "subtract", { set: function (number) { this.count -= number; } }); counter1.increment; counter1.add = 50; counter1.subtract = 20; document.getElementById("demo").innerHTML = counter1.count; </script>
JavaScript对象构造器:
对象构造器不同于单一对象,对象构造器旨在创建对象类型,或者说对象的蓝图。
以下示例中,Person()就是对象构造器函数。
单一对象:
var Person = {
firstName = "",
lastName = "",
age = "",
eyeColor = ""
}
对象构造器:
<script> //对象构造器 function Person(f,l,age,eyeColor){ this.firstName = f; this.lastName = l; this.age = age; this.eyeColor = eyeColor; //为构造器添加属性和方法,必须在构造器函数里面添加,不能在外面添加(除非使用原型链prototype) this.changeName = function(name){ this.lastName = name; }; } var zhangsan = new Person("zhangsan","lisi",13,"blue"); var liuliu = new Person("liuliu","qiqi",13,"blue"); document.getElementById("demo").innerHTML = zhangsan.lastName + " " + zhangsan.age; //为第一个对象添加国籍 zhangsan.nationnality = "China"; document.getElementById("demo").innerHTML = zhangsan.nationnality; //为第一个新对象添加方法 zhangsan.fulName = function(){ return zhangsan.firstName + " " + zhangsan.lastName; }; zhangsan.changeName("alibaba"); document.getElementById("demo").innerHTML = zhangsan.fulName(); </script>
- this指代当前对象,在对象构造器中,this是没有值的,当你创建了一个新对象,他就指代这个新对象。
- this是关键词,不是变量,this的值无法被改变。
- 可以直接在构造器外面为新建对象添加属性和方法
- 只可以在构造器里面为构造器添加属性和方法