JS面向对象

这就是面向对象,很简单的

var box = new Object();
box.name='le';
box.age = 10;
box.run=function(){
    return this.name+this.age+'running';
};
var box2 = new Object();
box2.name='me';
box2.age = 20;
box2.run=function(){
    return this.name+this.age+'running';
};
alert(box.run());
alert(box2.run());

但如果要创建千百个对象呢,一个一个写吗,你写吧 反正我是不写,于是工厂模式就诞生了

function createObject(name,age){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.run = function(){
        return this.name+this.age+'running';
    }
    return obj;
}
var box1 = createObject('le',10);
var box2 = createObject('me',20);
alert(box1.run());
alert(box2.run());
alert(typeof box1);
alert(typeof box2);
alert(box1 instanceof Object);//true
alert(box2 instanceof Object);//true

这样就分不清谁是谁的对象,所以构造函数就诞生了

function Box(name,age){
    // 系统帮你搞定 var obj = new Object();
    this.name = name;
    this.age = age;
    this.run = function(){
        return this.name + this.age+'running';
    };
    // 系统自动 return obj;
};
var box1 = new Box('le',10);
var box2 = new Box('me',20);

alert(box1.run());
alert(box2.run());

有没有感觉开始接近面向对象的思想了,

function Box(name,age){
    // 系统帮你搞定 var obj = new Object();
    this.name = name;
    this.age = age;
    this.run = function(){
        return this.name + this.age+'running';
    };
    // 系统自动 return obj;
};
function Desk(name,age){
    // 系统帮你搞定 var obj = new Object();
    this.name = name;
    this.age = age;
    this.run = function(){
        return this.name + this.age+'running';
    };
    // 系统自动 return obj;
};
var box1 = new Box('le',10);
var box2 = new Box('me',20);
var box3 = new Desk('js',30);
alert(box1.run()); //true
alert(box3.run()); //false
alert(box3 instanceof Desk) //true;

构造函数是个好东西,构造函数要用new来调用。你也可以直接调用,但是没效果,知道为何吗,其实构造函数也是函数,为何调用没反应呢,你仔细对比发现没,是不是少了东西,少了个return对吧。函数没返回,怎么拿的到对象呢,有人又想,不是系统自动发挥吗,对,系统是自动返回的,但也是new了之后系统才会自动返回,你都没用new去调它,当然系统也就啥也不干。

为了后面插叙一个对象冒充:

function Box(name,age){
    this.name = name;
    this.age = age;
    this.run = function(){
        return this.name +this.age+'running';
    }
}

var bob=new Object();
Box.call(bob,'hi',22);
alert(bob.run());
function Box(name,age){
    this.name = name;
    this.age = age;
    this.run = function(){
        return this.name +this.age+'running';
    }
}

var box1 = new Box('le',10);
var box2 = new Box('me',20);
alert(box1.run == box2.run); //false
使用new同一个构造函数,对象的地址不一样
function Box(name,age){
    this.name = name;  //实例属性
    this.age = age;
    this.run = run;
};
function run(){
    return this.name +this.age+'running';
};

var box1 = new Box('le',10);
var box2 = new Box('me',20);

alert(box1.run()==box2.run()); //false
alert(box1.run == box2.run);    //true

function Box(){};     
Box.prototype.name = 'le';  //原型属性
Box.prototype.age = 10;

Box.prototype.run = function (){
    return this.name +this.age+'running';
};
var box1 = new Box();
var box2 = new Box();
alert(box1.prototype);  //undefined

alert(box1.__proto__);  //Object
alert(box1.constructor);  //function Box(){};alert(Box.prototype.isPrototypeOf(box1)); //true
function Box(){
    this.name = 'ja';
};     
Box.prototype.name = 'le';  
Box.prototype.age = 10;

Box.prototype.run = function (){
    return this.name +this.age+'running';
};
var box1 = new Box();
var box2 = new Box();

