面向对象基础

一、面向对象

    function creatPerson(name,qq) {  //构造函数
        var obj = new Object();

        obj.name = name;
        obj.qq = qq;

        obj.showName = function () {
            alert(this.name);
        }

        obj.showQQ = function () {
            alert(this.qq);
        }
        return obj;     //返回构建的对象
    }


    var object = creatPerson("张三",95499999999);   //object拥有obj的方法和属性
    object.showName();
    object.showQQ();

二、工厂方式

    function creatPerson(name,qq) {  //构造函数

    //原料（新空白对象)
    var obj = new Object();

    //加工
    obj.name = name;
    obj.qq = qq;

    obj.showName = function () {
        alert(this.name);
    };
    obj.showQQ = function () {
        alert(this.qq);
    };

    //出厂
    return obj;     //返回构建的对象
}

var object = creatPerson("张三","95499999999");
var object2 = creatPerson("李四","46186465849");
object.showName();
object.showQQ();

object2.showName();
object2.showQQ();

缺点：

1.没有new
2.函数重复->资源浪费

三、解决new的问题

    function show() {
        alert(this);
        this.showName = function() {
            alert("hehehe");
        }
    }
    //show();  -> window
    //new show(); -> Object 新new出来的对象
    //new show().showName(); -> 先弹出object，后弹出"hehehe" this指向新new出来的对象
    

    //解决没有new问题
    function creatPerson(name,qq) {  //构造函数

    //在函数调用前加了new之后，系统偷偷地做一些事情：
    //var this = new Object();

    this.name = name;
    this.qq = qq;

    this.showName = function () {
        alert(this.name);
    };
    this.showQQ = function () {
        alert(this.qq);
    };

    //也会偷偷做一些
    //return this;     //返回构建的对象
}

var object = new creatPerson("张三","95499999999");
object.showName();
object.showQQ();

四、原型prototype

css		js
class	一次给一组元素加样式	原型
行间样式	一次给一个元素加样式	给对象加事件

var arr1 = new Array(1,5,8,6,7);
var arr2 = new Array(11,25,58,16,17);

Array.prototype.sum = function () {  //class
//arr1.sum = function () {    //行间样式
    var result = 0;

    for (let i = 0; i < this.length; i++) {
        result+=this[i];
    }
    return result;
} 

alert(arr1.sum());
alert(arr2.sum());

五、类与对象

类：模子 -> Array
对象：产品（成品）->  arr

//解决函数重复问题
function creatPerson(name,qq) {  //构造函数

//在函数调用前加了new之后，系统偷偷地做一些事情：
//var this = new Object();

this.name = name;
this.qq = qq;

//也会偷偷做一些
//return this;     //返回构建的对象
}
var obj = CreatPerson("张三","95499999999");
alert(obj); //undefined -> creatPerson没有返回值 this指向window

//原型
CreatPerson.prototype.showName = function () {
    alert(this.name);
};
CreatPerson.prototype.showQQ = function () {
    alert(this.qq);
};

//要加new,不然无法调用构造函数
var object1 = new CreatPerson("张三","95499999999");
object1.showName();
object1.showQQ();
var object2 = new CreatPerson("李四","46186465849");
object2.showName();
object2.showQQ();

alert(object1.showName() == object2.showName()); //true,因为它们都是原型上的

用构造函数来加属性 行间样式
用原型来加方法 class
以上即是混合模式。