JavaScript之面向对象_动力节点Java学院整理


Posted in Javascript onJune 29, 2017

JavaScript的所有数据都可以看成对象,那是不是我们已经在使用面向对象编程了呢?

当然不是。如果我们只使用Number、Array、string以及基本的{...}定义的对象,还无法发挥出面向对象编程的威力。

JavaScript的面向对象编程和大多数其他语言如Java、C#的面向对象编程都不太一样。如果你熟悉Java或C#,很好,你一定明白面向对象的两个基本概念:

1.类:类是对象的类型模板,例如,定义Student类来表示学生,类本身是一种类型,Student表示学生类型,但不表示任何具体的某个学生;

2.实例:实例是根据类创建的对象,例如,根据Student类可以创建出xiaoming、xiaohong、xiaojun等多个实例,每个实例表示一个具体的学生,他们全都属于Student类型。

所以,类和实例是大多数面向对象编程语言的基本概念。

不过,在JavaScript中,这个概念需要改一改。JavaScript不区分类和实例的概念,而是通过原型(prototype)来实现面向对象编程。

原型是指当我们想要创建xiaoming这个具体的学生时,我们并没有一个Student类型可用。那怎么办?恰好有这么一个现成的对象:

var robot = {
 name: 'Robot',
 height: 1.6,
 run: function () {
  console.log(this.name + ' is running...');
 }
};

我们看这个robot对象有名字,有身高,还会跑,有点像小明,干脆就根据它来“创建”小明得了!

于是我们把它改名为Student,然后创建出xiaoming:

var Student = {
 name: 'Robot',
 height: 1.2,
 run: function () {
  console.log(this.name + ' is running...');
 }
};
var xiaoming = {
 name: '小明'
};
xiaoming.__proto__ = Student;

注意最后一行代码把xiaoming的原型指向了对象Student,看上去xiaoming仿佛是从Student继承下来的:

xiaoming.name; // '小明'
xiaoming.run(); // 小明 is running...

xiaoming有自己的name属性,但并没有定义run()方法。不过,由于小明是从Student继承而来,只要Student有run()方法,xiaoming也可以调用:

JavaScript之面向对象_动力节点Java学院整理

JavaScript的原型链和Java的Class区别就在,它没有“Class”的概念,所有对象都是实例,所谓继承关系不过是把一个对象的原型指向另一个对象而已。

如果你把xiaoming的原型指向其他对象:

var Bird = {
 fly: function () {
  console.log(this.name + ' is flying...');
 }
};
xiaoming.__proto__ = Bird;

现在xiaoming已经无法run()了,他已经变成了一只鸟:

xiaoming.fly(); // 小明 is flying...

在JavaScrip代码运行时期,你可以把xiaoming从Student变成Bird,或者变成任何对象。

请注意,上述代码仅用于演示目的。在编写JavaScript代码时,不要直接用obj.__proto__去改变一个对象的原型,并且,低版本的IE也无法使用__proto__。Object.create()方法可以传入一个原型对象,并创建一个基于该原型的新对象,但是新对象什么属性都没有,因此,我们可以编写一个函数来创建xiaoming:

// 原型对象:
var Student = {
 name: 'Robot',
 height: 1.2,
 run: function () {
  console.log(this.name + ' is running...');
 }
};
function createStudent(name) {
 // 基于Student原型创建一个新对象:
 var s = Object.create(Student);
 // 初始化新对象:
 s.name = name;
 return s;
}
var xiaoming = createStudent('小明');
xiaoming.run(); // 小明 is running...
xiaoming.__proto__ === Student; // true
Javascript 相关文章推荐
eval与window.eval的差别分析
Mar 17 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 #Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 #Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 #Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 #Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 #jQuery
详解vue父子组件间传值(props)
Jun 29 #Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 #Javascript
You might like
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
js每次Title显示不同的名言
2008/09/25 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
幼儿园庆六一活动方案
2014/03/06 职场文书
安全协议书范本
2014/04/21 职场文书
会计人员演讲稿
2014/09/11 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
庆祝教师节活动总结
2015/03/23 职场文书