详解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 - HTML的request类
Jul 15 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
微信小程序实现分享商品海报功能
Sep 30 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安全技术之 实现php基本安全
2010/09/04 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
python实现用户登录系统
2016/05/21 Python
Python 专题一 函数的基础知识
2017/03/16 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
python实现简单日期工具类
2019/04/24 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
python中pivot()函数基础知识点
2021/01/03 Python
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
领导干部廉政自律承诺书
2014/05/26 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
教师考核评语大全
2014/12/31 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis