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中的变量是传值还是传址的?
Apr 19 Javascript
jquery中ajax调用json数据的使用说明
Mar 17 Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 Javascript
学习Node.js模块机制
Oct 17 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
input输入框内容实时监测(附代码)
Aug 15 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
vue-i18n结合Element-ui的配置方法
May 20 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获取随机数字和字母的方法详解
2013/06/06 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
js获取事件源及触发该事件的对象
2013/10/24 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
Python 正则表达式的高级用法
2016/12/04 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
奶茶专卖店创业计划书
2014/01/18 职场文书
大班开学家长寄语
2014/04/04 职场文书
理想演讲稿范文
2014/05/21 职场文书
销售合作意向书范本
2015/05/08 职场文书
党支部审查意见
2015/06/02 职场文书
工作证明书
2015/06/15 职场文书
致运动员赞词
2015/07/22 职场文书
Golang的继承模拟实例
2021/06/30 Golang