详解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分页函数代码
Sep 10 Javascript
js变量以及其作用域详解
Jul 18 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 Javascript
vscode中使用npm安装babel的方法
Aug 02 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实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
自动更新作用
2006/10/08 Javascript
greybox——不开新窗口看新的网页
2007/02/20 Javascript
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
Python实现二分法算法实例
2015/02/02 Python
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
python如何实现int函数的方法示例
2018/02/19 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
python 伯努利分布详解
2020/02/25 Python
Django-migrate报错问题解决方案
2020/04/21 Python
Python map及filter函数使用方法解析
2020/08/06 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
数控专业毕业生自荐信范文
2014/03/04 职场文书
洗发露广告词
2014/03/14 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
英文慰问信范文
2015/03/24 职场文书
增值税发票丢失证明
2015/06/19 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
接收函
2019/04/22 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python