详解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 DOM模型操作
Dec 28 Javascript
javascript Array.prototype.slice使用说明
Oct 11 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
JavaScript中Require调用js的实例分享
Oct 27 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 Javascript
vue中destroyed方法的使用说明
Jul 21 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
用缓存实现静态页面的测试
2006/12/06 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
js function定义函数使用心得
2010/04/15 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
Python函数嵌套实例
2014/09/23 Python
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
Python循环语句之break与continue的用法
2015/10/14 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
利用Python检测URL状态
2019/07/31 Python
使用python实现画AR模型时序图
2019/11/20 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
Java语言的优势
2015/01/10 面试题
母亲节感恩寄语
2014/02/21 职场文书
银行服务感言
2014/03/01 职场文书
学生安全责任书
2014/04/15 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
物流管理专业推荐信
2014/09/06 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
公司租房协议书范本
2014/10/08 职场文书
2015年助残日活动总结
2015/03/27 职场文书
《所见》教学反思
2016/02/23 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
商业计划书之服装
2019/09/09 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python
Python合并pdf文件的工具
2021/07/01 Python
Golang日志包的使用
2022/04/20 Golang