javascript 是一门很灵活的语言,也是一门有缺陷的语言.
比如我们今天要谈的,如何用面向对象的手法来封装javascript ,javascript是没有类的概念的.
所以今天谈到的封装,其实就是用javascript的函数来实现的.
var People{ name:'一介布衣', age:'30' };
这就是javascript中的一个对象,里面封装了2个属性.
实例化一个对象的实例 people
var people=new People(); console.log(people.name,people.age); //一介布衣,30
如果我们需要在函数里返回一个对象,如下代码:
function CreatePeople(){ return { name:'一介布衣', age:'30' }; }
在代码中需要创建一个人的时候,我们需要调用 CreatePeople 即可,但是有一个问题,就是我们得到的都是同一个人 一介布衣,30岁.看来需要我们改造一个函数.
function CreatePeople(name,age){ return { name:name, age:age } }
这看上去貌似好多了.我们实例化2个对象.
var p1=new CreatePeople('张三',19); var p2=new CreatePeople('李四',25);
我们知道javascript从object 到其他全局类都有一个prototype对象指向原型链.
但是,p1,p2 俩个对象貌似没有一点关系,虽然被同一个函数创建,但是CreatePeople 每次返回一个全新的对象,看似 p1,p2关系不大.
如果你接触过面向对象语言的编程,这时应该想到了构造函数,但是上面的 CreatePeople 函数怎么看都不是一个构造函数,我们也可以用javascript的函数来生成一个构造函数.
function CreatePeople(name,age){ this.name=name; this.age=age; }
this 和其他语言一样,也是一个指向实例的指针变量.
当用此构造函数创建对象的时候,this就指向新创建的对象,有一点需要记住,this取决调用函数作用域,而不是使用函数的作用域.
这样封装一下构造函数,生成的对象就比上面看上去顺眼多了.
2个属性指向了this实例指针,我们再来一个方法,去获取属性(也可以理解为私有变量)
function CreatePeople(name,age){ this.name=name; this.age=age; this.getName=function(){ return this.name; } }
getName 方法很简单,就是返回对象中的 name 属性值.
实例化2个对象
var p1=new CreatePeople('张三',20); var p2=new CreatePeople('李四',21); console.log(p1.getName()) //张三 console.log(p2.getName()) //李四
这时感觉封装的高大上的感觉,其实我们没有发现,CreatePeople 构造函数中的 getName 函数干的活很简单,但是每次都在实例上创建一个这样的函数确实有点浪费内存了,我们看下面的代码.
console.log(p1.getName==p2.getName); //false
返回false ,告诉我们 p1,p2 中的 getName 不是指向内存中的一个地址,我们为了节省内存,如何让CreatePeople 构建出来的对象,多有 getName 方法指向一个指针地址? 对,Object 的原型链上.
我们把这个方法定义在构造函数的原型链上,这样构造的新对象都会继承原型链上的这个方法,(具体的javascript中的继承我们单独开一篇博文来讨论)
function CreatePeople(name,age){ this.name=name; this.age=age; } CreatePeople.prototype.getName=function(){ return this.name; } var p1=new CreatePeople('张三',20); var p2=new CreatePeople('李四',21); console.log(p1.getName==p2.getName); //true
可以看到p1 和 p2 对象都继承来自 CreatePeople 原型上的 getName 方法,而且所有对象的此方法指针都指向了一个地址.
这样,我们封装的目的就达到了.
原文:http://yijiebuyi.com/blog/4af8f11507e2eeb550bbdfbe3677d4c0.html
相关推荐
Javascript面向对象特性实现(封装、继承、接口 Javascript面向对象特性实现(封装、继承、接口
本文件使用JavaScript已面向对象方式封装类来演示简单工厂模式的实现代码。以实例介绍了简单功能模式的用途,简单分析了实现的要件。mhtl文件里有实例代码的全部内容和分析简述。
面向对象有封装、继承、多态性的特性,所以具有易维护、易复用、易扩展的特点。 类的调用需要实例化,开销较大,因此性能方面较面向过程低。 6.1.1 面向过程与面向对象 6.1 面向对象概述 主讲:重庆机电职业技术大学...
本文实例讲述了JavaScript基于面向对象实现的无缝滚动轮播。分享给大家供大家参考,具体如下: 无缝轮播 面向对象 一、HTML及CSS部分同前文《原生JavaScript实现的无缝滚动功能》。 JavaScript面向对象部分如下: ...
树形控件具有独特的扩展和折叠分支的能力,能够以较小的空间显示出大量的信息,一目了然地传达出数据之间的层次关系。凡是熟悉图形用户界面的用户,都能够自如地运用树形控件。
要求: 用javascript封装一个类,实现动态构造导航菜单功能,数据格式为data.xml 要求: 1.运用面向对象的思想设计该类(如继承)。 2.实现效果参考 "示例.bmp",菜单样式整洁即可。 3.两天内完成。
ajax通用脚本是利用了面向对象的编程用javascript代码把把ajax主要的方法封装好,用的时候只要先set后get就行啦,比框架还容易用,只有一个js文件,导入来就可以用啦,里面还带了一个例子,学过编程的朋友一看就会.....
本文实例讲述了javascript面向对象三大特征之封装。分享给大家供大家参考,具体如下:封装封装(Encapsulation):就是把对象内部数据和操作细节进行隐藏。很多面向对象语言都支持封装特性,提供关键字如private来隐藏...
我们还知道,面向对象编程有三个重要的概念 - 封装、继承和多态。 但是在JavaScript的世界中,所有的这一切特性似乎都不存在。 因为JavaScript本身不是面向对象的语言,而是基于对象的语言。
JavaScript可以在一定程度上以面向对象方式进行编程,而封装是面向对象中的一个重要特性,本文就来分享阮一峰老师对JavaScript编程中实现对象封装特性的实例讲解
整理一下js面向对象中的封装和继承。 1.封装 js中封装有很多种实现方式,这里列出常用的几种。 1.1 原始模式生成对象 直接将我们的成员写入对象中,用函数返回。 缺点:很难看出是一个模式出来的实例。 代码: ...
为了说明 JavaScript 是一门彻底的面向对象的语言,首先有必要从面向对象的概念着手 , 探讨一下面向对象中的几个概念: 一切事物皆对象 对象具有封装和继承特性 对象与对象之间使用消息通信,各自存在信息隐藏 以...
本文实例讲述了JavaScript面向对象三个基本特征。分享给大家供大家参考,具体如下: 了解过面向对象的同学应该都知道,面向对象三个基本特征是:封装、继承、多态,但是对于这三个词具体可能不太了解。对于前端来讲...
本文实例讲述了JavaScript面向对象中接口实现方法。分享给大家供大家参考,具体如下: 接口是面向对象编程的基础,它是一组包含了函数型方法的数据结构,与类一样,都是编程语言中比较抽象的概念。比如生活中的接口...
本文讲述了Javascript简单实现面向对象编程继承实例代码。分享给大家供大家参考,具体如下: 面向对象的语言必须具备四个基本特征: 1.封装能力(即允许将基本数据类型的变量或函数放到一个类里,形成类的成员或方法) ...
同时,我们知道在面向对象的高级语言中,创建包含私有成员的对象是最基本的特性之一,提供属性和方法对私有成员进行访问来隐藏内部的细节。虽然JS也是面向对象的,但没有内部机制可以直接表明一个成员是公有还是私有...
但是(这里本人要苦大仇深、痛心疾首地说),“而Ajax的出现使得复杂脚本成为必需的组成部分,这就对 JavaScript 程序设计提出了新的要求,很多Ajax应用开始利用JavaScript面向对象的性质进行开发,使逻辑更加清晰。...
今天主要讨论如何在 JavaScript 脚本中实现数据的封装(encapsulation)。数据封装说的简单点就是把不希望调用者看见的内容隐藏起来。它是面向对象程序设计的三要素之首,其它两个是继承和多态,关于它们的内容在...
本篇文章通过具体实例,对Javascript的封装过程进行案例分析,有助于对其代码实现的理解与学习。下面就随小编一起来看看吧
而javascript它不是面向对象语言,它是解释性语言。 但我们同样可以使用javascript来实现继承、多态。 javascript实现类,有多种方法。 方法一:构造方法。 代码 代码如下: function coder(){ this.name = ‘小王’;...