详解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 相关文章推荐
javascript实现的网页局布刷新效果
Dec 01 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
vue实现虚拟列表功能的代码
Jul 28 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 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中实现动态代理
2006/10/09 PHP
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
php表单敏感字符过滤类
2014/12/08 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
用PHP代码给图片加水印
2015/07/01 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
asp.net和php的区别点总结
2019/10/10 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
angular.bind使用心得
2015/10/26 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
js实现扫雷源代码
2020/11/27 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python 获取文件列表(或是目录例表)
2009/03/25 Python
Python反射用法实例简析
2017/12/22 Python
python 画函数曲线示例
2019/12/04 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
后勤人员自我鉴定
2013/10/20 职场文书
晚宴邀请函范文
2014/01/15 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
文明旅游倡议书
2015/04/28 职场文书
高中家长意见怎么写
2015/06/03 职场文书