详解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 相关文章推荐
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
jquery.cookie.js使用指南
Jan 05 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
JavaScript基本语法_动力节点Java学院整理
Jun 26 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 Javascript
vue中路由跳转不计入history的操作
Sep 21 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 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获得当前的脚本网址
2007/12/10 PHP
使用PHP获取网络文件的实现代码
2010/01/01 PHP
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
Python中datetime常用时间处理方法
2015/06/15 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
python实现扫雷游戏的示例
2020/10/20 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
英语专业学生的自我评价
2013/12/30 职场文书
餐饮部总监岗位职责范文
2014/02/13 职场文书
应届生自荐信范文
2014/02/21 职场文书
婚前财产公证书
2014/04/10 职场文书
排查整治工作方案
2014/06/09 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
质量整改通知单
2015/04/21 职场文书
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android