详解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 相关文章推荐
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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
PHP5/ZendEngine2的改进
2006/10/09 PHP
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
朴素贝叶斯算法的python实现方法
2014/11/18 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
python用户管理系统的实例讲解
2017/12/23 Python
破解安装Pycharm的方法
2018/10/19 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
学习python需要有编程基础吗
2020/06/02 Python
python接入支付宝的实例操作
2020/07/20 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
计算机学生的自我评价分享
2014/02/18 职场文书
庆国庆活动总结
2014/08/28 职场文书
组工干部演讲稿
2014/09/02 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
优秀教师推荐材料
2014/12/16 职场文书
个人汇报材料范文
2014/12/30 职场文书
颐和园英文导游词
2015/01/30 职场文书
参观邀请函范文
2015/02/02 职场文书
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python