网页设计实战之JavaScript(6) -- 对象

一、面向对象

1.对象：

对象是一个整体，对外提供属性和若干操作。

2.面向对象：

使用对象时，只关注对象提供的功能，不关注其内部细节。比如电脑——有鼠标、键盘，我们只需要知道怎么使用鼠标，敲打键盘即可，不必知道为何点击鼠标可以选中、敲打键盘是如何输入文字以及屏幕是如何显示文字的。总之外部没必要知道其具体工作细节，只需知道如何使用其提供的功能即可，这就是面向对象。

3.JS的对象组成：

JS的对象由方法和属性构成。

在JS中，有函数、方法、事件处理函数、构造函数，其实这四个都是函数，只是作用不同。函数是独立的存在，方法属于一个对象，事件处理函数用来处理一个事件，构造函数用来构造对象。

二、对象定义

1、Object构造函数创建对象

	var object=new Object();
   object.username="zhangsan";
   alert(object.username);
   delete object.username;

2、对象字面量

var obj={
　　　　　　“attbuteName”:value,
　　　　　　…:…,
　　　　　　“mothodName”:function(){…this.attbuteName…}

var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:62,
    eyeColor:"blue"
};

3、工厂模式

用函数来封装以特定接口创建对象的细节

function createObject(name, age, job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function() {
        alert(this.name);
    };
 
    return o;
}

var p = createObject("光头强", 50, "伐木工");

特点：
都是Object实例，无法区分所创建对象的类型。

4、构造函数模式

自定义构造函数，创建特定类型的对象，同一个构造函数创建出来的对象属于一类

function People(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.getName = function() {
        alert(this.name);
    };
 
}
var p = new People("光头强", 55, "伐木工");

特点：
对于一些可以共享且相同的函数方法，却要多次创建在实例化对象中，占用内存，且复用性差。

5、原型模式

让所有的对象实例共享原型对象所包含的属性和方法，不必在构造函数中定义然后多次在实例对象中创建了，只需要添加给原型即可.

function People() {
}
 
People.prototype.name = "熊大";
People.prototype.age = 25;
People.prototype.job = "护林员";
People.prototype.getName = function() {
    alert(this.name);
};
var p1 = new People();
 
// 可以指定实例属性，屏蔽来自原型的属性值
p1.name = "猴大";

特点：
省略了传递给构造函数初始化参数这一环节，导致所有的实例默认都具有相同的属性值。更大的问题是对于原型上的引用类型属性，所有的实例之间会共享修改，丧失了独特性。

6、混合构造函数原型模式

最常见的创建自定义类型方式，构造函数中定义实例属性，原型对象中添加属性和方法

function People(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["猴大", "猴二"];
}
People.prototype = {
    constructor : People,
    getName : function() {
        alert(this.name);
    }
}
var p1 = new People("熊大", 25, "护林员");
var p2 = new People("熊二", 24, "护林员");
var p3 = new People("光头强", 50, "伐木工");
 
p1.friends.push("李老板");
alert(p1.friends); 
alert(p2.friends); 

特点：
支持向构造函数传递参数，每个实例都有自己的一份实例属性的副本，每个实例共享对方法的引用，最大限度节省内存。

7、动态原型模式

将构造函数和原型对象等定义统一到一个函数中，封装性更强，并且通过检测必要情况来决定是否初始化原型，效率更高

function People(name, age, job){  
    this.name = name;// 人名
    this.age = age;// 年纪
    this.job = job; // 工作
 
    //方法
    if (typeof this.getName!= "function"){
 
        People.prototype.getName= function(){
            alert(this.name);
        };
    }
} 
var p = new People("熊大", 29, "护林员");
p.getName();

原型方法的添加只执行一次，对原型所做的修改也能立即在实例中反映，但是需要注意不能使用对象字面量重写原型，否则会切断现有实例与新原型的联系。

8、寄生构造函数模式

当有特殊需求比如说创建一个具有额外方法的数组，由于不能直接修改Array，就可以使用这个模式。

function SpecialArray(){
 
    //创建数组
    var values = new Array();
 
    //添加值
    values.push.apply(values, arguments);
 
    //添加方法
    values.toPipedString = function(){
        return this.join("|");
    };
 
    //返回数组
    return values;
}
 
var colors = new SpecialArray("红色", "蓝色", "绿色");
console.log(colors.toPipedString()); // "红色|蓝色|绿色" 

9、稳妥构造函数模式

用来创建没有属性，不引用this的安全稳妥对象

function People(name, age, job){
 
    //创建要返回的对象
    var obj = new Object(); 
 
    //可以在这里定义私有变量和函数
 
    //添加方法
    obj.getName = function(){
        alert(name);
    };
 
    //返回对象
    return obj ;
}
 
var p = People("熊大", 29, "护林员");

注意：

• 除了使用getName方法外，没有其他办法访问name的值。
• 与寄生构造函数模式类似，使用稳妥构造函数模式创建的对象与构造函数之间没有什么关系，因此instanceof操作符也没有意义。