详解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加ASP二级域名转向的代码
May 17 Javascript
Javascript条件判断使用小技巧总结
Sep 08 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 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和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
开工庆典邀请函范文
2014/01/16 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
个人委托书范本汇总
2014/10/01 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis