JavaScript中function的详细理解(附代码)

本篇文章给大家带来的内容是关于javascript中function的详细理解(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

JavaScript 中的 function 有多重意义。它可能是一个构造器(constructor),承担起对象模板的作用; 可能是对象的方法(method),负责向对象发送消息。还可能是函数,没错是函数,和对象没有任何关系独立存在的可以被调用的函数。

由于语言设计者的妥协,在 JavaScript 加入了一些 class 相关的特性,以使 JavaScript 看起来确实象 Java,可以 “面向对象”。虽然 JavaScript 添加了 new 和 this, 但却没有 class (ES已加)。最后 function 临时担负起 class 的任务。

语义1:作为构造器的 function

/**@class Tab@param nav {string} 页签标题的class@param content {string} 页面内容的class**/function Tab(nav, content) { this.nav = nav; this.content = content;}Tab.prototype.getNav = function() { return this.nav;};Tab.prototype.setNav = function(nav) { this.nav = nav;};Tab.prototype.add = function() {};// 创建对象var tab = new Tab('tab-nav', 'tab-content');

登录后复制

这里定义了一个类 Tab,创建了一个对象 tab。以上使用了 function ,this, new。this, new 是常见的面向对象语言中的关键字, 这里的 function 则担负传统面向对象语言中的 class 作用。当然这时候标识符的命名一般遵循 “首字母大写” 规则。

立即学习“Java免费学习笔记(深入)”;

语义2:作为对象方法的 function

由于 JavaScript 中无需类也可以直接创建对象,因此有两种方式给对象添加方法。第一种先定义类,方法挂在原型上,如上例的 Tab,原型上有 getNav、setNav 和 add 方法。以下还有一种,直接在 function 内的 this 上添加方法。

function Tab(nav, content) { this.nav = nav this.content = content this.getNav = function() {// ...} this.setNav = function() {// ...} this.add = function() {// ...}}

登录后复制

这里 Tab 是语义, this.getNav/this.setNav/this.add 是语义,作为对象的方法。 另外,可以直接定义对象及其方法

var tab = { nav: '', content: '', getNav: function() {// ...}, setNav: function() {// ...}, add: function() {// ...}}

登录后复制

tab.getNav/tab.setNav/tab.add 是语义,作为对象 tab 的方法。
语义3:作为独立的函数

/*判断对象是否是一个空对象@param obj {Object}@return {boolean}*/function isEmpty(obj) { for (var a in obj) {return false} return true}// 定义一个模块~function() { // 辅助函数 function now() {return (new Date).getTime()} // 模块逻辑...}();// 采用CommonJS规范的方式定义一个模块define(require, exports, moduel) { // 辅助函数 function now() {return (new Date).getTime()} // 模块逻辑...})

登录后复制

isEmpty 作为一个全局函数存在,模块定义里面的 now 则作为局部函数存在,无论 isEmpty 还是 now 这里的 function 都指函数,它不依赖与对象和类,可以独立被调用。
语义4:匿名函数定义模块

// 全局命名空间var RUI = {}// ajax.js~function(R) { // 辅助函数... ajax = {request: function() {  // ...}getJSON: function() {  // ...}...} // 暴露出模块给 R R.ajax = ajax}(RUI);// event.js~function(R) { // 辅助函数... // 事件模块定义... // 暴露出模块给 R R.event = event}(RUI);// dom.js~function(R) { // 辅助函数... // DON模块定义... // 暴露出模块给 R R.dom = dom}(RUI);

登录后复制

这里的匿名函数执行后把API对象暴露给了RUI,无论匿名函数内干了多少活,对应匿名函数外是看不到的,也是没有必要去理会的。最终关心的是公开的 API 方法,只要了解这些方法的参数及意义就可以马上使用它了。

语义5:匿名函数处理某些特殊效果如处理一些数据又不想暴露过多的变量

// 判断IE版本的hack方式var IEVersion = function() { var undef, v =  var p = document.createElement('p') var all = p.getElementsByTagName('i') while (p.innerHTML = '',all[]); return v > ? v : undef}();

登录后复制

最终只要一个结果 IEVersion,匿名函数内部用到了一些局部变量全部可以隔离开。这种方式对于一些临时性的数据加工非常有效,紧凑。【相关推荐:JavaScript视频教程】

以上就是JavaScript中function的详细理解(附代码)的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2731480.html

(0)
上一篇 2025年3月8日 00:28:31
下一篇 2025年2月18日 06:16:11

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 如何使用nodejs分离html文件里的js和css(代码示例)

    本篇文章给大家带来的内容是关于如何使用nodejs分离html文件里的js和css(代码示例) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 摘要: 本文要实现的内容,使用nodejs 对文件的增删改查,演示的例子-》分…

    2025年3月8日
    200
  • Content-Type几种值的区别及用法介绍

    本篇文章给大家带来的内容是关于Content-Type几种值的区别及用法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1、Content-Type 的值类型: 1.1  application/json:消息主体是序…

    2025年3月8日
    100
  • JavaScript实现双向链表(代码示例)

    在本篇文章中,我们将给大家介绍如何在javascript中实现双向链表,希望对需要的朋友有所帮助! 什么是双向链表? 在双向链表中,每个节点都有对前一个节点和下一个节点的引用。上一个和下一个的开始和结束节点应该指向null。 双向链表的实现…

    2025年3月8日
    200
  • JavaScript中的强制类型转换的方法介绍

    本篇文章给大家带来的内容是关于JavaScript中的强制类型转换的方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 JavaScript 原语 javascript 建立在一系列基本单元之上。你应该对其中的一些已经…

    编程技术 2025年3月8日
    200
  • 使用webpack构建多页应用的代码示例

    本篇文章给大家带来的内容是关于使用webpack构建多页应用的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 背景:随着react, vue, angular 三大前端框架在前端领域地位的稳固,SPA应用正在被应用…

    编程技术 2025年3月8日
    200
  • JavaScript异步加载的详细介绍(附代码)

    本篇文章给大家带来的内容是关于javascript异步加载的详细介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 讲这个问题之前, 我们从另一个面试高频问题来切入, 我们的web页面从开始解析到页面渲染完成都经…

    2025年3月8日
    200
  • new操作符的详细用法介绍

    本篇文章给大家带来的内容是关于new操作符的详细用法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 相信很多才接触前端的小伙伴甚至工作几年的前端小伙伴对new这个操作符的了解还停留在一知半解的地步,比较模糊。 就比如前…

    2025年3月8日
    200
  • JavaScript常用数组的操作方法总结(代码)

    本篇文章给大家带来的内容是关于javascript常用数组的操作方法总结(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、concat() concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,…

    编程技术 2025年3月8日
    200
  • 节流阀和去抖动的基本实现方法介绍

    本篇文章给大家带来的内容是关于节流阀和去抖动的基本实现方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 节流阀throttle 触发的事件以周期的形式去执行,而非实时。如滴水的水龙头。 function thrott…

    编程技术 2025年3月8日
    200
  • 如何理解JavaScript中的原型链

    javascript中的原型链指的是原型对象链接到另一个原型对象并且依此类推,它的作用就是当请求对象不包含属性时,js就会一直向下查看原型链直到找到所要请求的属性或者到链的末尾 JavaScript是一种基于原型的语言,也就是说JavaSc…

    2025年3月8日
    200

发表回复

登录后才能评论