《JavaScript高级程序设计》读书笔记

231 阅读2分钟

第4章 变量、作用域和内存问题

第6章 面向对象的程序设计

6.1理解对象

1、对象的实例

var person = new Object();
person.name = 'linda';
person.age = 18;
person.sayName = function(){
    alert(this.name)
}

2、对象的字面量方式

var person ={
    name:'linda',
    age: 18,
    sayName : function(){
        alert(this.name)
    }
}

6.1.1属性类型

1、数据属性

[[Configurable]]:能否delete删除属性重新定义、能否修改属性的特性、能否把属性修改为访问器属性
[[Enumerable]]:能否通过for-in循环返回属性
[[Writable]]:能否修改属性的值
[[Value]]:属性的数据值

Object.defineProperty(目标对象、属性名、描述符) 修改默认属性

var person = {};
Object.defineProperty(person,"name",{
    writable:false,
    value:'Gray'
})
alert(person.name);//Gray
person.name = 'lisa';
alert(person.name);//Gray

2、访问器属性 常见方式:设置一个属性的值会导致其他属性发生变化

[[Configurable]]:能否delete删除属性重新定义、能否修改属性的特性、能否把属性修改为访问器属性
[[Enumerable]]:能否通过for-in循环返回属性
[[Get]]:读取属性
[[Set]]:写入属性

通过Object.defineProperty()定义

var book = {
    _year:2004,
    edition:1
}
Object.defineProperty(book,"year",{
    get:function(){
        return this._year
    },
    set:function(newValue){
        if(newValue > 2004){
            this._year = newValue;
            this.edition += newValue - 2004
        }
    }
})
book.year = 2005;
alert(book.edition)//2

6.1.2定义多个属性

Object.defineProperties()

var obj = {};
Object.defineProperties(obj,{
    _year:{
        writable:true,
        value:2004
    },
    edition:{
        writable:true,
        value:1
    },
    year:{
        get:function(){
            return this._year
        },
        set:function(newValue){
            if(newValue > 2004){
                this._year = newValue;
                this.edition += newValue - 2004
            }
        }
    }
})

6.1.3读取属性的特征

Object.getOwnPropertyDescriptor(),可以取得给定属性的描述符

var descriptor = Object.getOwnPropertyDescriptor(book,"_year");
descriptor.value // 2004
descriptor.configurable // false

6.2创建对象

6.2.1工厂模式

function creatPerson(name,age){
    this.name=name,
    this.age = age,
    this.sayHi = function(){
        alert(this.name)
    }
var person1 = creatPerson('linda',18)
var pperson2 = creatPerson('lisa',10)
}

6.2.2构造函数模式

function Person(name,age){
    this.name=name,
    this.age=age,
    this.sayName = function(){
        alert(this.name)
    }
}
var person1 = new Person('linda',18);
var person2 = new Person('lisa',10);

1、将构造函数当做函数

任何函数,只要通过new操作符来调用,那它就可以作为构造函数

2、构造函数的问题

每个方法都要在每个实例上重新创建一遍

原型模式

prototype就是通过调用构造函数,创建的那个对象实例的原型对象

好处:让所有对象实例共享它所包含的属性和方法

function Person(){
}
Person.prototype.name="Nicho";
Person.prototype.age=18;
Person.prototype.sayName=function(){
    alert(this.name)
}
var person1 = new Person();
alert(person1.name)//Nicho
var person2 = new Person();
alert(person2.name)//Nicho