JAVASCRIPT高程笔记-------第六章 面向对象的程序设计

理解对象的概念  js中的对象与其他 编程语言中的类不一样  ECMAscript 没有类的概念      ECMA-262 把对象定义为 “无序属性的集合，其属性可以包含基本值，对象或者函数”   也就是键值对   可以理解成散列表  示例简单的创建一个对象

var person = new Object();
person.name = "zhangsan"
person.age = 20;
person.sayhi = function (){
	return "myName is "+this.name;
}
alert(person.sayhi());   // myName is zhangsan

　　

6.1  属性类型  ---ECMAscript包含两种属性： 数据属性和访问器属性   

6.1.1数据属性  ---简单来理解就是 描述对象属性的属性  相当于java中的元数据信息      

 　　 [[Configgurable]]  表示属性是否可以通过delete 删除属性 从而重新定义属性    或者能否将属性修改为访问器属性    示例中定义的person对象的name、age以及sayhi()方法 默认都是为true

 　　 [[Enumerable]]  表示对象的该属性是否可以通过 for-in循环返回该属性    示例中  定义的person对象的name、age以及sayhi()方法 默认都是为true

 　　 [[Waitable]] 表示能否修改 该对象的属性的值  相当于java中 final 关键字修饰的常量     示例中  定义的person对象的name、age以及sayhi()方法 默认都是为true

　　  [[Value]] 表示 该对象属性的实际值  例如示例中 person.name  的实际值就是等于"zhangsan"    这个特性的的值默认为undefined 

r如何修改对象属性默认的特性  则必须使用ECMAscript5的 Object.defineProperty()方法  此方法接收三个参数   第一个参数为对象  第二个参数为对象的属性，第三个参数为对象属性的描述 示例

var person ={};
Object.defineProperty(person,'name',{
    writable: false,       //设置person对象的name属性为只读
    configurable: true,  
    Enumerable: true,
    value: "zhangsan"
});
alert(person.name);   // ‘zhangsan’
person.name = 'lisi';　　　　　　　　//因为person对象name属性已经变成只读 所以此处修改无效，并且在严格模式下的js解析将会报错
alert(person.name);  // ‘zhangsan’
Object.defineProperty(person,'name',{
    writable: true,
    configurable: true,
    Enumerable: true,
    value: "zhangsan"
});

person.name = 'lisi';
alert(person.name);  // lisi

当对象属性的  [[Configgurable]]  特性 被修改后 将 无法还原  因为再次修改时会报错   

6.1.2  访问器属性   -----相当于java中的属性私有化  提供get和set方法   示例

var person ={
    name : 'zhangsan',
    _age: 25
};
Object.defineProperty(person,'age',{
    get : function(){
        return this._age;
    },
    set : function(newValue){
        if(newValue>0){
            this._age = newValue;
        }
    }
});
alert(person.age); // 25
person.age = -18;   //由于设定了年龄不能为负数  所以此处的修改无效
alert(person.age); // 25

get和set 属性 也可以单独 设置   但若只设置了get  那么意味着该属性为只读 而不能写入   严格模式下  尝试写入操作则会报错

6.1.3   获取对象属性的特性描述  ECMAscript5中  可以设置对象属性的特性，亦可以通过 Object.getOwnPropertyDescriptor()方法来获取这些 特性信息  该方法返回的是一个对象  如果是访问器属性 则这个对象的属性为 configurable、enumerable、get和set  如果是 数据属性 则为 configurable、enumerable、waitable、value

6.2创建对象    简单理解成java中自定义对象

//工厂模式创建对象  
function createPerson(name,age){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.sayhi = function(){
        alert('my name is ' + this.name);
    }
    return o;
}
var person1 = createPerson('zhangsan',27);
var person2 = createPerson('lisi',25);
//---------缺点 无法指定对象的类型------------------------

//构造函数模式  为了表示与普通函数的区别  函数首字母大写
function Person(name,age){
    this.name = name;
    this.age = age;
    this.sayhi = function(){
        alert('my name is ' + this.name);
    }
}
var person1 = new Person('zhangsan',27);
var person2 = new Person('lisi',25);

构造函数与工厂模式创建对象的最大区别 就是 对象的类型鉴别

通过工厂模式创建的对象一定是Object类型      而通过构造函数创建的对象 既属于Object对象类型  也属于自定义对象类型     因为任何对象都是由Object对象继承而来的

构造函数模式创建对象带来的问题     由于每个函数都是一个特殊对象     因此person1和 person2的sayhi方法实际上引用了2个不同的对象  而只完成了相同的事情    就是告诉别人我叫啥    当 存在N个person对象的同时  也存在 N个sayh 对象  造成内存浪费

为解决这个问题    -------  原型模式

function PersonF(name,age){
    this.name = name;
    this.age = age;
    this.sayhi = function(){
        alert('my name is ' + this.name);
    };
}
var person1 = new PersonF('zhangsan',27);
var person2 = new PersonF('lisi',25);
alert(person1.sayhi === person2.sayhi);    // false  因为每创建一个新的person对象  然后也创建了一个新的sayhi函数对象  所以他们不相等 

//原型模式  
function PersonP(name,age){
    this.name = name;
    this.age = age;
    
}
PersonP.prototype.sayhi= function(){
    alert('my name is ' + this.name);
}
var person1 = new PersonP('zhangsan',27);
var person2 = new PersonP('lisi',25);
alert(person1.sayhi === person2.sayhi)  // true  原型模式下 所有被创建的person对象 将共享sayhi函数对象，所以这里相等

 无论任何时候创建一个新的函数  js解析器默认会创建这个函数的prototype对象 默认情况下 这个prototype只包含 函数的构造器constructor属性  而其他方法 都是从Object继承而来  或者 后期手动添加进去  例如示例中我们给PersonP()这个对象的prototype中添加了sayhi方法

当一个实例对象中添加了与原型中重名方法时   则实际使用的是实例对象中的方法  ------相当于java的子类重写父类方法  示例

//原型模式  
function PersonP(name,age){
    this.name = name;
    this.age = age;
}
PersonP.prototype.sayhi= function(){
    alert('my name is ' + this.name);
}
var person1 = new PersonP('zhangsan',27);
var person2 = new PersonP('lisi',25);
person1.sayhi();     //  my name is zhangsan   来自于原型中的sayhi方法
person1.sayhi = function(){           //修改当前实例对象的sayhi方法
    alert("my age = " + this.age);  
};
person1.sayhi();  // my age = 27     来自于当前实例中的sayhi方法

alert(person1.hasOwnProperty("sayhi"));   // true  此方法是person1对象实例的方法
alert(person2.hasOwnProperty("sayhi"));     // false  此方法来自PersonP 原型中

 hasOwnProperty() 检测对象的方法是由原型继承而来还是属于本身实例

原型与in操作符

in 操作符   用于判断   某个属性  是否 属于 指定 对象    示例  alert(('name'  in person1));  // 执行结果为true       in 操作符 不管对象的属性 是实例对象本身的属性  还是由原型中继承而来   都会返回true

for-in  循环  时 返回的都是能通过对象访问的、可以枚举的属性 ，也包括原型中存在的属性    首先遍历的是对象构造函数内的属性  然后再往原型中查找属性  

function PersonP(name,age){
    this.name = name;
    this.age = age;
    this.sayhi= function(){
        alert('my name is ' + this.name);
    }
}
PersonP.prototype.saybay= function(){
    alert('my name is ' + this.name);
}
var person2 = new PersonP('lisi',25);
person2.money = 50;
for(var property in person2){
    console.log(property);   // 结果  name age sayhi   money  saybay 依次出现
}
var propertys = Object.keys(person2);
console.log(propertys);    // 结果  ["name", "age", "sayhi", "money"]

    Object.keys()  方法 接收一个对象参数  返回该对象上所有可枚举的属性 

利用原型创建对象的简写方式

function PersonP(){
}
PersonP.prototype ={
    constructor : PersonP,  // 此属性表明构造器 为 PersonP 对象的构造器  否则PersonP构造器默认由Object对象继承而来  是属于Object对象的构造器    但是会导致对象的构造器的[[enumerable]]特性 设置为true  
    name : 'zhangsan',
    age : 18,
    sayhi : function(){
        alert('my name is ' + this.name);
    }
}

 在ECMAscript 5  js解析引擎下   可以重设 对象的对象构造器为不可枚举 

