美文网首页让前端飞
面向对象的JavaScript

面向对象的JavaScript

作者: 强哥科技兴 | 来源:发表于2018-12-08 13:38 被阅读1次

JavaScript有不止一种方法创建对象。

简单的对象创建

最简单的创建对象的方法是用一个新的Object开始,然后向其中添加内容。

要创建一个新Object,只需:

变量newObject现在指向一个Object的实例,Object是JavaScript中所有对象的基类。要给它增加一个叫firstName的元素,只需:

也可以很容易地添加函数:

现在调用newObject.sayName()就会弹出一个“frank”的警告信息。

与大多数成熟的面向对象语言不同,在JavaScript中,不必为对象实例创建类或蓝图。你可以在这里所写的那样,在运行时创建它。在对象的整个生命周期中都可以这么做。在网页中,这意味着可以在任何时候给对象添加属性和方法。

事实上,JavaScript实现只是把所有对象当坐关联数组。你可以这样检索newObject中firstName字段的值:

同样的,可以这样调用sayName()函数:

可以利用这个特点实现基于某种逻辑调用某个对象的方法:

原型

JavaScript中的每一个独立的对象都有一个与之关联的原型(prototype)属性,它可以被看做一个简化的继承形式。基本上,他的工作方式是:当构造一个对象的新实例时,定义在对象的原型中的所有属性和方法,在运行时都会附着在那个新的实例上。例如:

与之前的例子不同,无论你创建了多少个newClass实例,内存中sayFirstName()函数都只会有一个单独的实例。这个方法实际是附加在每个实例上,而且this关键字还是在运行时被计算。所有this通常指向它所属的那个特定的newClass实例。

面向对象的好处

无论选择哪种方法,将代码面向对象化都有很多好处。一个重要的好处就是,每一个对象本质上就是一个命名空间。可以用此来模拟Java和C#的 包。

另一个好处就是可以使用对象来隐藏数据。例如:

执行上面的代码会有两个警告信息:第一个输出“frank”,第二个输出“undefined”。这是因为lastName字段在newClass的实例外是不可访问的。注意字段定义的不同:任何使用this关键字定义的字段,都可以在类之外访问。而没有使用this定义的字段,都只能在类内部访问。该规则对方法同样适用。

使用JSON创建对象

JSON实际是JavaScript规范中的一个核心部分,最初的目的是为了快速简便地定义赋值的对象关系图,也就是那些嵌套与其他对象中的对象的实例。

JavaScript里的对象只是隐藏在面具下的关联数组。这就是JSON可以运转的原因。

下面是使用JSON创建一个newObject对象的例子:

使用JSON和定义一个数组非常相似。对象中的函数可以是内联的(上例sayLastName()),也可以引用外部函数(上例sayFirstName())。

在JSON中,可以随意嵌套对象定义来创建对象的层级关系。入下,在newObject中加入了LastName对象。

然后,可以通过newObject.LastName.sayLastName()来调用相关方法。

最后:“相信有很多想学前端的小伙伴,今年年初我花了一个月整理了一份最适合2018年学习的web前端干货,从最基础的HTML+CSS+JS到移动端HTML5等都有整理,送给每一位前端小伙伴,53763,1707这里是小白聚集地,欢迎初学和进阶中的小伙伴。”

祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

相关文章

  • JavaScript学习

    javascript面向对象 初学javascript,感觉javascript的面向对象编程还是很有意思的,在此...

  • javascript的面向对象

    javascript面向对象 初学javascript,感觉javascript的面向对象编程还是很有意思的,在此...

  • ajax

    1. 面向对象 javascript 具有面向过程,面向对象,函数式编程的特点 javascript 重要 原型/...

  • 构造函数与 new 命令

    JavaScript 语言具有很强的面向对象编程能力,本章介绍 JavaScript 如何进行面向对象编程。 对象...

  • JavaScript面向对象学习笔记

    @(JS技巧)[面向对象] JavaScript面向对象学习笔记 封装 Javascript是一种基于对象(obj...

  • js高级

    学习目标: 理解面向对象开发思想 掌握 JavaScript 面向对象开发相关模式 掌握在 JavaScript ...

  • JavaScript 高级(备忘)

    在线地址:JavaScript 高级 目标 理解面向对象开发思想 掌握 JavaScript 面向对象开发相关模式...

  • 06-JavaScript高级

    学习目标: 理解面向对象开发思想 掌握 JavaScript 面向对象开发相关模式 掌握在 JavaScript ...

  • 前端进阶(二)JS高级讲解面向对象,原型,继承,闭包,正则表达式

    JavaScript 高级 学习目标: 理解面向对象开发思想 掌握 JavaScript 面向对象开发相关模式 掌...

  • JavaScript高级

    学习目标: 理解面向对象开发思想 掌握 JavaScript 面向对象开发相关模式 掌握在 JavaScript ...

网友评论

    本文标题:面向对象的JavaScript

    本文链接:https://www.haomeiwen.com/subject/grrqhqtx.html