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 相关文章推荐
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
JS实现进度条动态加载特效
Mar 25 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
DC动漫人物排行
2020/03/03 欧美动漫
PHP学习之PHP运算符
2006/10/09 PHP
PHP加密解密类实例分析
2015/04/20 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
python 自定义对象的打印方法
2019/01/12 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
深入浅析Python中的迭代器
2019/06/04 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
python中adb有什么功能
2020/06/07 Python
个人求职信范文分享
2014/01/06 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
法院授权委托书范文
2014/08/02 职场文书
停电调休通知
2015/04/16 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript