首页 web前端 js教程 由prototype_1.3.1进入javascript殿堂-类的初探_prototype

由prototype_1.3.1进入javascript殿堂-类的初探_prototype

May 16, 2016 pm 07:24 PM

还是决定冠上ajax的头衔,毕竟很多人会用这个关键词搜索。虽然我认为这只是个炒作的概念,不过不得不承认ajax叫起来要方便多了。ajax的意思我就不详细解释了。

写这个教程的起因很简单:经过一段时间的ajax学习,有一些体会,并且越发认识到ajax技术的强大,所以决定记录下来,顺便也是对自己思路的整理。

前几年,javascript在一般人眼里,功能还很狭窄,所能做的要么是一些简单的表单验证,要么是许多华而不实的网页特效。随着flash的出现,大家已经不像以前那样热衷于js特效。似乎js能做的事情更加少了。但这时候,ajax的概念冒了出来,以gmail为典型代表的ajax应用受到很多人的关注,ajax一下子成为一种很热门的技术,当javascript和xml,和dom模型结合起来,其所能做的事情常常令人匪夷所思,甚至有些功能已经可以和桌面程序相当。

好了废话就不多说了,现在就从一个javascript的开发框架prototype_1.3.1(下面简称为prototype)开始。我本来是想先介绍一下javascript的高级应用,但怕水平不够,说的没有条理,所以就结合prototype来说,顺便会提及js的语法使用。
下面是框架最前面的两段代码:

var Prototype = {
  Version: '1.3.1',
  emptyFunction: function() {}
}
var Class = {
  create: function() {
    return function() { 
      this.initialize.apply(this, arguments);
    }
  }
}
首先,让我们来看下面两个语法的区别:


var o={};
var f=function(){};

后面一个很容易理解,它等价于function f(){};定义一个函数f。但前面一个就不常见了:这其实是创建一个对象,在{}中可以指定对象的成员,比如上面的Prototype,就是一个对象,有两个成员,第一个是版本号,第二个是一个空方法(函数)。像这种不用定义类,就能直接创建对象的功能可能只有js能做到。后面一种语法其实还有一个功能,就是定义一个类f。如果你在函数体中用了this,那么this后面的变量就是类的成员。
不仅this可以定义类成员,还有一种语法:

function c(){
member1:value,
member2:function(){}
}

这等价于:

function c(){
this.member1=value;
this.member2=function(){};
}

需要注意的是,用前一种办法时,最后一个成员的最后不能加逗号,我想这种语法应该和数组有关。

在js里,函数和类是没有区别的,都可以new,new的作用是把函数体的语句都执行一遍,然后返回一个对象。如果函数里有this,那么this后面的变量会作为对象成员;如果没有,那么new的作用只是返回一个没有任何成员的空对象。所以你用typeof查看一个所谓类的类型时,仍然会返回function。在js里也基本没有类型的概念,所有变量的声明都用var,即使是函数,也是如此。函数,其实也只是一个变量。

说函数是变量,可能很多人不解。但是你试试下面的做法:

function fTest(){
var a=1;
alert(a);
}
alert(fTest);

你会发现显示的是fTest这个函数的函数体,所以我们可以认为,所谓函数,仅仅是js引擎可以解析的一段代码字符串。函数名变量存储的只是这个字符串。说的更准确一点,函数名是一个指针变量,它存储的是这个代码字符串在内存中的位置。这样就不难理解将函数作为参数传递,可以作为值返回了,这是以后会大量使用的技术。因为类也是函数,所以理解了函数,也就理解了类。

虽然在js里函数和类没有区别,但是类的概念却可以方便我们进行程序设计,于是prototype很有创意的创建了一个全局对象Class:

var Class = {
  create: function() {
    return function() { 
      this.initialize.apply(this, arguments);
    }
  }
}

Class是一个全局对象,它的唯一方法就是create,作用返回一个函数,前面已经讲过函数作为返回值的机制,这里不再遨述。返回的函数包括一条语句:

this.initialize.apply(this, arguments);

前面讲过,new一个函数时,会执行函数里的代码,最后返回对象。所以当使用Class.create()创建了一个函数,再new这个返回的函数时,首先会执行这条语句。后面可以看到,这其实是为了调用类的构造函数。

就是这样,Class成为了整个prototype的类型创建模型,并且能很好的把类和函数在代码上区分开来。Class.create()仅仅是返回一个空类,而且它会默认为这个类是具有initialize方法的,所以要使用这个类,至少需要有一个构造函数,这就需要使用到类的继承。类只是一个函数,那么函数怎么继承呢?看起来匪夷所思,javascript能做到这一点,prototype使得实现更为优雅,至于它是怎么做到的,且听下回分解。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

前端热敏纸小票打印遇到乱码问题怎么办? 前端热敏纸小票打印遇到乱码问题怎么办? Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中,小票打印是一个常见的需求。然而,很多开发者在实...

谁得到更多的Python或JavaScript? 谁得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

神秘的JavaScript:它的作用以及为什么重要 神秘的JavaScript:它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? 如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? Apr 04, 2025 pm 05:09 PM

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

如何实现视差滚动和元素动画效果,像资生堂官网那样?
或者:
怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? 如何实现视差滚动和元素动画效果,像资生堂官网那样? 或者: 怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? Apr 04, 2025 pm 05:36 PM

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

console.log输出结果差异:两次调用为何不同? console.log输出结果差异:两次调用为何不同? Apr 04, 2025 pm 05:12 PM

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异,并解释其背后的原因。�...

JavaScript难以学习吗? JavaScript难以学习吗? Apr 03, 2025 am 12:20 AM

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

前端开发中如何实现类似 VSCode 的面板拖拽调整功能? 前端开发中如何实现类似 VSCode 的面板拖拽调整功能? Apr 04, 2025 pm 02:06 PM

探索前端中类似VSCode的面板拖拽调整功能的实现在前端开发中,如何实现类似于VSCode...

See all articles