博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript的面向对象编码方式
阅读量:5037 次
发布时间:2019-06-12

本文共 3006 字,大约阅读时间需要 10 分钟。

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

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/zjypp/archive/2012/05/14/2499141.html

你可能感兴趣的文章
04_细节_变量和数据类型小结 ...
查看>>
Knotter 0.7.0 发布,交错图案设计工具
查看>>
Blue Mind 1.0 正式版发布,消息和协作平台
查看>>
最小生成树(luogu 3366)
查看>>
Python os.path.join 双斜杠的解决方法
查看>>
高并发下线程安全的单例模式
查看>>
牛客网2018年全国多校算法寒假训练营练习比赛(第二场)
查看>>
TD的访问地址
查看>>
Centos下的IO监控与分析
查看>>
在python包管理中使用easy_install软件的步骤
查看>>
JS笔记一:动态修改css样式
查看>>
一道关于数组的前端面试题
查看>>
为何要有交叉编译
查看>>
Retrotranslator使用简介(JDK1.5->1.4)
查看>>
Qss All
查看>>
C# 以ThreadStart方式实现多线程
查看>>
查询近一个月的表空间使用情况
查看>>
PTM人员(产品技术经理)
查看>>
Delphi 的RTTI机制浅探<一>
查看>>
SqlServer中循环和条件语句示例!
查看>>