JavaScript面向对象笔记记录（一）（示例代码）

/*
* 一、基本概念
* 对象：严格地说，对象是无特定顺序的值的数组
* 类：对象的配方
* 实例：使用类创建的对象
*
* 二、面向对象的语言要求
*
* 1、基本功能：封装、聚集、继承、多态
* 2、对象的应用
* */

//（1）实例化
var object = new Object()
var stringObj = new String()
//注意：构造无参对象不需要括号，以下方式也可以
var noArgObj = new Object

//（2）强制废除对象
object = null

/*
* 3、js可创建的三类对象
* */
//(1)本地对象
var obj = {}
var func = new Function()
var arr = []
var string = String()
var boolean = Boolean()
var num = Number()
var date = new Date()
var reg = new RegExp()
var error = new Error()
var eval = new EvalError()
var rangeError = new RangeError()
var referenceError = new ReferenceError()
var syntaxError = new SyntaxError()
var typeError = new TypeError()
var uriError = new URIError()

//(2)内置对象:Global和Math
//(3)宿主对象：BOM和DOM

/*
* 4、作用域
* */
/*
* 5、类定义
* */
var car = {
    color : 'blue',
    doors : 4,
    mpg : 25,
    showColor : function () {
        alert(this.color)
    }
}
// car.showColor()

//工厂方式
function createCar() {
    var tempCar = new Object()
    tempCar.color = 'red'
    tempCar.doors = 2
    tempCar.mpg = 25
    tempCar.showColor = function () {
        alert(this.color)
    }
    return tempCar
}

// var car1 = createCar()

//自定义构造函数
function Car1(color,doors,mpg) {
    this.color = color
    this.doors = doors
    this.mpg = mpg
    this.showColor = function () {
        alert(this.color)
    }
}

// var car3 = new Car1('red',2,12)

//原型方式
function Car2() {
}

Car2.prototype.color = 'red'
Car2.prototype.doors = 2
Car2.prototype.mpg = 14
Car2.prototype.showColor = function () {
    alert(this.color)
}
// car3 = new Car2()

//混合构造函数和原型的方式
function Car3(sColor,iDoors,iMpg) {
    this.color = sColor;
    this.doors = iDoors;
    this.mpg = iMpg;
    this.drivers = ["Mike","John"];
}

Car3.prototype.showColor = function() {
    alert(this.color);
};

// var oCar1 = new Car3("red",4,23);


//动态原型方法
function Car4(sColor,iDoors,iMpg) {
    this.color = sColor;
    this.doors = iDoors;
    this.mpg = iMpg;
    this.drivers = ["Mike","John"];

    if (typeof Car4._initialized == "undefined") {
        Car4.prototype.showColor = function() {
            alert(this.color);
        };

        Car4._initialized = true;
    }
}

//StringBuffer类和传统+号执行效率区别
var d1 = new Date();
var str = "";
for (var i=0; i < 1000000; i++) {
    str += "text";
}
var d2 = new Date();

document.write("Concatenation with plus: "
    + (d2.getTime() - d1.getTime()) + " milliseconds");

function StringBuffer () {
    this._strings_ = new Array();
}

StringBuffer.prototype.append = function(str) {
    this._strings_.push(str);
};

StringBuffer.prototype.toString = function() {
    return this._strings_.join("");
};

var buffer = new StringBuffer();
d1 = new Date();
for (var i=0; i < 1000000; i++) {
    buffer.append("text");
}
var result = buffer.toString();
d2 = new Date();

document.write("<br />Concatenation with StringBuffer: "
    + (d2.getTime() - d1.getTime()) + " milliseconds");

//prototype属性为任何已有的类定义新方法,包括本地类
Number.prototype.toHexString = function () {
    return this.toString(16)
}

/*
* 6、继承
* 注意：本地类和宿主类不能作为基类
* */
//(1)、对象冒充,可以实现多继承
function ClassA(sColor) {
    this.color = sColor
    this.sayColor = function () {
        alert(this.color)
    }
}

function ClassB(sColor) {
    this.newMethod = ClassA
    this.newMethod(sColor)
    delete this.newMethod

    this.name = sName
    this.sayName = function () {
        alert(this.name)
    }
}

//(2)call()方法
function  sayColor(sPrefix,sSuffix) {
    alert(sPrefix + this.color + sSuffix)
}

var obj = new Object()
obj.color = 'blue'

sayColor.call(obj,'The color is ',' a very nice color indeed.')
//使用call()方法代换ClassB继承
function ClassC(color,name) {
    ClassA.call(this,color)

    this.name = name
    this.sayName = function () {
        alert(this.name)
    }
}

//(3)使用apply()方法代换ClassB继承
function ClassD(color,name) {
    ClassA.apply(this,[color]) //参数为数组，可以吧ClassB整个arguments对象传入

    this.name = name
    this.sayName = function () {
        alert(this.name)
    }
}

//(4)原型链
function ClassX() {
}

ClassX.prototype.color = 'green'
ClassX.prototype.sayColor = function () {
    alert(this.color)
}

function ClassY() {
}

ClassY.prototype = new ClassX()

//(5)混合方式
function ClassM(color) {
}

ClassM.prototype.sayColor = function () {
    alert(this.color)
}

function ClassN(color , name) {
    ClassM.call(this.color)
    this.name = name
}

ClassN.prototype = new ClassM()

ClassN.prototype.sayName = function () {
    alert(this.name)
}