在JavaScript中模拟类(class)及类的继承关系


Posted in Javascript onMay 20, 2016

Javascipt语法不支持"类"(class)[es6已经支持],但是有模拟类的方法。今天我主要谈谈Javascipt中模拟“类”的方法及js中继承的总结和回顾。

js中实现“类”与继承,既是重点,又是难点。很多同学可能都对js中“类”与继承都有所了解,但是深入剖析的时候,感觉力不从心、模棱两可。
我们先来总结一下js定义“类”的几种方法:

方法一:构造函数法

这个方法是比较经典的方法,我们会经常见到。生成实例的时候,使用new关键字。类的属性和方法,还可以定义在构造函数的prototype对象之上。

function Person(name,age,job){
 this.name=name;
 this.age=age;
 this.job=job;
}

Person.prototype.sayName=function(){
 alert(this.name);
}

var person1 = new Person("张三","29","web frontpage manager");
var person2 = new Person("李四","22","doctor");


person1.sayName(); //弹出"张三"
console.log(person2.name)//输出“李四”

方法二:Object.create()法

方法Object.creat()作为new操作符的替代方案是ES5之后才出来的。用这个方法,"类"就是一个对象,不是函数。

var myMammal = {
 name : 'Herb the Mammal',
 get_name : function () {
 return this.name;
 },
 says : function () {
 return this.saying || '';
 }
}

var myCat = Object.create(myMammal);
myCat.name = 'Henrietta';
myCat.saying = 'meow';
myCat.get_name = function () {
 console.log(this.says + ' ' + this.name + this.says);
}

myCat.get_name();

输出:

function () {
 return this.saying || '';
 } Henriettafunction () {
 return this.saying || '';
 }

目前,各大浏览器的最新版本(包括IE9)都部署了这个方法。如果遇到老式浏览器,可以用下面的代码自行部署。

if (!Object.create) {


Object.create = function (o) {



 function F() {}



F.prototype = o;



return new F();


};

}

方法三:极简主义法

封装

这种方法不使用this和prototype,代码部署起来非常简单。 首先,它也是用一个对象模拟"类"。在这个类里面,定义一个构造函数creatFn(),用来生成实例。

var Dog= {


creatFn: function(){



// some code here


}

};

然后,在creatFn()里面,定义一个实例对象,把这个实例对象作为返回值。

var Dog= {


creatFn: function(){



var dog= {};



dog.name = "狗狗";



dog.makeSound = function(){ alert("汪汪汪"); };



return dog;


}

};

使用的时候,调用creatFn()方法,就可以得到实例对象。

var dog1 = Dog.creatFn();

dog1.makeSound(); // 汪汪汪

这种方法的好处是,容易理解,结构清晰优雅,符合传统的"面向对象编程"的构造,因此可以方便地部署下面的特性。

继承

让一个类继承另一个类,实现起来很方便。只要在前者的creatFn()方法中,调用后者的creatFn()方法即可。 先定义一个Animal类。

var Animal = {


creatFn: function(){



var animal = {};



animal.eat= function(){ alert("吃饭饭"); };



return animal;


}

};

然后,在Dog的creatFn()方法中,调用Animal的creatFn()方法。

var Dog= {


creatFn: function(){



var dog= Animal.creatFn();



dog.name = "狗狗";



dog.makeSound = function(){ alert("汪汪汪"); };



return dog;


}

};

这样得到的Dog实例,就会同时继承Dog类和Animal类。

var dog1= Dog.creatFn();

dog1.eat(); // 吃饭饭

私有属性和私有方法

在creatFn()方法中,只要不是定义在dog对象上的方法和属性,都是私有的。

var Dog= {


creatFn: function(){



var dog= {};



var sound = "汪汪汪";



dog.makeSound = function(){ alert(sound); };



return dog;


}

};

上例的内部变量sound,外部无法读取,只有通过dog的公有方法makeSound()来读取。

var dog1 = Dog.creatFn();

alert(dog1.sound); // undefined

数据共享

有时候,我们需要所有实例对象,能够读写同一项内部数据。这个时候,只要把这个内部数据,封装在类对象的里面、creatFn()方法的外面即可。

var Dog= {


sound : "汪汪汪",


creatFn: function(){



var dog= {};



dog.makeSound = function(){ alert(Dog.sound); };



dog.changeSound = function(x){ Dog.sound = x; };



return dog;


}

};

然后,生成两个实例对象:

var dog1 = Dog.creatFn();

var dog2 = Dog.creatFn();

dog1.makeSound(); // 汪汪汪

这时,如果有一个实例对象,修改了共享的数据,另一个实例对象也会受到影响。

dog2.changeSound("呜呜呜");

dog1.makeSound(); //呜呜呜

js继承

关于继承,网上也有很多资料可以查询,但是很多朋友对其理解的不够深入。讲到继承,假如你不去查资料,猛地一下,可能说不出个所以然来。这就说明我们的基础知识打的不够扎实。没有理解透彻。今天,我站在前辈的基础之上,再来和大家一起回顾一下这个 继承。

继承最常用的两种方式如下:

  • 原型链继承(对象间的继承)
  • 类式继承(构造函数间的继承)

原型链继承

