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

巴特西