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();
})

 

 

 

 

 

 

 

posted @ 2012-05-14 11:47 音乐啤酒 阅读(...) 评论(...) 编辑 收藏