什么是原型链继承?这里我就不说什么定义了。其实就是用prototype继承父级。

举个例子:

function Parent(){
 this.name = 'mike';
} 
function Child(){
 this.age = 12;
}
Child.prototype = new Parent();//Child继承Parent,通过原型,形成链条

var test = new Child();
alert(test.age);
alert(test.name);//得到被继承的属性
//继续原型链继承
function Brother(){ //brother构造
 this.weight = 60;
}
Brother.prototype = new Child();//继续原型链继承
var brother = new Brother();
alert(brother.name);//继承了Parent和Child,弹出mike
alert(brother.age);//弹出12

上面例子,通过原型,形成链条,Child继承了Parent,Brother有继承了Child,最后brother既有Child和Parent的属性,又有自己的属性。这就是原形链的继承。

类式继承(借用构造函数)

类式继承一般是通过运用call或者apply 进行子类型构造函数的内部调用超类型的构造函数。举个例子:

function Parent(age){
 this.name = ['mike','jack','smith'];
 this.age = age;
}

function Child(age){
 Parent.call(this,age);
}
var test = new Child(21);
alert(test.age);//21
alert(test.name);//mike,jack,smith
test.name.push('bill');
alert(test.name);//mike,jack,smith,bill

上面的两种继承是最基本的两种继承方式。

此外还有一些继承方式,我们一起来看一下!

组合继承

组合继承通常是上面两种继承方式组合在一起使用的继承方式。

举例如下:

function Parent(age){
 this.name = ['mike','jack','smith'];
 this.age = age;
}
Parent.prototype.run = function () {
 return this.name + ' are both' + this.age;
};
function Child(age){
 Parent.call(this,age);//对象冒充,给超类型传参
}
Child.prototype = new Parent();//原型链继承
var test = new Child(21);//写new Parent(21)也行
alert(test.run());//mike,jack,smith are both21

原型式继承

和上面讲的原形链式继承只有一字之差,但是不是同一个内容。我们所说的原型式继承,就是我们上节课所讲的,通过Object.create()方式来创建新的类。因为这种方式老式浏览器不支持。因此,假如我们不用Object.create(),也可以有替代法,方式如下:

function obj(o){
 function F(){}
 F.prototype = o;
 return new F();
 }

这个函数,就实现了我们Object.create()创建类的方式!

因此举例如下:

function obj(o){
 function F(){}
 F.prototype = o;
 return new F();
 }
var box = {
 name : 'trigkit4',
 arr : ['brother','sister','baba']
};
var b1 = obj(box);
alert(b1.name);//trigkit4

b1.name = 'mike';
alert(b1.name);//mike

alert(b1.arr);//brother,sister,baba
b1.arr.push('parents');
alert(b1.arr);//brother,sister,baba,parents

var b2 = obj(box);
alert(b2.name);//trigkit4
alert(b2.arr);//brother,sister,baba,parents

寄生式继承

举例如下:

function creatAnother(original){
 var clone=new Object(original);
 clone.sayHi=function(){
 alert("hi")
 };
 return clone;
}
var person={
 name:"haorooms",
 friends:["hao123","zhansan","lisi"]
}

var antherPerson=creatAnother(person);
antherPerson.sayHi();//hi

寄生组合式

function inheritPrototype (subType,superType) {
 var prototype = Object.creat(superType.prototype);
 prototype.constructor = subType;
 subType.prototype = prototype;
};

function SuperType (name) {
 this.name = name;
 this.colors = ['red', 'blue', 'green'];
}
SuperType.prototype.sayName = function () {
 console.log(this.name);
}
function SubType(name, age) {
 //继承属性
 SuperType.call(this,name);
 this.age = age;
}
//继承方法
inheritPrototype(SubType,SuperType);
SubType.prototype.sayAge = function () {
 console.log(this.age);
}

var instance = new SubType();

类的继承,基本上就是如上几种方式。下面再简单的说一下ES6的class类吧!

es6实现类

//定义类
class Point {
 constructor(x, y) {
 this.x = x;
 this.y = y;
 }
 toString() {
 return '('+this.x+', '+this.y+')';
 }
}
var point = new Point(2, 3);
point.toString() // (2, 3)
point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true

Class的继承

class ColorPoint extends Point {
 constructor(x, y, color) {
 super(x, y); // 调用父类的constructor(x, y)
 this.color = color;
 } 
 toString() {
 return this.color + ' ' + super.toString(); // 调用父类的toString()
 }
}
Javascript 相关文章推荐
javascript 精粹笔记
May 09 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
原生js实现轮播图特效
May 04 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 #Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 #Javascript
如何用JavaScript实现动态修改CSS样式表
May 20 #Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 #Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 #Javascript
详解JavaScript中的事件流和事件处理程序
May 20 #Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 #Javascript
You might like
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
TypeScript入门-接口
2017/03/30 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
用Python进行TCP网络编程的教程
2015/04/29 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
python分布式环境下的限流器的示例
2017/10/26 Python
Python函数和模块的使用总结
2019/05/20 Python
Python测试模块doctest使用解析
2019/08/10 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
学校花圃的标语
2014/06/18 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
公司地址变更通知
2015/04/25 职场文书
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server