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 相关文章推荐
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
JQuery触发事件例如click
Sep 11 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
jQuery限制图片大小的方法
May 25 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
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
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
在Python中使用模块的教程
2015/04/27 Python
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
python使用turtle库绘制树
2018/06/25 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
2014全国两会学习心得体会2000字
2014/03/10 职场文书
大型会议策划方案
2014/05/17 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
贪污检举信范文
2015/03/02 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书