Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇

Javascript面向对象特性实现(封装、继承、接口)


Javascript作为弱类型语言,和Java、php等服务端脚本语言相比,拥有极强的灵活性。对于小型的web需求,在编写javascript时,可以选择面向过程的方式编程,显得高效;但在实际工作中,遇到的项目需求和框架较大的情况下,选择面向对象的方式编程显得尤其重要,Javascript原生语法中没有提供表述面向对象语言特性的关键字和语法(如extends、implement)。为了实现这些面向对象的特性,需要额外编写一些代码,如下。

在开始使用OO特性之前,还需要考虑使用接口、继承所带来的弊端。封装、接口、继承都将使代码结构变得复杂,对于编码新手有较高的要求,对于别人接受你的项目成本也提高了,在团队协作中需要根据具体需求斟酌,不要为了秀技术而写代码;同时,封装和接口都将带来一些额外的内存开销,有些可以忽略不计,有些
则是得不偿失,需要注意。

一、封装


var book = (function(){
var COUNT = 0;

//静态私有方法
function checkISBN(isbn){
return true;
}
//构造器
var ctor = function(id,name,isbn){
var _id,_name,_isbn
this.setId= function(id){
_id=id;
}
this.getId = function(){
return _id;
}
this.setName = function(name){
_name = name;
}
this.getName = function(){
return name;
}
this.setIsbn = function(isbn){
_isbn = isbn;
}
this.getIsbn = function(){
return isbn;
}
if(checkISBN){
COUNT++;
}
this.setName(name);
this.setId(id);
this.setIsbn(isbn);
}
ctor.getCount = function(){
return COUNT;
}
return ctor;
})();
//静态、共用方法
book.buyCount = function(count){
return count;
}

book.prototype = {
display:function(){
}
}
var b = new book();
b.getCount();
b.display();

二、接口


/**
* 接口:实现多个类的共同性。让彼此不想关的对象也能被同等对待。
*/

var Interface = function(name,method){
if(arguments.length < 2){
throw new Error("xxx");
}
this.name = name;
this.method = [];
for(var i = 0;i<method.length;i++){
if(typeof method[i] !== ‘string‘){
throw new Error("xxx");
}
this.method.push(method[i]);
}
}
//public static method
Interface.ensureImplement = function(object){
for(var i = 0;i<arguments.length;i++){
var interface = arguments[i];
if(Interface.construction !== Interface){
throw new Error("xxx");
}
for(var j = 0;j<ingerface.method.length;j++){
var method = interface.method[j];
if(!object[method] || typeof object[method] !===‘function‘){
throw new Error("xxx");
}
}
}
}

var testResultInstance = new Interface("testResultInstance",["getData","getResults"]);
function testInterface = function(mapInstance){
Interface.ensureImplement(mapInstance,testResultInstance);
mapInstance.getData();
mapInstance.getResults();
}
function Map(name){
this.name = name;
this.getData = function(){};
this.getResults = function(){};
}
var mapInstance = new Map("test");
testInterface(mapInstance);

三、继承


/**
* 继承提供一些代码复用的功能。但继承照成两个类间的强耦合
*/
//类式继承
function Person(name){
this.name = name;

}
function Design(name,book){
Person.call(this,name);
this.book = book;
}
extend(Person,Desion);
Design.prototype.getBooks = function(){
return this.book;
}
var d = new Design("tim","test");
d.getBooks();
d.name;

function extend(superclass,subclass){
var F = function(){};
F.prototype = superclass.prototype;
subclass.prototype = new F();
subclass.prototype.constructor = subclass

subclass.superclass = superclass;
if(superclass.prototype.constructor == Object.prototype.constructor){
superclass.prototype.constructor = superclass;
}
}
/********************************************************************/
//原型继承
function clone(superclass){
var F = function(){};
F.prototype = superclass;
return new F();
}
var Person = {
name:"default",
getName : function(){
return this.name;
}
};
var Desion = clone(Person);
Desion.books = ["写给大家看的设计书"];
Desion.getBooks = function(){
return this.books;
}
/********************************************************************/
//参元法
var Mimin = function(){};
Mimin.prototype = {
name : ‘default‘,
getName : function(){
return this.name;
}
};
function augment(receiveingClass,givingClass){
for(methodName in givingClass){
if(!receiveingClass[methodName]){
receiveingClass[methodName] = methodName;
}
}
}

Javascript面向对象实现分页


<script type="text/javascript">
function Map() {
this.keys = new Array();
this.data = new Array();
//添加键值对
this.set = function (key, value) {
if (this.data[key] == null) {//如键不存在则身【键】数组添加键名
this.keys.push(key);
}
this.data[key] = value; //给键赋值
};
//获取键对应的值
this.get = function (key) {
return this.data[key];
};
//去除键值,(去除键数据中的键名及对应的值)
this.remove = function (key) {
this.keys.remove(key);
this.data[key] = null;
};
//判断键值元素是否为空
this.isEmpty = function () {
return this.keys.length == 0;
};
//获取键值元素大小
this.size = function () {
return this.keys.length;
};
}

function dataGrid(obj) {
if (obj == null) {
return alert("请填入参数");
}
this.dataArray = new Map();
this.index = 0;
this.data = obj.data != null ? obj.data : "";
this.maxPage = 0;
this.pageNumber = 1;
this.pageSize = obj.pageSize != null ? obj.pageSize : 10;
this.pageToal = 0;
this.dataGrid = new Array();
}

