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的值无法被改变。
• 可以直接在构造器外面为新建对象添加属性和方法
• 只可以在构造器里面为构造器添加属性和方法