JavaScript设计模式:面向对象

面向对象设计模式

面向对象设计模式十分有利于工程化开发,一个项目共同开发者人数越多,越需要用对象来维护开发者各自的变量(函数也是一种变量)。相反,用面向过程的方式,遇到一个功能点就写一个全局函数,到最后一定会相互污染,无法察觉变量覆盖重写、不容易维护代码。

用对象来收编

既然已经学过了JS中的原型、基于原型的继承,我们可以用面向对象的思想来作工程化处理。
最简单的例子,我们制作一个构造函数,然后在他的原型链上添加方法。

var CheckObj = funtion() {};
CheckObj.prototype = {
	checkName : function(){
		//验证姓名
	},
	checkEmail : function(){
		//验证邮箱
	},
	checkPwd : function(){
		//验证密码
	},
}

使用的时候用new创建CheckObj对象,然后用点语法使用其中的方法就可以了。

var a = new CheckObj();
a.checkName();

面向对象思想:封装

面向对象中最为人所知的两个特点是封装继承,我们要实现面向对象中的私有/公有属性,私有/公有变量,但ES5中还没有class的概念,但是我们能够用原型和函数作用域的特性来实现。

  1. 声明在函数内部的变量以及方法外界是访问不到的,利用此特性创建类的私有变量私有方法
  2. 在函数内部通过this创建的属性和方法,在类创建对象时每个对象自身都拥有一份并且可以在外部访问到,以此来创建公有变量公有属性
  3. 在类外面通过点语法定义的属性以及方法被称为静态共有属性静态共有方法,创建对象的时候无法获取到他们,但可以通过类本身来使用。
var Book = function(){}
Book.isChinese = true
  1. 在类外面,通过prototype创建的属性或方法,在实例对象中可以访问得到,称为共有属性共有方法

类创建实例:

var Book = function(id,name,price){
	//私有属性
	var num = 1;
	//私有方法
	function checkId{};
	//特权方法
	this.getName = function(){};
	this.getPrice = function(){};
	this.setName = function(){};
	this.setPrice = function(){};
	//对象公有属性
	this.id = id;
	//公有方法
	this.copy = function(){};
	//构造器
	this.setName(name);
	this.setPrice(price);
}

我们有时候也用闭包来实现,定义在闭包(返回的函数)内的有私有变量和方法、公有属性和方法、getter和setter还有构造器。可以在立即执行函数外面用prototype定义静态公有属性和方法,也可以写在函数里面构建一个完整的类,然后把类返回出来。这里就不写实例代码了。

面向对象思想:继承

ES5最完美的继承方式是寄生组合式继承:
具体设计思路可以看我博客:手写JS继承

function inheritPrototype(subType, superType){
// 创建对象,创建父类原型的一个副本
  var prototype = Object.create(superType.prototype); 
// 增强对象,弥补因重写子类原型而失去的默认的constructor属性
  prototype.constructor = subType;    
// 指定对象,将新创建的对象赋值给子类的原型                
  subType.prototype = prototype;                      
}

面向对象思想:多继承和多态

  • 我们知道继承依赖于原型链,原型链又只有一条,JavaScript是如何实现多继承的呢?

    通过拷贝,我们可以继承对多个对象的属性,来模拟多继承。拷贝有深拷贝和浅拷贝,他们的区别就是能否复制引用类型的属性,具体可以看看我的博客手写JS拷贝

    可以实现一个对象属性的复制继承,就可以传递多个对象来模拟多继承了。

  • 多态在JS里面指的是同一个方法的多种调用方式,而在其他面向对象语言中,接口的多种不同的实现方式即为多态。这是标准定义,在c++中实现多态的方式有虚函数、抽象类、模板,在java中更粗暴,所有函数都是“虚”的,子类都可以重写。

    我们可以用switch语句或者条件语句、根据传入参数的多样性,来实现方法的不同返回结果,模拟多态。

你可能感兴趣的:(JavaScript)