详解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 22 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
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详细彻底学习Smarty
2008/03/27 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
Ionic快速安装教程
2016/06/03 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
Python标准库之循环器(itertools)介绍
2014/11/25 Python
Python中特殊函数集锦
2015/07/27 Python
python实现SMTP邮件发送功能
2020/06/16 Python
Python中return self的用法详解
2018/07/27 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
执行力心得体会
2013/12/31 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
入党政审材料范文
2014/12/24 职场文书
小学数学国培研修日志
2015/11/13 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书