alert(box1.name);  //ja
先到构造函数里查找,找不到就到原型里找。
function Box(){    //this.name = 'ja';}; 
Box.prototype.name = 'le';
Box.prototype.age = 10; Box.prototype.run = function (){
return this.name +this.age+'running';
};
var box1 = new Box();var box2 = new Box(); alert(box1.name); //le
function Box(){
this.name = 'ja'; //实例属性
};
Box.prototype.name = 'le'; //原型属性
Box.prototype.age = 10;

Box.prototype.run = function (){
return this.name +this.age+'running';
};
var box1 = new Box();

//alert(box1.hasOwnProperty('name')); //true//判断function Box(){}中有没有有就true,

alert('name' in box1); //实例属性跟原型属性都没有 false,任意一个有为true
function isProperty(obj,property){
    return !obj.hasOwnProperty(property) && (property in obj);
}        //判断只有原型中有属性

function Box(){            
     
};    
Box.prototype.name = 'le';    //原型属性
Box.prototype.age = 10;

Box.prototype.run = function (){
    return this.name +this.age+'running';
};
var box1 = new Box();
box1.name = 'li';
alert(isProperty(box1,'name')); //true
function Box(){};
var box = new Box();
alert(box.prototype); //undefined //使用实例无法访问到prototype
alert(box.__proto__); //Object    //__proto__是prototype的指针
alert(Box.prototype);//Object     //使用构造函数名(对象名)访问到prototype

原型字面量的方式:

function Box(){};
Box.prototype = {
    //constructor: Box, //强制指向BOX
    name: 'le',
    age: 10,
    run: function(){
        return this.name+this.age+'running';
    }
};
var box = new Box();
alert(box.constructor== Box); //false
alert(box.constructor==Object); //true

 原型的有点是共享,同时也是缺点:

//原型的缺点
function Box(){};
Box.prototype = {
    constructor: Box,
    name: 'le',
    age: 10,
    family: ['哥哥','姐姐'],
    run: function(){
        return this.name+this.age+'running';
    }
};

var box1 = new Box();
box1.family.push('弟弟');
alert(box1.family); 

var box2 = new Box();
alert(box2.family);     // ['哥哥','姐姐','弟弟'] //共享了box1添加的,没有独立

所以就出现了构造函数+原型模式:

function Box(name,age){
    this.name = name;
    this.age = age;
    this.family = ['哥哥','姐姐'];
};
Box.prototype.run=function(){
    return this.name +this.age+'running';
};

var box1 = new Box('le',10);
box1.family.push('弟弟');
alert(box1.family);     //['哥哥','姐姐','弟弟']
var box2 = new Box('li',20);
alert(box2.family);      //['哥哥','姐姐']

寄生构造函数=工厂模式+原型模式

function Box(name,age){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.run = function(){
        return this.name+this.age+'running';
    }
    return obj;
};
var box1 = new Box('le',10);
alert(box1.run());

稳妥构造函数:

function Box(name,age){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.run = function(){
        return this.name+this.age+'running';
    }
    return obj;
};
var box1 = Box('le',10);
alert(box1.run());

跟寄生相比就是少了个new;有什么区别,为什么不用new也可以,以后再深究,

继承

function Box(name,age){
    this.name = name;
    this.age = age;
};
Box.prototype.family = 'fsm';

function Desk(name ,age){
    Box.call(this,name,age);
}
var desk = new Desk('le',10);
alert(desk.name);
alert(desk.family);  //undefined //对象冒充只能继承构造里的信息

掌握下面这一种就够了:

//组合继承 = 原型链+构造函数

 function Box(name,age){
    this.name = name;
    this.age = age;
};
function Desk(name,age) {
    Box.call(this,name,age);   //对象冒充
};
Box.prototype.run = function(){
    return this.name+this.age+'running';
};
Desk.prototype = new Box();    //原型链继承
var desk = new Desk('le',10);
alert(desk.run());

组合继承 这种模式很不错 ,必须掌握

//中转函数
function obj(obj){
    function F(){};
    F.prototype = obj;
    return new F();
}   
//寄生函数
function create(box,desk){
    var f = obj(box.prototype);
    //f.constructor = desk;
    desk.prototype = f;
}         
function Box(name,age){
    this.name = name;
    this.age = age;
}
Box.prototype.run = function(){
    return this.name+this.age+'running';
}
function Desk(name,age){
    Box.call(this,name,age);
}

create(Box,Desk);
var desk = new Desk('li',10);
alert(desk.run());
alert(desk.constructor);   //Box

完结!

原文地址:https://www.cnblogs.com/pfybk/p/13546688.html