JS面向对象与原型

面向对象与原型
一、创建对象
1、基本方法

var box = new Object();    //创建对象
box.name = 'Lee';        //添加属性
box.age = 100;
box.run = function(){    //添加方法
    return this.name + this.age + '运行中...';    //this表示当前作用于下的对象
};

alert(box.run());

alert(this.anme);    //这里的this代表的是window

2、工厂模式

//创建一个集中实例化的函数
function createObject(name,age){
    var obj = new Object();            //创建对象
    obj.name = name;                //添加属性
    obj.age = age;
    obj.run = function(){            //添加方法
        return this.name + this.age +'运行在...';
    };
    return obj;                        //返回对象引用
}    

var box1 = new createObject('Lee',100);        //创建第一个对象
var box2 = new createObject('Jack',200);    //创建第二个对象

alert(box1.run());                            //打印第一个对象实例的run()方法
alert(box2.run());           

3、构造函数

function Box(name,age){    //创建一个对象
    this.name = name;    //添加一个属性
    this.age = age;
    this.run = function(){    //添加一个方法
        return this.name + this.age + '运行中...';
    };
}

注意事项：
(1).构造函数也是函数，但函数名第一个字母必须大写
(2).必须new构造函数名()
(3).必须使用new运算符，用普通函数调用一般无效
构造函数和普通函数的唯一区别，就是他们调用的方式不同。只不过，构造函数也是函数，必须用new运算符来调用，否则就是普通函数。

使用了构造函数的方法，和使用工厂模式的方法他们不同之处如下：

1.构造函数方法没有显示的创建对象(new Object())；

2.直接将属性和方法赋值给this对象；

3.没有renturn语句。

　　构造函数方式

原型模式方法

在原型模式声明中，多了两个属性，这两个属性都是创建对象时自动生成的。__proto__属性是实例指向原型对象的一个指针，它的作用就是指向构造函数的原型属性constructor。通过这两个属性，就可以访问到原型里的属性和方法了。

二、原型
//原型实例

function Box(){} //构造函数体内什么都没有，这里如果有，叫做实例属性，实例方法

Box.prototype.name = 'Lee';    //添加原型属性
Box.prototype.age = 100;    //添加原型属性
Box.prototype.run = function(){    //添加原型方法
　　return this.name + this.age + '运行中...';
};

原型模式的执行流程：
1.先查找构造函数实例里的属性或方法，如果有，立刻返回；
2.如果构造函数实例里没有，则去它的原型对象里找，如果有，就返回；

原型的声明是有先后顺序的，所以，重写的原型会切断之前的原型。

//使用字面量方式创建原型
1 function Box() {};
Box.prototype = {    //使用字面量的方式，这里{}就是对象，是Object，{}就相当于new Object
3　　 name : 'Lee',
4　　 age : 100,
5　　 run : function () {
6　 　　return this.name + this.age + '运行中...';
7　　 }
};

原型的优点 -- 共享 -- 也是缺点
解决缺点方式
1、组合构造函数+原型模式

function Box(name,age){    //保持独立的用构造函数
 2　　 this.name = name;
 3　　 this.age = age;
 4　　 this.family = ['哥哥','姐姐','妹妹'];
 5　　 }

 7　　 Box.prototype = {    //保持共享的用原型模式
　　constructor : Box,
 9　　 run : function(){
10　　　　 return this.name + this.age + "运行中...";
11　　 }
};

2、动态原型模式

//使用此方法，不可以再使用字面量的方式重写原型，因为会切断实例和新原型之间的联系
//可以将原型封装到构造函数里
function Box(name,age){    
　　this.name = name;
　　this.age = age;
　　this.family = ['哥哥','姐姐','妹妹'];

　　//原型的初始化，只要一次初始化就可以了，没必要每次构造函数实例化的时候都初始化
　　if(typeof this.run != 'function'){    //判断this.run是否存在
　　　　Box.prototype.run = function(){
　　　　　　return this.name + this.age + "运行中...";    
　　　　};
　　}
}

3、寄生构造函数(= 工厂模式 + 构造函数)

function Box(name,age){
　　var obj = new Object();
　　obj.name = name;
　　obj.age = age;
　　obj.run = function(){
　　　　return this.name + this.age + "运行中...";    
　　}
　　return obj;
}

4、稳妥构造函数

