详解JS面向对象编程


Posted in Javascript onJanuary 24, 2016

因为JavaScript是基于原型(prototype)的,没有类的概念(ES6有了,这个暂且不谈),我们能接触到的都是对象,真正做到了一切皆为对象

所以我们再说对象就有些模糊了,很多同学会搞混类型的对象和对象本身这个概念,我们在接下来的术语中不提对象,我们使用和Java类似的方式,方便理解

方式一

类(函数模拟)

function Person(name,id){
 //实例变量可以被继承
 this.name = name;
 //私有变量无法被继承
 var id = id;
 //私有函数无法被继承
 function speak(){
  alert("person1");
 }
}
//静态变量,无法被继承
Person.age = 18;
//公有函数可以被继承
Person.prototype.say = function(){
 alert("person2");
}

继承,并调用父类方法

function Person(name,id){
 //实例变量可以被继承
 this.name = name;
 //私有变量无法被继承
 var id = id;
 //私有函数无法被继承
 function speak(){
  alert("person1");
 }
}
//静态变量,无法被继承
Person.age = 18;
//公有静态成员可被继承
Person.prototype.sex = "男";
//公有静态函数可以被继承
Person.prototype.say = function(){
 alert("person2");
}
//创建子类
function Student(){
}
//继承person
Student.prototype = new Person("iwen",1);
//修改因继承导致的constructor变化
Student.prototype.constructor = Student;
var s = new Student();
alert(s.name);//iwen
alert(s instanceof Person);//true
s.say();//person2

继承,复写父类方法且实现super()

function Person(name,id){
 //实例变量可以被继承
 this.name = name;
 //私有变量无法被继承
 var id = id;
 //私有函数无法被继承
 function speak(){
  alert("person1");
 }
}
//静态变量,无法被继承
Person.age = 18;
//公有静态成员可被继承
Person.prototype.sex = "男";
//公有静态函数可以被继承
Person.prototype.say = function(){
 alert("person2");
}
//创建子类
function Student(){
}
//继承person
Student.prototype = new Person("iwen",1);
//修改因继承导致的constructor变化
Student.prototype.constructor = Student;
//保存父类的引用
var superPerson = Student.prototype.say;
//复写父类的方法
Student.prototype.say = function(){
 //调用父类的方法
 superPerson.call(this);
 alert("Student");
}
//创建实例测试
var s = new Student();
alert(s instanceof Person);//true
s.say();//person2 student

继承的封装函数

function extend(Child, Parent) {


var F = function(){};


F.prototype = Parent.prototype;


Child.prototype = new F();


Child.prototype.constructor = Child;


Child.uber = Parent.prototype;

}

uber意思是为子对象设一个uber属性,这个属性直接指向父对象的prototype属性。(uber是一个德语词,意思是”向上”、”上一层”。)这等于在子对象上打开一条通道,可以直接调用父对象的方法。这一行放在这里,只是为了实现继承的完备性,纯属备用性质。

方式二

相当于拷贝,通过定义的_this对象来承载想要被继承的对象,这样的话通过传递_this就可以实现继承,比上面那种好理解些

//创建父类
function Person(name,id){
 //创建一个对象来承载父类所有公有东西
 //也就是说_this承载的对象才会被传递给子类
 var _this = {};
 _this.name = name;
 //这样的是不会传递下去的
 this.id = id;
 //承载方法
 _this.say = function(){
  alert("Person");
 }
 //返回_this对象
 return _this;
}
//子类
function Student(){
 //获取person的_this对象,从而模仿继承
 var _this = Person("iwne",1);
 //保存父类的_this引用
 var superPerson = _this.say;
 //复写父类的方法
 _this.say = function(){
  //执行父类的say
  superPerson.call(_this);
  alert("Student");
 }
 return _this;
}
var s = new Student();
s.say();

希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
脚本合并提升javascript性能示例
Feb 24 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
javascript常用的方法分享
Jul 01 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
js中实现字符串和数组的相互转化详解
Jan 24 #Javascript
JavaScript基础知识之方法汇总结
Jan 24 #Javascript
Javascript实现单例模式
Jan 24 #Javascript
原生JavaScript实现滚动条效果
Mar 24 #Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 #Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 #Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 #Javascript
You might like
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
FCK调用方法..
2006/12/21 Javascript
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
python2.7的编码问题与解决方法
2016/10/04 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
python Tensor和Array对比分析
2020/01/08 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Python常用数据分析模块原理解析
2020/07/20 Python
工作表现自我评价
2014/02/08 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
公司经理任命书
2014/06/05 职场文书
党员民主评议总结
2014/10/20 职场文书
初中优秀学生评语
2014/12/29 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
Python自然语言处理之切分算法详解
2021/04/25 Python
详解Python魔法方法之描述符类
2021/05/26 Python
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python