js高级程序设计笔记2(面向对象)

一、理解对象

1. 数据属性

数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有 4 个描述其行为的特性。

  • [[Configurable]]:表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。像前面例子中那样直接在对象上定义的属性,它们的这个特性默认值为 true。
  • [[Enumerable]]:表示能否通过 for-in 循环返回属性。像前面例子中那样直接在对象上定义的属性,它们的这个特性默认值为 true。
  • [[Writable]]:表示能否修改属性的值。像前面例子中那样直接在对象上定义的属性,它们的这个特性默认值为 true。
  • [[Value]]:包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值的时候,把新值保存在这个位置。这个特性的默认值为 undefined。
var person = {};
Object.defineProperty(person, "name",
 {writable: false,value: "Nicholas"});
alert(person.name); //"Nicholas"
person.name = "Greg";
alert(person.name); //"Nicholas"  ```
注意:把 configurable 设置为 false,表示不能从对象中删除属性。如果对这个属性调用 delete,则在非严格模式下什么也不会发生,而在严格模式下会导致错误。而且,一旦把属性定义为不可配置的,就不能再把它变回可配置了。此时,再调用 Object.defineProperty()方法修改除 writable 之外的特性,都会导致错误 

##2、访问器属性 
-  [[Configurable]]:表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为数据属性。对于直接在对象上定义的属性,这个特性的默认值为true。
-  [[Enumerable]]:表示能否通过 for-in 循环返回属性。对于直接在对象上定义的属性,这个特性的默认值为 true。
-  [[Get]]:在读取属性时调用的函数。默认值为 undefined。 [[Set]]:在写入属性时调用的函数。默认值为 undefined。 
```
//访问器属性不能直接定义,必须使用 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 ```
######注意:不一定非要同时指定 getter 和 setter。只指定 getter 意味着属性是不能写,尝试写入属性会被忽略。在严格模式下,尝试写入只指定了 getter 函数的属性会抛出错误。类似地,只指定 setter 函数的属性也不能读,否则在非严格模式下会返回 undefined,而在严格模式下会抛出错误。 

#二、原型
```
//组合使用构造函数模式和原型模式 
function Person(name, age, job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.friends = ["Shelby", "Court"];
}
Person.prototype = {
        constructor : Person,
        sayName : function(){
            alert(this.name);
        }
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27,"Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //"Shelby,Count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true ```

#三、继承
###1、原型链 
```
function SuperType(){
    this.property = true;
} 
SuperType.prototype.getSuperValue = function(){
    return this.property;
};
function SubType(){
    this.subproperty = false;
}
//继承了 SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
    return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue()); //true ```


![构造函数和原型之间的关系 ](http://upload-images.jianshu.io/upload_images/2572649-18f9ce923ba6c63d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

```
//继承了 SuperType
SubType.prototype = new SuperType();
//使用字面量添加新方法,会导致上一行代码无效
SubType.prototype = {
    getSubValue : function (){
    return this.subproperty;
    },
    someOtherMethod : function (){
        return false;
    }
}; ```

###2、借用构造函数 (很少单独使用)
```
function SuperType(){
    this.colors = ["red", "blue", "green"];
}
function SubType(){
    //继承了 SuperType
    SuperType.call(this);//或者:SuperType.apply(this)
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green" ```
###3、寄生组合式继承 
```
function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
    alert(this.name);
};
function SubType(name, age){
    SuperType.call(this, name); //第二次调用 SuperType()
    this.age = age;
}
SubType.prototype = new SuperType(); //第一次调用 
SuperType()SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
    alert(this.age);
} ```

你可能感兴趣的:(js高级程序设计笔记2(面向对象))