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 判断一个元素是否在页面中存在
Dec 27 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
JavaScript设计模式初探
Jan 07 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
微信小程序实现订单倒计时
Nov 01 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
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中uploaded_files函数使用方法详解
2011/03/09 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
JQuery live函数
2010/12/24 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
Python设计实现的计算器功能完整实例
2017/08/18 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
python画折线图的程序
2018/07/26 Python
python实现狄克斯特拉算法
2019/01/17 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
python如何建立全零数组
2020/07/19 Python
python3判断IP地址的方法
2021/03/04 Python
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
xxx同志考察材料
2014/02/07 职场文书
安全生产实施方案
2014/02/23 职场文书
多媒体教室标语
2014/06/26 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
读书笔记格式
2015/07/02 职场文书
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python
分享几个实用的CSS代码块
2022/06/10 HTML / CSS
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server