Object.definedProperty(PersonP.prototype,'constructor',{
    enumerable : false,
    value: PersonP
});

原型的动态性  ------js引擎 在原型中查找值的过程是一次搜索  因此 对对象原型的任何修改 都会立即在对象的实例上体现出来

当 对象创建以后  再重写其原型  则会出现 无法调用原有函数的现象   参考示例   原因在于 对象实例原有的原型对象已经被切断与对象联系    因此原型查找时无法获取对象的sayhi方法

function PersonP(){
}
var person1 = new PersonP();
PersonP.prototype = {
    constructor : PersonP,  // 此属性表明构造器 为 PersonP 对象的构造器  否则PersonP 由于是一个空对象  构造器默认由Object对象继承而来
    name : 'zhangsan',
    age : 18,
    sayhi : function(){
        alert('my name is ' + this.name);
    }
}
person1.sayhi();  // error

 6.2.4组合使用构造函数模式和原型模式

　　将对象私有的属性放在构造函数中，而通用的方法放在原型中 例如  以person为例子   name、age、sex可能因人而已    但都会有打招呼  做自我介绍的方法sayhi方法 是通用的可以放在原型中

动态原型模式

function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
    if(typeof this.sayhi != 'function'){
        Person.prototype.sayhi = function(){
            alert(this.name);
        }
    }
}

寄生构造函数模式----- 与工厂模式一致   在一个对象有多个实例的时候   而其中某一个实例需要特殊处理 ，在不影响其他实例属性数据的情况下可以使用此模式来完成操作    有点类似与java中的包装设计模式

function Person(name,age,sex){ 
    var o = new Object();
    o.name = name ;
    o.age = age;
    o.sex = sex;
    o.sayhi =function(){
        alert(this.name);
    }
    return o;
}

稳妥模式----     没有公共属性，而且其他方法也不引用this对象 ，稳妥对象适合在一些安全的环境中使用（这些环境会禁用this和new）   ，感觉像java中常量一样，一旦初始化就不可修改

function Person(name,age,sex){
    var o = new Object();
    o.sayhi =function(){
        alert(name);     //不使用this
    }
    return o;
}

var person = Person('zhangsan',18,'男');  //不使用new操作符创建对象
person.sayhi();   //除此方法 之外 没有任何其他方法可以访问 person对象的name属性

 

6.3 继承

一、原型链式继承    其本质 是重写原型对象, 

function SuperType(){
    this.property = true;
    
}
SuperType.prototype.getSuperValue = function(){
    return this.property;
}

function SubType(){
    this.subproperty = false;
}
SubType.prototype = new SuperType();

var sub = new SubType();
alert(sub.getSuperValue());   //true 通过原型继承而来的方法

原型继承注意的问题：  一、共享原型中的属性和方法   二、不能向超类型的构造函数中传递参数

 　　二、借用构造函数

 利用 apply()  和 call() 方法在新创建的对象上执行构造函数    此方式可以传递参数给超类的构造函数     问题点   一、不能继承超类原型的属性和方法，二、方法都在构造函数当中，无法实现函数复用

function SuperType(){
    this.colors = ['red','blue','green'];
}
function SubType(){
    SuperType.call(this);
}

var instance1 = new SubType();
instance1.colors.push('black');
alert(instance1.colors); //red,blue,green,black

三、组合式继承 ---又叫做伪经典继承 

 将原型链和借用构造函数组合到一块  利用原型链继承超类的原型属性和方法，而借用构造函数来实现对实例属性的继承

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);
    this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function(){
    alert(this.age);
}

var instance1 = new SubType('zhangsan',28);
instance1.colors.push('black');
alert(instance1.colors); //red,blue,green,black  继承自超类的属性
instance1.sayName();  //zhangsan                传递给超类的参数  超类原型中的方法
instance1.sayAge();        //28                    自定义的方法

四、原型式继承  

