详解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库 开发规则
Jan 31 Javascript
javascript parseInt 大改造
Sep 27 Javascript
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
微信小程序websocket实现聊天功能
Mar 30 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
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操作mysqli(示例代码)
2013/10/28 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
跟老齐学Python之折腾一下目录
2014/10/24 Python
python uuid模块使用实例
2015/04/08 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
对numpy中轴与维度的理解
2018/04/18 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
Python decimal模块使用方法详解
2020/06/08 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
Python识别处理照片中的条形码
2020/11/16 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
求职自荐信范文格式
2013/11/29 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
交通事故和解协议书
2014/09/25 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
python编写五子棋游戏
2021/05/25 Python
PHP使用QR Code生成二维码实例
2021/07/07 PHP
Python MNIST手写体识别详解与试练
2021/11/07 Python
关于使用Redisson订阅数问题
2022/01/18 Redis