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 相关文章推荐
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
Vue实现选择城市功能
May 27 Javascript
node.js中express-session配置项详解
May 31 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 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
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
php绘制一个矩形的方法
2015/01/24 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
纯javascript版日历控件
2016/11/24 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
Python实现文件按照日期命名的方法
2015/07/09 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
编写python代码实现简单抽奖器
2020/10/20 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
矿泉水广告词
2014/03/20 职场文书
三十年同学聚会感言
2015/07/30 职场文书