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 相关文章推荐
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
js Math 对象的方法
Sep 01 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 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
typecho插件编写教程(五):核心代码
2015/05/28 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python 抓取动态网页内容方案详解
2014/12/25 Python
Python实现计算最小编辑距离
2016/03/17 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
tornado 多进程模式解析
2018/01/15 Python
python样条插值的实现代码
2018/12/17 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
Python ellipsis 的用法详解
2020/11/20 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
创建服务型党组织实施方案
2014/02/25 职场文书
铲车司机岗位职责
2014/03/15 职场文书
会计专业自荐信
2014/06/03 职场文书
经理任命书模板
2014/06/06 职场文书
优秀会计求职信
2014/07/04 职场文书
校车司机安全责任书
2015/05/11 职场文书
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android
HTML+JS实现在线朗读器
2022/02/15 Javascript