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 相关文章推荐
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
深入理解Promise.all
Aug 08 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
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 用数组降低程序的时间复杂度
2009/12/04 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
php类的定义与继承用法实例
2015/07/07 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
js 金额格式化来回转换示例
2014/02/23 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
numpy中的高维数组转置实例
2018/04/17 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
Flask框架信号用法实例分析
2018/07/24 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
程序员机试试题汇总
2012/03/07 面试题
为什么要做架构设计
2015/07/08 面试题
策划创业计划书
2014/02/06 职场文书
企业内控岗位的职责
2014/02/07 职场文书
导游个人求职信
2014/04/25 职场文书
离婚答辩状范文
2015/05/22 职场文书
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android