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 面向对象编程基础:继承
Aug 21 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
jQuery事件详解
Feb 23 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 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的session过期设置
2013/06/29 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
python中实现将多个print输出合成一个数组
2018/04/19 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
大韩航空官方网站:Korean Air
2017/10/25 全球购物
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
给医务人员表扬信
2014/01/12 职场文书
企业战略合作意向书
2015/05/08 职场文书
婚宴父亲致辞
2015/07/27 职场文书
Python+Tkinter制作专属图形化界面
2022/04/01 Python
PyTorch中permute的使用方法
2022/04/26 Python