详解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的一个浮动框(扩展性比较好 )
Aug 27 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
JsRender实用入门教程
Oct 31 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
layer iframe 设置关闭按钮的方法
Sep 12 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 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
PHP4之COOKIE支持详解
2006/10/09 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
socket + select 完成伪并发操作的实例
2017/08/15 Python
Python骚操作之动态定义函数
2019/03/26 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
pytorch进行上采样的种类实例
2020/02/18 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
美的官方商城:Midea
2016/09/14 全球购物
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
文明风采获奖感言
2014/02/18 职场文书
大学生就业策划书范文
2014/04/04 职场文书
租车协议书范本2014
2014/11/17 职场文书
2014年政协工作总结
2014/12/09 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
环保建议书作文400字
2015/09/14 职场文书
教师反邪教心得体会
2016/01/15 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL