https://segmentfault.com/a/1190000002900676

介绍

和java这种基于类(class-base)的面向对象的编程语言不同,javascript没有类这样的概念,但是javascript也是面向对象的语言,这种面向对象的方式成为 基于原型(prototype-base)的面向对象。虽然说ES6已经引入了类的概念来作为模板,通过关键字 “class” 可以定义类,但ES6的这种写法可以理解为一种语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。如果要理解基于原型实现面向对象的思想,那么理解javascript中得三个重要概念: 构造函数(constructor)、原型(prototype)、原型链(prototype chain) 对帮助理解基于原型的面向对象思想就显得尤为重要。下面就重点介绍一下这几个概念。

javascript对象结构图

先来看一张来自mollypages.org 的javascript对象的结构图,下面的例子都按照这张图阐述。

构造函数(constructor)和原型 (prototype)

构造函数是用来初始化对象的,每个构造函数都有一个不可枚举的属性,这就是原型(prototype).并且,每个prototype 都包含一个包含了不可枚举属性的constructor属性,这个属性始终会指向构造函数。

 function Foo(){};
console.log(Foo.prototype.constructor === Foo); // true

原型链(prototype chain)

使用new实例化的原型

每个被new实例化的对象都会包含一个__proto__ 属性,它是对构造函数 prototype 的引用。

  function Foo(){};
var foo = new Foo();
console.log(foo.__proto__ === Foo.prototype); // ture
  function Foo(){};
console.log(Foo.prototype.__proto__ === Object.prototype); // true

上面返回true 的原因是Foo.prototype 是Object预创建的一个对象,是Object创建的一个实例,所以,Foo.prototype.__proto_ 是Object.prototype的引用。

我们可以来看一下原型链的脉络。

函数(function)对象的原型

在javascript中,函数是一种特殊的对象,所有的函数都是构造函数 Function 的实例。

  function Foo() {};
console.log(Foo.__proto__ === Object.prototype); //false
console.log(Fool.__proto__ === Function.prototype); // true

从上面可以看出,函数Foo.__proto_ 指向到 Function.prototype, 说明函数 Foo 是 Function的一个实例。

 function Foo(){};
console.log(Foo.__proto__ === Function.prototype); //true
console.log(Foo.prototype.__proto__ === Object.prototype);//true

Foo.prototype 是Object预定义的对象,构造函数为Object,所以__proto__指向 Object.prototype

从上面的图我们可以看出, Object、Function、Array 等这些函数,他们的构造函数都是 Function 的实例。

基于原型链的继承

有了上面的基础知识以后,我们就可以自己去基于原型链去封装对象,实现javascript的继承。先来看下面一个例子。

运行上面的例子,输入 cat init 和 animal eat,说明cat 继承了 Animal.prototype.eat 的方法。

我们来分析一下代码。

1、Animal 的prototype中定义了 eat方法。
2、将Empty.prototype 指向 Animal.prototype , 所以 Empty.prototype 中也存在eat方法.
3、Cat.prototype == new Empty(),所以 Cat.prototype.__proto_ === Animal.__proto_.
4、重新为Cat指定constructor为Cat,否则Cat不存在constructor。

这样就完成了继承,原型链是这样的:

这样我们用原型链的方式实现了一个简单的继承方式。

Javascript面向对象编程的更多相关文章

  1. JavaScript面向对象编程学习笔记

    1  Javascript 面向对象编程 所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量.对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例 ...

  2. 快速学习JavaScript面向对象编程

    到处都是属性.方法,代码极其难懂,天哪,我的程序员,你究竟在做什么?仔细看看这篇指南,让我们一起写出优雅的面向对象的JavaScript代码吧! 作为一个开发者,能否写出优雅的代码对于你的职业生涯至关 ...

  3. 深入理解Javascript面向对象编程

    深入理解Javascript面向对象编程 阅读目录 一:理解构造函数原型(prototype)机制 二:理解原型域链的概念 三:理解原型继承机制 四:理解使用类继承(继承的更好的方案) 五:建议使用封 ...

  4. 【转】Javascript 面向对象编程(一):封装

    原文链接:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html Javascript ...

  5. Javascript 面向对象编程(一):封装 by 阮一峰

    <Javascript高级程序设计(第二版)>(Professional JavaScript for Web Developers, 2nd Edition) 它们都是非常优秀的Java ...

  6. 转:javascript面向对象编程

    作者: 阮一峰 日期: 2010年5月17日 学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学 ...

  7. 探讨javascript面向对象编程

    (个人blog迁移文章.) 前言: 下面将探讨javascript面向对象编程的知识. 请不要刻意把javascript想成面向对象编程是理所当然的. javascript里面,对象思想不可少,但是不 ...

  8. JavaScript面向对象编程(一)原型与继承

    原型(prototype) JavaScript是通过原型(prototype)进行对象之间的继承.当一个对象A继承自另外一个对象B后,A就拥有了B中定义的属性,而B就成为了A的原型.JavaScri ...

  9. JavaScript面向对象编程(二)构造函数和类

    new关键字和构造函数 在文章JavaScript面向对象编程(一)原型与继承中讨论啦JavaScript中原型的概念,并且提到了new关键字和构造函数.利用new关键字构造对象的实例代码如下: // ...

  10. JavaScript 面向对象编程(三)如何写类和子类

    在JavaScript面向对象编程(一)原型与继承和JavaScript面向对象编程(二)构造函数和类中,我们分别讨论了JavaScript中面向对象的原型和类的概念.基于这两点理论,本篇文章用一个简 ...

随机推荐

  1. 20160223 - Windows 10 的文件资源管理器下出现重复文件夹的解决办法

    现象: 安装 OneDrive 从 Windows 7.8.8.1 升级来的 Windows 10 的电脑,可能会出现文件资源管理器左侧面板中出现重复的文件夹. 通常有:视频.图片.文档.下载.音频. ...

  2. css 图片的无缝滚动

    转载:http://blog.sina.com.cn/s/blog_6387e82401013kx8.html js的图片的横向或者竖向的无缝滚动图片. ttp://zx.bjmylike.com/ ...

  3. DLL编写教程

    本文对通用的DLL技术做了一个总结,并提供了源代码打包下载,下载地址为: http://www.blogjava.net/Files/wxb_nudt/DLL_SRC.rar   DLL的优点 简单的 ...

  4. 【JavaEE企业应用实战学习记录】logFilter

    package sanglp.servlet; import javax.servlet.*; import javax.servlet.annotation.WebFilter; import ja ...

  5. android第三方框架 xlistview 的使用

    如今上拉刷新,下拉加载更多已经是浩如烟海的app的标配了 最近正好有相关的需要就去学习了一下,还是那句老话凡事都靠自己来 搞实在不是一件好事,费时费力不说可能还是在做无用功,不过自己研究学习 还是很有 ...

  6. mybatis Generator配置文件详解

    这里按照配置的顺序对配置逐个讲解,更细的内容可以配合中文文档参照. 1. 配置文件头 <?xml version="1.0" encoding="UTF-8&quo ...

  7. oracle判断字段是否存在语句

    declare v_cnt number; begin select count(*) into v_cnt from dba_tab_columns where table_name='T_IDC_ ...

  8. oracle 在分区内查询数据

    查看当前分区 select t.partition_name,t.num_rows from all_tab_partitions t where table_name='table_name' 单个 ...

  9. supervisor

    文章转自:http://cpper.info/2016/04/14/supervisor-usage.html在此只是当做笔记使用,不做他用     Linux进程管理工具supervisor安装及使 ...

  10. [转]理解JavaScript中的事件处理

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...