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 相关文章推荐
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
Vue组件开发初探
Feb 14 Javascript
原生JS实现幻灯片
Feb 22 Javascript
jQuery实现验证码功能
Mar 17 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 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
PHP 5.0对象模型深度探索之绑定
2006/09/05 PHP
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
python源文件的字符编码知识点详解
2021/03/04 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
记帐员岗位责任制
2014/02/08 职场文书
优秀部门获奖感言
2014/02/14 职场文书
物理教学随笔感言
2014/02/22 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
黄埔军校观后感
2015/06/10 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript