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查找父节点的简单方法
Jun 28 Javascript
用Javascript同时提交多个Web表单的方法
Dec 26 Javascript
js Event对象的5种坐标
Sep 12 Javascript
jQuery图片播放8款精美插件分享
Feb 17 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 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
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
在 PHP 中使用随机数的三个步骤
2006/10/09 PHP
php学习之 数组声明
2011/06/09 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
XmlUtils JS操作XML工具类
2009/10/01 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
JS常用知识点整理
2017/01/21 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
Vue-Router模式和钩子的用法
2018/02/28 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
python使用cookielib库示例分享
2014/03/03 Python
python集合用法实例分析
2015/05/30 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
python 多线程中join()的作用
2020/10/29 Python
python eventlet绿化和patch原理
2020/11/21 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
某同学的自我鉴定范文
2013/12/26 职场文书
经理助理岗位职责
2014/03/05 职场文书
社区护士演讲稿
2014/08/27 职场文书
初一语文教学反思
2016/03/03 职场文书
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers