细说JavaScript面向对象编程
2016-06-14 12:07
381 查看
细说JavaScript面向对象编程
赖志 2013-11-19(版权所有,转载需注明出处)
面向对象编程,大家听得多并且也一直在使用着,面向对象程序语言具有三个基本特征:
封装、继承、多态。概括性地理解,封装就是把数据或者方法等相关信息存储在对象中的能力。继承就是从另一个类中获得属性和方法的能力。多态就是编写和实现名字相同但是行为不同的函数或方法的能力。
那么,对于JavaScript面向对象编程又是怎么一回事呢?实际上跟C++、JAVA的面向对象编程是有挺大的差异,很多开发者对JavaScript如何创建类一直处于模糊状态,甚至没能理解。本文着重介绍JavaScript是如何创类对象的。
JavaScript有很多创建对象和类的方法。
1、 最原始的方式,先创建对象,再赋予属性和方法。
2、 工厂方法:返回特定类型的对象,实际上就是一个返回对象的方法。
3、 构造函数方式创建类。类似JAVA的构造函数了。
跟工厂方法相似,构造函数会重复生产函数,为每个对象都创建独立的函数版本。也可以用外部函数重写构造函数,这么做语义上无任何意义,下面的原型方式解决这个问题。
4、 原型方式。利用了对象的
prototype 属性,可以把它看成创建新对象所依赖的原型。
首先用空构造函数来设置类名。然后所有的属性和方法都被直接赋予 prototype 属性。
5、 混合构造函数和原型方式。联合使用构造函数和原型方式。它的概念很简单,用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。结果是,所有函数都只创建一次,而每个对象都具有自己的对象属性实例。
6、 动态原型方法。
我们平常都习惯使用JAVA,也对JAVA创建类方式根深蒂固,难免会对上面这种创建方式感觉别扭,这个动态原型方法就显得更友好自然了。
7、 混合工厂方法。目的是创建假构造函数,只返回另一种对象的新实例。
综上所述,目前使用最广泛的是第5种混合构造函数和原型方式。没有固定说只用哪一种方式,开发者可以根据自己的习惯,去熟练运用一种就行。掌握了JavaScript的面向对象技术,在日后使用JavaScript的时候会更加游刃有余了。
赖志 2013-11-19(版权所有,转载需注明出处)
面向对象编程,大家听得多并且也一直在使用着,面向对象程序语言具有三个基本特征:
封装、继承、多态。概括性地理解,封装就是把数据或者方法等相关信息存储在对象中的能力。继承就是从另一个类中获得属性和方法的能力。多态就是编写和实现名字相同但是行为不同的函数或方法的能力。
那么,对于JavaScript面向对象编程又是怎么一回事呢?实际上跟C++、JAVA的面向对象编程是有挺大的差异,很多开发者对JavaScript如何创建类一直处于模糊状态,甚至没能理解。本文着重介绍JavaScript是如何创类对象的。
JavaScript有很多创建对象和类的方法。
1、 最原始的方式,先创建对象,再赋予属性和方法。
var cat =new Object(); cat.color=”黑”; cat.age=3; cat.eat=function(){ alert(“捉老鼠!”); } | 这个方式创建对象,存在的问题是如果需要创建多个对象,操作起来就非常繁琐了,没次都要设置属性和赋值。于是有下面的方式。 |
2、 工厂方法:返回特定类型的对象,实际上就是一个返回对象的方法。
function createCat(){ var cat =new Object(); cat.color=”黑”; cat.age=3; cat.eat=function(){ alert(“捉老鼠!”); } return cat; } var cat1 =createCat(); var cat2 =createCat(); | 将例子1中的代码包在一个方法中,添加一个return语句返回这个对象。调用这个函数即创建了这个对象。 PS:例子2中的属性值是设定死的,为了达到更好的效果可以这样做,让方法带上参数: function createCat(color,age){…} var cat1 = createCat(“白”,2); var cat2 = createCat(“黑”,1); |
有时候,对象中的某个方法可能在其他的域也需要用到,但是这个方法又是这个对象里面需要有的方法,这样该怎么做呢?先看事例代码: function eat(){ alert(“捉老鼠!”); } function createCat(color,age){ var cat =new Object(); cat.color=color; cat.age=age; cat.eat= eat; //这里只给方法名,不带货号 return cat; } var cat= createCat(“黑”,2); cat.eat(); //输出 “捉老鼠” 由此可见,对象内的方法可以是外部方法,只不过这个外部的方法不太像是对象的方法。 |
3、 构造函数方式创建类。类似JAVA的构造函数了。
function Cat(color,age){ this.color = color; this.age=age; this.eat = function(){ alert(“捉老鼠”); } } var cat = new Cat(“白”,2); | 使用this关键字来代替类对象,当使用new时,会先创建一个只有this能访问的对象,这个对象直接赋予this属性,默认情况下,是构造函数返回的值,不必明确使用return运算符。 |
跟工厂方法相似,构造函数会重复生产函数,为每个对象都创建独立的函数版本。也可以用外部函数重写构造函数,这么做语义上无任何意义,下面的原型方式解决这个问题。
4、 原型方式。利用了对象的
prototype 属性,可以把它看成创建新对象所依赖的原型。
首先用空构造函数来设置类名。然后所有的属性和方法都被直接赋予 prototype 属性。
function Cat(){ } Cat. prototype.color = “白”; Cat. prototype.age=2; Cat. prototype.eat=function(){alert(“捉老鼠”);} var cat = new Cat(); | 首先定义构造函数(Cat),无任何代码。通过给 Cat 的 prototype 属性添加属性去定义 Cat 对象的属性。调用 new Car() 时,原型的所有属性都被立即赋予要创建的对象,意味着所有 Cat 实例存放的都是指向 eat() 函数的指针。从语义上讲,所有属性看起来都属于一个对象,因此解决了前面两种方式存在的问题。 |
5、 混合构造函数和原型方式。联合使用构造函数和原型方式。它的概念很简单,用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。结果是,所有函数都只创建一次,而每个对象都具有自己的对象属性实例。
function Cat(color,age){ this.color = color; this.age = age; } Cat.prototype.eat=function(){alert(“捉老鼠”);}; var cat = new Cat(“黑”,1); cat.eat(); //输出 捉老鼠 | 这就更像是一般对象了。据说这是JavaScript主要的创建类和对象的方式。 |
6、 动态原型方法。
我们平常都习惯使用JAVA,也对JAVA创建类方式根深蒂固,难免会对上面这种创建方式感觉别扭,这个动态原型方法就显得更友好自然了。
function Cat(color,age) { this.color = color; this.doors = age; if (typeof Cat._initialized == "undefined") { Cat.prototype.eat = function() { alert(“捉老鼠!”); }; Cat._initialized = true; } } | 该方法使用标志(_initialized)来判断是否已给原型赋予了任何方法。该方法只创建并赋值一次,这段代码看起来更像其他语言中的类定义了。 |
7、 混合工厂方法。目的是创建假构造函数,只返回另一种对象的新实例。
function Cat() { var tempcat = new Object; tempCat.color = "黑"; tCat.age = 25; tempCat.eat = function() { alert(“捉老鼠”); }; return tempCat; } var cat = new Cat(); | 与经典方式不同,这种方式使用 new 运算符,使它看起来像真正的构造函数。 |
综上所述,目前使用最广泛的是第5种混合构造函数和原型方式。没有固定说只用哪一种方式,开发者可以根据自己的习惯,去熟练运用一种就行。掌握了JavaScript的面向对象技术,在日后使用JavaScript的时候会更加游刃有余了。
相关文章推荐
- JS 跨域理解
- JS处理特殊字符
- Extjs关于FormPanel布局
- Extjs 前台分页(假分页)
- Extjs 等待提示的几种方式
- JS 从URL获取参数方法
- JS创建类和对象
- JS操作JSON方法总结(推荐)
- JS判断各种浏览器
- Understanding JavaScript OOP—prototypical inheritance on awesomeness!
- JSTL fmt:formatDate 的输出时间日期格式
- JS控制,返回上一页之后强行刷新一次
- JavaScript Promise 用法
- JSP中文问题解决方案
- 引用 jsp注销登陆的代码
- JSON
- Javascript基础_简单比较undefined和null 值
- JSP留言板模块
- js post
- 2016.06.14廖雪峰JS__学习笔记(对象部分)__P5