先建立一个临时性的构造函数 然后将传入的对象当做这个构造函数的原型，最后返回这个临时类型的新实例   从本质上看 是object对传入对象的一次浅复制

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
var  person = {
    name : 'zhangsan',
    friends : ['lisi','wangwu']
}
var anotherPerson = object(person);
anotherPerson.name = 'zhaotiezhu';
anotherPerson.friends.push('zhangxiaohua');  //找了个女朋友赵小花
alert(person.friends);    //lisi,wangwu,zhangxiaohua

ECMA5.0  中 新增了 Object.create() 方法 规范了原型式继承   此方法接收两个参数，第一个参数为创建新对象的原型  另外一个用于修饰新对象中元数据的描述（可选）如下面代码

var  person = {
    name : 'zhangsan',
    friends : ['lisi','wangwu']
}
var person1  = Object.create(person);
person1.name = 'lisi';
alert(person1.name);
var person2  = Object.create(person,{
    name :{
        //writable : false, 
        value : 'wangwu'
    }
});  //第二个参数为新对象的元数据修饰参数  此处由于未设置 person2对象的name属性 为可写的    所以导致 在修改 person2的name属性不成功
alert(person2.name);     //wangwu
person2.name = 'zhaoliu';
alert(person2.name);    //wangwu

 寄生式继承  ----接收一个对象参数     在函数内部对此对象进行增强   然后返回这个函数--------------------------感觉像java中的实现接口？？？？

function createAnother(original){
    var clone = object(original);
    clone.sayhi = function(){    //  
        alert("hi");
    }
    return clone;
}
var  person ={
    name:'zhangsan',
    friends:['lisi','wangwu']
}
var  anotherPerson = createAnother(person);
anotherPerson.sayhi();   //hi

6.3.6 寄生组合式继承  

    组合式继承的缺陷 ---无论任何条件下都需要调用两次超类型的构造函数   第一次为指定子类原型  第二次为子类构造函数中 借用超类的构造函数      第一次调用已经拥有了超类的属性  第二次调用 则是在子类上重新创建了与原型中相同属性  从而屏蔽了原型的属性

寄生组合式继承  通过借用构造函数来继承超类属性，通过原型链的混成形式来继承方法---------此方式体现在只调用一次超类的构造函数  避免了subtype.prototype上面创建多余的属性  ，原型链还能保持不变，因此能够正常使用 instanceof和isPrototypeOf()方法去确定类型

function inheritPrototype(subType,superType){
    var prototype = Object(superType.prototype);     //创建对象
    prototype.constructor = subType;                //增强对象
    subType.prototype = prototype;                    //指定对象
}

function SuperType(name){
    this.name = name;
    this.friends = ['xiaohua','xiaoming']
}

SuperType .prototype.sayhi = function (){
    alert(this.name);
}

function SubType(name,age){
    SuperType.call(this,name);
    this.age = age;
}

inheritPrototype(SubType,SuperType);
SubType.prototype.sayAge = function(){
    alert(this.age);
}

var person = new  SubType('zhangsan',28);
person.friends.push('xiaohong');  //找了个女朋友 小红
person.sayAge();            //28
person.sayhi();                //zhangsan
alert(person.friends);        //xiaohua,xiaoming,xiaohong

 小结 ： ECMAscript支持面向对象编程，但没有类和接口的概念 。对象可以在代码执行过程中创建和增强，因此具有动态性而非严格的定义的实体对象，

 创建对象   1.工厂模式   定义一个函数 接收指定参数  函数内部创建Object对象  添加传入的参数作为属性，然后返回对象

　　　　　2.构造函数模式   可以创建自定义引用类型  可以向内置对象一样使用new 操作符 缺点 每个成功都无法得到复用 包括方法

　　　　　3.原型模式，使用构造函数的prototype属性来指定共有的属性和方法   

  对象继承   ECMAscript 主要通过原型链实现继承      原型链的构造是将一个实例赋值给另一个构造函数 ，这样通过构造函数 new处理的对象的原型指向超类的实例    实现 属性和方法复用

　　　　　通常使用  组合式寄生继承    避免了多次调用超类的构造函数   以及属性的唯一性