资讯专栏INFORMATION COLUMN

Javascript面向对象编程

wanglu1209 / 915人阅读

摘要:如果要理解基于原型实现面向对象的思想,那么理解中得三个重要概念构造函数原型原型链对帮助理解基于原型的面向对象思想就显得尤为重要。函数对象的原型在中,函数是一种特殊的对象,所有的函数都是构造函数的实例。

介绍

和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属性,这个属性始终会指向构造函数。

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

原型链(prototype chain) 使用new实例化的原型

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

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

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

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

函数(function)对象的原型

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

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

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

javascript 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 面向对象编程

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85725.html

相关文章

  • SegmentFault 技术周刊 Vol.32 - 七夕将至,你的“对象”还好吗?

    摘要:很多情况下,通常一个人类,即创建了一个具体的对象。对象就是数据,对象本身不包含方法。类是相似对象的描述,称为类的定义,是该类对象的蓝图或原型。在中,对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中,对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了,离年底老妈老爸...

    李昌杰 评论0 收藏0
  • SegmentFault 技术周刊 Vol.32 - 七夕将至,你的“对象”还好吗?

    摘要:很多情况下,通常一个人类,即创建了一个具体的对象。对象就是数据,对象本身不包含方法。类是相似对象的描述,称为类的定义,是该类对象的蓝图或原型。在中,对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中,对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了,离年底老妈老爸...

    Lyux 评论0 收藏0
  • SegmentFault 技术周刊 Vol.32 - 七夕将至,你的“对象”还好吗?

    摘要:很多情况下,通常一个人类,即创建了一个具体的对象。对象就是数据,对象本身不包含方法。类是相似对象的描述,称为类的定义,是该类对象的蓝图或原型。在中,对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中,对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了,离年底老妈老爸...

    AaronYuan 评论0 收藏0
  • JavaScript面向对象编程——面向对象

    摘要:面向对象面向对象的概述面向对象是什么面向对象编程的全称是,简称。面向对象编程是用抽象方式创建基于现实世界模型的一种编程。面向对象编程可以看做是使用一系列对象相互协作的软件设计。面向对象编程的山歌主要的特征是封装继承多态。 面向对象 面向对象的概述 面向对象是什么 面向对象编程的全称是Object Oriented Programming,简称OOP。面向对象编程是用抽象方式创建基于现实...

    SimonMa 评论0 收藏0
  • 再和“面向对象”谈恋爱 - 面向对象编程概念(三)

    摘要:说到底面向对象才是程序语言的根本。其实面向对象编程说的就是自定义对象。里并没有类的概念,所以严格上来讲这是个假的面向对象里的面向对象编程现在好了,终于听到别人鄙视我们了,给我们提供了类这个概念,其实是向传统语言更靠齐了。 通过前两篇文章,我们了解了对象的概念以及面向对象里的相关概念等知识,那前面说了对象分类里的前两种,这篇文章要详细去说第三种自定义对象,那真正的好戏这就来了! 面向对象...

    Cruise_Chan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<