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 相关文章推荐
加载 Javascript 最佳实践
Oct 30 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
Javascript访问器属性实例分析
Dec 30 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
javascript实现下雨效果
Mar 27 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 Javascript
JS中promise化微信小程序api
Apr 12 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 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_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
Python中的多重装饰器
2015/04/11 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
HTML的form表单和django的form表单
2019/07/25 Python
python如何操作mysql
2020/08/17 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
一些.net面试题
2014/10/06 面试题
汽车专业毕业生推荐信
2013/11/12 职场文书
设计部经理的岗位职责
2013/11/16 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
狼和鹿教学反思
2014/02/05 职场文书
文明餐桌活动方案
2014/02/11 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
社区党支部承诺书
2015/04/29 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python