详解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 相关文章推荐
Array.prototype.slice 使用扩展
Jun 09 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 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执行速度全攻略(上)
2006/10/09 PHP
关于时间计算的结总
2006/12/06 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
Python正则表达式指南 推荐
2018/10/09 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
python读写配置文件操作示例
2019/07/03 Python
pytorch构建多模型实例
2020/01/15 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
药学专业个人自我评价
2013/11/11 职场文书
生产厂长岗位职责
2014/02/21 职场文书
保险公司晨会主持词
2014/03/22 职场文书
2014财务年终工作总结
2014/12/08 职场文书
新娘婚礼致辞
2015/07/27 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL