javascript創(chuàng)建函數(shù)的20種方式匯總
更新時(shí)間：2015年06月23日 11:20:59 投稿：hebedich
這篇文章主要介紹了javascript創(chuàng)建函數(shù)的20種方式匯總的相關(guān)資料,需要的朋友可以參考下
工作中常常會(huì)創(chuàng)建一個(gè)函數(shù)來解決一些需求問題，以下是個(gè)人在工作中總結(jié)出來的創(chuàng)建函數(shù)20種方式，你知道多少？
function sayHello(){
console.log('hello');
}
function leave(){
console.log('goodbye');
}
//test
sayHello();
為完成需求，趕緊聲明一個(gè)函數(shù)吧
var sayHello = function(){
console.log('hello');
}
var leave = function(){
console.log('goodbye');
}
//test
leave();
有求必應(yīng)，函數(shù)表達(dá)數(shù)來解決
var Action = {
sayHello : function(){
console.log('hello');
},
leave : function(){
console.log('goodbye');
}
}
//test
Action.sayHello();
創(chuàng)建一個(gè)方法對象類看起來更整潔
var Action = function(){};
Action.sayHello = function(){
console.log('hello');
}
Action.leave = function(){
console.log('goodbye');
}
//test
Action.sayHello();
為單體添加屬性方法，凈化命名空間
var Action = function(){
return {
sayHello : function(){
console.log('hello');
},
leave : function(){
console.log('goodbye');
}
}
}
// //test
var a = Action();
a.leave();
返回新對象我們還有更多的事情可以做
var Action = function(){};
Action.prototype.sayHello = function(){
console.log('hello');
}
Action.prototype.leave = function(){
console.log('goodbye');
}
//test
var a = new Action();
a.sayHello();
原型鏈指向防止創(chuàng)建多次
var Action = function(){};
Action.prototype = {
sayHello : function(){
console.log('hello');
},
leave : function(){
console.log('goodbye');
}
}
//test
var a = new Action();
a.leave();
對象賦給原型看上去更整潔
var Action = function(){
this.sayHello = function(){
console.log('hello');
}
this.leave = function(){
console.log('goodbye');
}
}
//test
var a = new Action();
a.leave();
別忘了還可以在類的內(nèi)部添加屬性
Function.prototype.sayHello = function(){
console.log('hello');
}
Function.prototype.leave = function(){
console.log('leave');
}
//test
var f = function(){};
f.sayHello();
基類原型拓展，新的一片空間
Function.prototype.addMethod = function(name, fn){
this[name] = fn;
}
var methods = function(){};
methods.addMethod('sayHello', function(){
console.log('hello');
});
methods.addMethod('leave', function(){
console.log('leave');
});
//test
methods.sayHello();
通用定義方法函數(shù)使用更方便
Function.prototype.addMethod = function(name, fn){
this.prototype[name] = fn;
}
var Methods = function(){};
Methods.addMethod('sayHello', function(){
console.log('hello');
});
Methods.addMethod('leave', function(){
console.log('leave');
});
//test
var a = new Methods();
a.leave();
原形賦值我們還可以用類操作
Function.prototype.addMethod = function(name, fn){
this[name] = fn;
return this;
}
var methods = function(){};
methods.addMethod('sayHello', function(){
console.log('hello');
}).addMethod('leave', function(){
console.log('leave');
});
//test
methods.leave();
鏈?zhǔn)讲僮饔泻尾豢?br />
Function.prototype.addMethod = function(name, fn){
this.prototype[name] = fn;
return this;
}
var Methods = function(){};
Methods.addMethod('sayHello', function(){
console.log('hello');
}).addMethod('leave', function(){
console.log('leave');
});
//test
var a = new Methods();
a.leave();
原型+鏈?zhǔn)?更進(jìn)一步
Function.prototype.addMethod = function(obj){
for(var key in obj){
this[key] = obj[key];
}
}
var methods = function(){};
methods.addMethod({
sayHello : function(){
console.log('hello');
},
leave : function(){
console.log('goodbye');
}
});
//test
methods.leave();
添加對象一次做得更多
Function.prototype.addMethod = function(obj){
for(var key in obj){
this.prototype[key] = obj[key];
}
}
var Methods = function(){};
Methods.addMethod({
sayHello : function(){
console.log('hello');
},
leave : function(){
console.log('goodbye');
}
});
//test
var a = new Methods();
a.leave();
原型有什么不可以
Function.prototype.addMethod = function(obj){
for(var key in obj){
this[key] = obj[key];
}
return this;
}
var methods = function(){};
methods.addMethod({
sayHello : function(){
console.log('hello');
}
}).addMethod({
leave : function(){
console.log('goodbye');
}
});
//test
methods.leave();
函數(shù)式添加對象也可以鏈?zhǔn)讲僮?br />
Function.prototype.addMethod = function(obj){
for(var key in obj){
this.prototype[key] = obj[key];
}
return this;
}
var Methods = function(){};
Methods.addMethod({
sayHello : function(){
console.log('hello');
}
}).addMethod({
leave : function(){
console.log('goodbye');
}
});
//test
var a = new Methods();
a.leave();
類的鏈?zhǔn)讲僮饕部梢宰龅酶?br />
Function.prototype.addMethod = function(){
if(arguments.length < 1)
return;
var tostring = Object.prototype.toString;
if(tostring.call(arguments[0]) === '[object Object]'){
for(var key in arguments[0]){
this[key] = arguments[0][key];
}
}else if(typeof arguments[0] === "string" && tostring.call(arguments[1]) === '[object Function]'){
this[arguments[0]] = arguments[1];
}
return this;
}
函數(shù)添加封裝一下
Function.prototype.addMethod = function(){
if(arguments.length < 1)
return;
var tostring = Object.prototype.toString;
if(tostring.call(arguments[0]) === '[object Object]'){
for(var key in arguments[0]){
this.prototype[key] = arguments[0][key];
}
}else if(typeof arguments[0] === "string" && tostring.call(arguments[1]) === '[object Function]'){
this.prototype[arguments[0]] = arguments[1];
}
return this;
}
類式添加追求的就是個(gè)性化
Function.prototype.addMethod = function(){
if(arguments.length < 1)
return;
var cout = 0,
tostring = Object.prototype.toString,
that;
if(typeof arguments[0] === "boolean" && arguments[0]){
cout++;
that = this;
}else{
that = this.prototype;
}
if(tostring.call(arguments[cout]) === '[object Object]'){
for(var key in arguments[cout]){
that[key] = arguments[cout][key];
}
}else if(typeof arguments[cout] === "string" && tostring.call(arguments[cout + 1]) === '[object Function]'){
that[arguments[cout]] = arguments[cout + 1];
}
return this;
}
//text
var Text1 = function(){};
Text1
.addMethod('sayHello', function(){console.log('last say hello!')})
.addMethod('leave', function(){console.log('last goodbye!')});
var t = new Text1();
t.sayHello();
t.leave();
var test2 = function(){};
test2
.addMethod(true, 'sayHello', function(){console.log('last say hello!')})
.addMethod(true, 'leave', function(){console.log('last goodbye!')});
test2.sayHello();
test2.leave();
追求個(gè)性化，這么做不必說為什么
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
JavaScript中的console.dir()函數(shù)介紹
這篇文章主要介紹了JavaScript中的console.dir()函數(shù)介紹,console.dir主要用來dump某些對象的詳細(xì)信息,需要的朋友可以參考下2014-12-12
一個(gè)JS函數(shù)搞定網(wǎng)頁標(biāo)題(title)閃動(dòng)效果
這篇文章主要介紹了使用JS函數(shù)實(shí)現(xiàn)網(wǎng)頁標(biāo)題(title)閃動(dòng)效果的代碼,需要的朋友可以參考下2014-05-05
JavaScript 原型學(xué)習(xí)總結(jié)
每個(gè)對像都有一個(gè)隱慝的屬性用于指向到它的父對像（構(gòu)造對像的函數(shù)）的原型(這里稱為父原型或隱式原型），并從中繼承它的屬性和方法2010-10-10
javascript預(yù)加載圖片、css、js的方法示例介紹
預(yù)加載的好處可以讓網(wǎng)頁更快的呈現(xiàn)給用戶，缺點(diǎn)就是可能會(huì)增加無用的請求，不多說了，作為一個(gè)前端攻城師都懂的，下面分享我做的測試和得到的結(jié)果2013-10-10
下面小編就為大家?guī)硪黄猨s控制div層的疊加簡單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
原生JS實(shí)現(xiàn)HTML轉(zhuǎn)Markdown功能
這篇文章主要為大家詳細(xì)介紹了如何使用原生JS實(shí)現(xiàn)簡單的HTML轉(zhuǎn)Markdown功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-04-04
TypeScript由微軟開發(fā)的自由和開源的編程語言，是一種給 JavaScript 添加特性的語言擴(kuò)展，接下來通過本文給大家介紹TypeScript 中如何限制對象鍵名的取值范圍，感興趣的朋友跟隨小編一起看看吧2021-05-05
深拷貝和淺拷貝是面試中經(jīng)常出現(xiàn)的,主要考察對基本類型和引用類型的理解深度,這篇文章主要給大家介紹了關(guān)于js深拷貝和淺拷貝的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了JS引用傳遞與值傳遞的區(qū)別與用法,結(jié)合實(shí)例形式較為詳細(xì)的對比分析了javascript引用傳遞與值傳遞的原理、區(qū)別、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-06-06
JavaScript實(shí)現(xiàn)form表單的多文件上傳
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)form表單的多文件上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05