dataGrid.prototype.getDataGrid = function (index) {
this.dataGrid.splice(0, dataGrid.length);
var page = index * this.pageSize + this.pageSize;
if (this.pageToal - page > this.pageSize) {
page = page;
} else if (this.pageToal - page < this.pageSize && this.pageToal - page > 0) {
page = index * this.pageSize + (this.pageToal - page);
} else {
page = index * this.pageSize + this.pageToal;
}
for (var i = index * this.pageSize; i < page; i++) {
this.dataGrid[this.dataArray.keys[i]] = this.dataArray.data[this.dataArray.keys[i]];
}
}

dataGrid.prototype.packageing = function (obj) {
var data = obj ? obj : this.data;
for (var items in data) {
this.dataArray.set(items, data[items]);
this.pageToal++;
}
this.maxPage = Math.ceil(this.pageToal / this.pageSize);
this.getDataGrid(this.index);
}
dataGrid.prototype.load = function () {
this.packageing();
return this.dataGrid;
}

dataGrid.prototype.goit = function (index) {
if (index * this.pageSize > this.pageToal) {
return;
} else {
this.getDataGrid(index - 1);
}
return this.dataGrid;

}
</script>

Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇,布布扣,bubuko.com

时间: 2024-12-23 06:23:15

Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇的相关文章

Python 入门 之 面向对象的三大特性(封装 / 继承 / 多态)

Python 入门 之 面向对象的三大特性(封装 / 继承 / 多态) 1.面向对象的三大特性: (1)继承 ? 继承是一种创建新类的方式,在Python中,新建的类可以继承一个或多个父类,父类又可以称为基类或超类,新建的类称为派生类或子类. ? 在Python中实现继承非常简单,在声明类的时候,在类名后面添加一个小括号,就可以完成继承关系.单纯的从代码的层面上来看当两个类具有相同的功能或者特征的时候就可以使用继承.提取一个父类,这个父类中编写者两个类相同的部分,然后两个类分别去继承这个类就可以

Mysql数据库大量删除操作及谈面向对象中的封装继承和多态原理(图)

Mysql数据库大量删除操作及谈面向对象中的封装继承和多态原理(图)最近进行数据库操作,遇到一个问题,就是大量删除一个数据表中的数据后,由于设定了id是自增的,导致再插入时,默认生成的id会很大,这个时候想要再次插入新的数据,应该怎么办呢?1.明确目前最后一个id的大小select id from tags order by id DESC limit 0,1; 假设返回的是9,则设置数据表从10开始自增 2.修改这个数据表从10开始自增alter table tags auto_increme

类与对象 面向对象和面向过程对比 面向对象三大特征:封装 继承 多态

 初识面向对象 面向过程: 一切以事务的发展流程为中心. 面向对象: 一切以对象为中心. 一切皆为对象. 具体的某一个事务就是对象 打比方: 大象进冰箱 步骤: 第一步, 开门, 第二步, 装大象, 第三步, 关门 面向对象:大象, 你进冰箱. 此时主语是大象. 我操纵的是大象. 此时的大象就是对象 1. 面向过程: 一切以事物的流程为核心. 核心是"过程"二字, 过程是指解决问题的步骤, 即, 先?干什么, 后干什么. 基于该思想编写程序就好比在编写一套流水线. 是一种机械 式的编程

三大特性:封装,继承,多态

透切理解面向对象三大基本特性是理解面向对象五大基本原则的基础. 三大特性是:封装,继承,多态 所谓封装: 也就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏.封装是面向对象的特征之一,是对象和类概念的主要特性. 简单的说,一个类就是一个封装了数据以及操作这些数据的代码的逻辑实体.在一个对象内部,某些代码或某些数据可以是私有的,不能被外界访问.通过这种方式,对象对内部数据提供了不同级别的保护,以防止程序中无关的部分意外的改变或错误的使用了对

javascript面向对象系列3——实现继承的6种方式

[前面的话]许多OO语言都支持两种继承方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法,由于函数没有签名,在ECMAScript中无法实现接口继承,ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 [1][原型链继承]实现的本质是重写原型对象,代之以一个新类型的实例.实际上不是SubType的原型的constructor属性被重写了,而是SubType的原型指向了另一个对象——SuperType的原型,而这个原型对象的construtor属性

javascript面向对象(一):封装

本文来自阮一峰 学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学习笔记,希望对大家学习这个部分有所帮助.我主要参考了以下两本书籍: <面向对象的Javascript>(Object-Oriented JavaScript) <Javascript高级程序设计(第二版)>(Professional JavaScript for Web Develop

Javascript 面向对象编程:封装

学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. ============================ Javascript 面向对象编程(一):封装 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果我们要把"属性"

面向对象的三大特性(封装 继承 多态)

一丶封装 1 权限修饰符      可以用来修饰成员变量和成员方法,对于类的权限修饰只可以用public和缺省default.           被public修饰的类可以在任意地方被访问:default类只可以被同一个包内部的类访问.      权限由大到小:public protected default(不写) private           被private修饰的成员只能在本类中访问,外界不能访问 2 set()/get()方法  (1)this关键字    a.可以用来调用变量,

JavaScript面向对象轻松入门之继承(demo by ES5、ES6)

继承是面向对象很重要的一个概念,分为接口继承和实现继承,接口继承即为继承某个对象的方法,实现继承即为继承某个对象的属性.JavvaScript通过原型链来实现接口继承.call()或apply()来实现实现继承. 接口继承的实现在ES5中是比较麻烦,在其它OOP语言中一个extends关键字就可以实现,但在ES5中要通过原型链去模拟,非常难理解,对初学者很不友好,并且有好几种接口继承的方式.本文为了对初学者更友好,并不打算让读者了解接口继承的原理,而是直接把接口继承实现方法封装成一个函数,大家只