JavaScript中function的详细理解（附代码）-木庄网络博客

本文摘自PHP中文网，作者不言，侵删。

本篇文章给大家带来的内容是关于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 作用。当然这时候标识符的命名一般遵循 “首字母大写” 规则。

语义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：作为独立的函数

阅读剩余部分

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » JavaScript中function的详细理解（附代码）

JavaScript中function的详细理解（附代码）

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论