详解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 相关文章推荐
【消息提示组件】,兼容IE6/7&&FF2
Sep 04 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 Javascript
JavaScript 实现页面滚动动画
Apr 24 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.MVC的模板标签系统(四)
2006/09/05 PHP
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
微信支付开发交易通知实例
2016/07/12 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
如何进行Linux分区优化
2016/09/13 面试题
元宵晚会主持词
2014/03/25 职场文书
年会邀请函范文
2015/01/30 职场文书
事业单位个人总结
2015/02/12 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
mysql的数据压缩性能对比详情
2021/11/07 MySQL
Java 异步任务计算FutureTask
2022/04/28 Java/Android
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js