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