详解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树形控件脚本代码
Jul 24 Javascript
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
jquery获取节点名称
Apr 26 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
js重写方法的简单实现
Jul 10 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 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
Ajax PHP分页演示
2007/01/02 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
javascript中的隐式调用
2018/02/10 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
解决django前后端分离csrf验证的问题
2019/02/03 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
企业法人代表任命书
2014/06/06 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
教师个人年终总结
2015/02/11 职场文书
父亲节寄语大全
2015/02/27 职场文书
学校远程教育工作总结
2015/08/11 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
小学毕业教师寄语
2019/06/21 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis