JavaScript设计模式:一、面向对象编程(第二节)

一、封装

面向对象编程思想其中的一个特点就是封装,通俗的讲法就是把需要的功能方向在一个对象里。遗憾的是,对于JS这种解释性的弱类型语言没有经典强类型语言中那样通过class等关键字实现类的封装方法,js中都是通过一些特性模仿实现的,虽然这是个弊端,但也带来了极高的灵活性。

我们看一个Book类是如何通过JS实现的:

 1 // 写法1
 2 var Book = function (id, name, pirce) {
 3   this.id = id
 4   this.name = name
 5   this.price = pirce
 6 }
 7
 8 /*
 9 * 以下两种方式不可混用
10 */
11
12 // 也可以通过在类的原型对象prototype上添加属性和方法,有两种方式
13 // 一种是一一为原型对象属性赋值
14 Book.prototype.display = function () {
15   // ...
16 }
17
18 // 一种是将一个对象赋值给类的原型对象
19 Book.prototype = {
20   display: function () {
21     // ...
22   }
23 }

这样,我们就将所需要的方法和属性都封装在我们抽象的Book类里面,当使用功能方法时,我们不能直接使用Book类,需要用new关键字来实例化新的对象,并通过点语法来访问对象的属性或者方法。比如:

1 var book = new Book(10, ‘书‘, ‘50‘)
2 console.log(book.name)  // 书

从代码可以看出,我们通过this添加了属性,通过prototype添加了方法,那么这两者有什么区别?

通过this添加的属性和方法是在当前对象上添加的,然而JS是一种基于原型的prototype的语言,所以每次创建一个新对象时,通过prototype继承的方法并不是对象自身的,所以在使用这些方法时,需要通过prototype一级一级查找的来,而通过this定义的属性或者方法是该对象自身所拥有的,所以我们每次创建一个新对象时,this指向的属性和方法都会得到相应的创建。

二、属性与方法封装

在OOP中,既然是类,必定有私有属性,私有方法,共有属性,共有方法等这些概念,那么JS中又是如何去实现呢?

由于JS的函数作用于,声明在函数内部的变量以及方法在外界是访问不到的,通过次特性可以创建类的私有变量以及私有方法,然而在函数内部通过this创建的属性和方法,在类创建对象时,每个对象自身都拥有一份并且可以在外部访问到,因此这些属性和方法可以看作为共有的,还是Book为例:

 1 // 私有属性与私有方法,特权方法,对象共有属性和对象公有方法
 2 var Book = function (id, name, price) {
 3   // 私有属性
 4   var num = 1
 5   // 私有方法
 6   function checkId () {
 7     // ...
 8   }
 9   // 特权方法
10   // 所谓的特权方法,是既可以被外部访问到,又可以访问类内部的私有属性与方法的方法
11   this.getName = function () {
12     // ...
13   }
14   this.getPrice = function () {
15     // ...
16   }
17   this.setName = function () {
18     // ...
19   }
20   this.setPrice = function () {
21     // ...
22   }
23   // 对象公有属性
24   this.id = id
25   // 对象公有方法
26   this.copy = function () {
27     // ...
28   }
29
30 }

而在OOP中,还有两个概念是:静态属性与静态方法,这两种东西都属于类所有,而不属于每一个对象,调用也只能通过类名加上点语法来使用,那么JS中如何实现呢?

其实很简单,我们可以在类定义的外面,通过点语法定义属性以及方法,这样,通过new关键字创建时,这写在类外面通过点语法添加的属性和方法是不会被执行到的,因而只能被类本身所调用,我们也就达到了模仿静态属性与方法的目的。

1 // 类静态公有属性(对象不能访问)
2 Book.isChinese = true
3 // 类静态公有方法(对象不能访问)
4 Book.getIsChinese = function () {
5   return Book.isChinese
6 }
时间: 2024-11-03 03:27:18

JavaScript设计模式:一、面向对象编程(第二节)的相关文章

javaScript设计模式之面向对象编程(object-oriented programming,OOP)(一)

面试的时候,总会被问到,你对javascript面向对象的理解? 面向对象编程(object-oriented programming,OOP)是一种程序设计范型.它讲对象作为程序的设计基本单元,讲程序和数据封装其中,以提高程序的重用性.灵活性和扩展性. 一.举个例子 有这么一个需求:做一个验证表单功能,仅需要验证用户名,邮箱,密码等 觉得在项目产品开发中,自己是这么写的 function checkName(){ //验证姓名 } function checkEmail(){ //验证邮箱 }

javaScript设计模式之面向对象编程(object-oriented programming,OOP)--寄生组合式继承

组合式继承:将类式继承同构造函数继承组合使用,但是存在一个问题,子类不是父类的实例,而子类的原型式父类的实例,所以才有了寄生组合式继承. 意思就是说,寄生就是寄生式继承,寄生式继承就是依托于原型继承,原型继承又与类式继承差不多,所以另外一种继承模式应该是构造函数继承.当然子类不是父类的实例的问题是由于类式继承引起的. 说道这,我不得不说一下,道格拉斯大哥对寄生式继承的改造 function inheritPrototype(subClass,superClass){ //复制一份父类的原型副本保

《Java面向对象编程第二版》今年出版以来获得读者一致好评。

<Java面向对象编程第一版>自2016年出版以来,承蒙读者们的厚爱,至今已经重印了二十多次,成为国内Java领域里的经典Java技术宝典.在当当网上获得了1500多条好评: http://product.dangdang.com/9186890.html?point=comment_point 应广大读者的要求,为第一版进行了升级,第二版融合了最新的Java8的语言特性,它继续为Java开发人员们提供丰富全面的技术支持和帮助.在京东网上读者们对第二版的好评如潮,一致认为这是Java开发人员必

《Java面向对象编程第二版》即将出版

<Java面向对象编程第一版>自2016年出版以来,承蒙读者们的厚爱,至今已经重印了二十多次,成为国内Java领域里的经典Java技术宝典.应广大读者的要求,在过去的几个月,为第一版进行了升级,第二版融合了最新的Java8的语言特性,希望它能继续为Java开发人员们提供丰富全面的技术支持和帮助. 本书技术支持网址为:www.javathinker.net

深入理解javascript中实现面向对象编程方法

介绍Javascript中面向对象编程思想之前,需要对以下几个概念有了解: 1. 浅拷贝和深拷贝:程序在运行过程中使用的变量有在栈上的变量和在堆上的变量,在对象或者变量的赋值操作过程中,大多数情况先是复制栈上的信息,这样就会出现以下情况,如果变量是对象,那么这一操作,复制的只是真正对象所在 的堆内存空间的起始地址,这就是所谓的浅拷贝,如果是深拷贝,则是在内存堆空间中重新分配一个内存,并把分配的内存的起始地址复制过去. 2. 引用类型数据和值类型数据:谈到引用类型数据和值类型数据,自然而然的联想到

JavaScript中的面向对象编程,详解原型对象及prototype,constructor,proto,内含面向对象编程详细案例(烟花案例)

面向对象编程: 面向:以什么为主,基于什么模式 对象:由键值对组成,可以用来描述事物,存储数据的一种数据格式 编程:使用代码解决需求 面向过程编程: 按照我们分析好的步骤,按步骤解决问题 优点:性能比面向对象高,适合跟硬件联系很紧密的东西 缺点:没有面向对象那么容易维护,复用,扩展 面向对象编程: 把事务分解成一个个对象,然后由对象之间分工与合作,分工明确,每一个对象都是功能中心 面向对象特性:封装性.继承性 .多态性 封装性:将一个功能封装起来,小封装 将多个函数封装起来,整体封装起来形成一个

js 设计模式 oop 面向对象编程

最初我们写js代码的时候是这么写 function checkName(){ //验证姓名 } function checkEmail(){ //验证邮箱 } function checkPassword(){ //验证密码 } 这种方式会造成全局变量的严重污染,再过渡到 var checkObject = { checkName : function(){}; checkEmail: function(){}; checkPassword: funcion(){}; } //也可如此写 var

JavaScript 中的面向对象编程

使用JSON 来定义一个对象: <script type="text/javascript">var xiaoming = { name : 'xiaoming', age : 18, say : function(){ console.log('my name is '+this.name); }}xiaoming.say();xiaoming.name = 'li xiao ming';xiaoming.say();</script>  

JAVAscript学习笔记 js异常 第二节 (原创) 参考js使用表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异常处理</title> <script> function demo() { try { alert(str);//str为空 }catch(err){ alert(err); } } demo(); function demo1(){ var

JavaScript高级程序设计: 面向对象编程

工厂模式 工厂模式虽然解决了创建多个相似对象的问题,但没有解决对象识别问题. function createPerson( name , age , job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ console.log( this.name ); } return o; } var person1 = createPerson('Alice',23,'PHP