//在一些安全环境中，如禁止使用this(构造函数里不使用this)和new(外部实例化构造函数不使用new)
function Box(name,age){
    var obj = new Object();
    obj.run = function(){
    return name + age + "运行中...";    //直接打印参数即可    
    }
    return obj;  
}  

三、继承
1、通过原型链继承

function Box(){    //被继承的函数叫做超类型(父类，基类)
// this.name = 'Lee';
}

Box.prototype.name = 'Jack';

function Desk(){    //继承的函数叫做子类型(子类，派生类)
this.age = 100;
}

//通过原型链继承
Desk.prototype = new Box();

var desk = new Desk();
alert(desk.name);    //就近原则，实例里有就返回，没有就去查找原型

2、借用构造函数继承(对象冒充继承)

function Box(age) {
　　this.name = ['Lee', 'Jack', 'Hello']
　　this.age = age;
}

function Desk(age) {
　　Box.call(this, age);    //对象冒充，给超类型传参
}

var desk1 = new Desk(200);
alert(desk1.age);
alert(desk1.name);
desk1.name.push('AAA');    //添加的新数据，只给desk
alert(desk1.name);

var desk2 = new Desk(200);
alert(desk2.name);

3、组合继承(=原型链+借用构造函数)

function Box(age) {
　　this.name = ['Lee', 'Jack', 'Hello']
　　this.age = age;
}

Box.prototype.run = function () {    
　　return this.name + this.age;
};

function Desk(age) {
　　Box.call(this, age);    //对象冒充
}

Desk.prototype = new Box();    //原型链继承

var desk = new Desk(100);
alert(desk.run());

4、原型式继承

//临时中转函数
function obj(o){    //o表示将要传递进入的一个对象
　　function F(){}    //F构造是一个临时新建的对象，用来存储传递过来的对象
　　F.prototype = o;    //将o对象实例赋值给F构造的原型对象
　　return new F();    //最后返回这个得到传递过来对象的对象实例
}

//这是字面量的声明方式，相当于 var box = new Box();
var box = {
　　name : 'Lee',
　　age : 100,
　　family : ['哥哥','姐姐','妹妹']
};

//box1就等于new F()
var box1 = obj(box);
// alert(box1.name);
alert(box1.family);
box1.family.push('弟弟');
alert(box1.family);

var box2 = obj(box);
alert(box2.family);    //引用类型的属性共享了

5、寄生式继承(=原型式+工厂模式)

//临时中转函数
function obj(o){    //o表示将要传递进入的一个对象
　　function F(){}    //F构造是一个临时新建的对象，用来存储传递过来的对象
　　F.prototype = o;    //将o对象实例赋值给F构造的原型对象
　　return new F();    //最后返回这个得到传递过来对象的对象实例
}

//寄生函数
function create(o){
　　var f = obj(o);
　　f.run = function(){
　　　　return this.name + "方法";
　　}
　　return f;
}

//这是字面量的声明方式，相当于 var box = new Box();
var box = {
　　name : 'Lee',
20　　 age : 100,
　　family : ['哥哥','姐姐','妹妹']
};

var box1 = create(box);
alert(box1.run());

6、寄生组合继承

//临时中转函数
function obj(o){    //o表示将要传递进入的一个对象
　　function F(){}    //F构造是一个临时新建的对象，用来存储传递过来的对象
　　F.prototype = o;    //将o对象实例赋值给F构造的原型对象
　　return new F();    //最后返回这个得到传递过来对象的对象实例
}

//寄生函数
function create(box, desk){
　　var f = obj(box.prototype);
11　　f.constructor = desk;    //调整原型构造指针
12　　 desk.prototype = f;
}

function Box(name,age){
　　this.name = name;
　　this.age = age;
}

Box.prototype.run = function(){
21　　 return this.name + this.age + '运行中...';
};

function Desk(name,age) {
　　Box.call(this, name, age);    //对象冒充
}

//通过寄生组合继承来实现继承
create(Box,Desk);    //这句话用来替代Desk.prototype = new Box()

var desk = new Desk('Lee',100);
alert(desk.run());
alert(desk.constructor);

 

使用了构造函数的方法，和使用工厂模式的方法他们不同之处如下：

1.构造函数方法没有显示的创建对象(new Object())；

2.直接将属性和方法赋值给this对象；

3.没有renturn语句。