javascript的面向对象编码方式

javascript的面向对象编码方式

一，创建空对象，然后给空对象添加属性和方法

var person = {};//创建了一个空对象

给对象添加属性和方法

person.name="hello";

person.say =function(){

　　alert(person.name);

}

//调用的时候直接可以person.name或者person.say()

二。创建对象的同时，同时添加属性和方法

ver person={

name:"hello" ,//逗号分割

say:function(){alert(this.name);}//使用this关键字引用本对象内的属性和方法

}

 

三。对象之间的赋值和克隆相关

 

var Maming = person;

这个代码会创建一个新对象Maming，并且把person赋值给Maming

这样的赋值过程，相当于一个浅克隆。Maming和person这两个对象都是指向同一个引用对象，所以当改变Maming.name的时候，person.name也会发生改变

 

 四。构造函数方式面向对象

构造函数是另一个编写面向对象JavaScript代码的方法，

当你需要初始化对象的属性、方法，或者需要创建多个属性、方法各不相同的实例时，它将是你最佳的选择。同样我们先从创建一个空对象开始：

 无参数的构造函数方式的例子

var test = function () { }

var t1 = new test();
var t2 = new test();
t1.name = "t1";
t2.name = "t2";
alert(t1.name);
alert(t2.name);

弹出的name值分别是t1，t2

还可以注册新方法

t1.say = function () {
    alert("t1 say");
}
t1.say();

 

有参数的构造函数方式的例子

//这这个代码段中方法可以在构造函数内直接设置，也可以在构造函数外面通过prototype设置，构造函数中的每句的结尾使用；分号或者，逗号都是可以的
推荐的是混合代码，字段属性想隐私的写在构造函数方法体内，想公开分享的用prototype写在 构造函数方法体外面
function Person(name,age){
    this.name = name;
    this.age = age;
　　this.say = function () {
        alert("name is :" + this.name + ",age is :" + this.age);
    }
}
Person.prototype = {
    GetName: function () {
        alert(this.name);
    },
    GetAge: function () {
        alert(this.age);
    }
}
Person.prototype.constructor = Person;这个代码可以修正实例化的person类的constructor指向错误
调用示例
var p = new Person("hello",20)
p.GetName();//输出hello
p.GetAge();//输出20

 

 五。javascript继承的简单实现

继续参照上面的Person类，定义Maming类，继承Person类

 

function Maming(name, age) {
    this.name = name;
    this.age = age;
}
Maming.prototype = new Person();//这个语法实现Maming继承Person，也就继承了Person中的GetName，GetAge的方法

调用示例
var m = new Maming("maming",20);
m.GetName();//maming
m.GetAge();//20

如果在子类中覆盖父类的方法？

可以在子类中覆盖父类的方法，调用子类自己的方法，比如Maming类的自己GetName方法

 

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

Maming.prototype = new Person();

Maming.prototype.GetName = function () {
        alert("maming :" + this.name);
    }

这样在调用Maming.GetName的时候输出就是“maming”+name

六，闭包模式下的一点方法。

这个和jquery有关系

(function($){。。。})(jQuery) 这是闭包的开发代码模式

闭包的最大用途在于私有化，保护私有方法，属性等。防止本来只是让插件自己调用的方法被用户调用，如果用户调用了插件专用的方法，肯定需要做更多的处理。

闭包中的代码会最优先执行，要比jquery中ready方法还靠前，在html dom元素加载之前就已经执行了

所以这个时候或许某个dom属性只能得到undefined，当然是后期通过方法被调用当然是可以，这里说的主要是字段和属性方式来获得dom

 

(function ($) {

    var Test = {
        a: 100,
        b: $("#aa").val(),
        alert: function () {
            alert(this.a);//100
            alert(this.b);//undefined
        }
    }
　　window.Test = Test;//非常重要，因为Test是在闭包中定义的类，在$(function () {}方法中得不到Test对象的。但是window本身是全局性的，所以把Test赋值给window.Test属性
这样在其他地方都可以使用Test类对象
})(jQuery)


$(function () {

    Test.alert();
})

 

另外一个改进的方式的在闭包中执行ready方法，闭包会先执行，但是ready方法会等等页面加载完毕才执行，这个时候bb.b就可以获得dom的值

(function ($) {
    $(function () {//多了这个ready方法
        var bb = {
            a: 100,
            b: $("#input_a").val(),
            alert: function () {
                alert(this.b);
            }
        }
        window.bb = bb;
    });

})(jQuery)

$(function () {

    bb.alert();
})