javascript创建函数的20种方式汇总

       这篇文章主要介绍了javascript创建函数的20种方式汇总的相关资料,需要的朋友可以参考下

 
 

        工作中常常会创建一个函数来解决一些需求问题，以下是个人在工作中总结出来的创建函数20种方式，你知道多少？

?

1
2
3
4
5
6
7
8

function sayHello(){
console.log('hello');
}
function leave(){
console.log('goodbye');
}
//test
sayHello();

为完成需求，赶紧声明一个函数吧

?

1
2
3
4
5
6
7
8
9

 
var sayHello = function(){
console.log('hello');
}
var leave = function(){
console.log('goodbye');
}
//test
leave();

有求必应，函数表达数来解决

?

1
2
3
4
5
6
7
8
9
10
11

 
var Action = {
sayHello : function(){
console.log('hello');
},
leave : function(){
console.log('goodbye');
}
}
//test
Action.sayHello();

创建一个方法对象类看起来更整洁

?

1
2
3
4
5
6
7
8
9
10

 
var Action = function(){};
Action.sayHello = function(){
console.log('hello');
}
Action.leave = function(){
console.log('goodbye');
}
//test
Action.sayHello();

为单体添加属性方法，净化命名空间

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14

 
var Action = function(){
return {
sayHello : function(){
console.log('hello');
},
leave : function(){
console.log('goodbye');
}
}
}
// //test
var a = Action();
a.leave();

返回新对象我们还有更多的事情可以做

?

1
2
3
4
5
6
7
8
9
10
11

 
var Action = function(){};
Action.prototype.sayHello = function(){
console.log('hello');
}
Action.prototype.leave = function(){
console.log('goodbye');
}
//test
var a = new Action();
a.sayHello();

原型链指向防止创建多次

?

1
2
3
4
5
6
7
8
9
10
11
12
13

 
var Action = function(){};
Action.prototype = {
sayHello : function(){
console.log('hello');
},
leave : function(){
console.log('goodbye');
}
}
//test
var a = new Action();
a.leave();

对象赋给原型看上去更整洁

?

1
2
3
4
5
6
7
8
9
10
11
12

 
var Action = function(){
this.sayHello = function(){
console.log('hello');
}
this.leave = function(){
console.log('goodbye');
}
}
//test
var a = new Action();
a.leave();

别忘了还可以在类的内部添加属性

?

1
2
3
4
5
6
7
8
9
10

 
Function.prototype.sayHello = function(){
console.log('hello');
}
Function.prototype.leave = function(){
console.log('leave');
}
//test
var f = function(){};
f.sayHello();

基类原型拓展，新的一片空间

?

1
2
3
4
5
6
7
8
9
10
11
12
13

 
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();

通用定义方法函数使用更方便

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14

 
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();

原形赋值我们还可以用类操作

?

1
2
3
4
5
6
7
8
9
10
11
12

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();

链式操作有何不可

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14

 
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();

原型+链式=更进一步

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

 
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();

添加对象一次做得更多

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

 
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();

原型有什么不可以

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

 
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();

函数式添加对象也可以链式操作

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

 
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();

类的链式操作也可以做得更多

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14

 
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;
}

函数添加封装一下

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14

 
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;
}

类式添加追求的就是个性化

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

 
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();

         追求个性化，这么做不必说为什么

         以上所述就是本文的全部内容了，希望大家能够喜欢。

时间： 2025-01-18 19:47:52

javascript创建函数的20种方式汇总的相关文章

javascript创建函数的20种方式汇总_javascript技巧

工作中常常会创建一个函数来解决一些需求问题,以下是个人在工作中总结出来的创建函数20种方式,你知道多少? function sayHello(){ console.log('hello'); } function leave(){ console.log('goodbye'); } //test sayHello(); 为完成需求,赶紧声明一个函数吧 var sayHello = function(){ console.log('hello'); } var leave = function()

JavaScript创建闭包的两种方式的优劣与区别分析

  这篇文章主要介绍了JavaScript创建闭包的两种方式的优劣与区别分析的相关资料,需要的朋友可以参考下 通常JavaScript创建闭包比较常用的有两种方式. 构造函数方式: ? 1 2 3 new function() { var 变量... } 内联执行方式: ? 1 2 3 (function() { var 变量... })(); 在JavaScript内部运行机制下他们有什么区别?用哪种方式创建比较好?它与其它方式创建的闭包相比有什么优势? 我是这样理解的: 区别: 第一个:子方

JS中创建函数的三种方式及区别_基础知识

1.函数声明 function sum1(n1,n2){ return n1+n2; }; 2.函数表达式,又叫函数字面量 var sum2=function(n1,n2){ return n1+n2; }; 两者的区别:解析器会先读取函数声明,并使其在执行任何代码之前可以访问:而函数表达式则必须等到解析器执行到它所在的代码行才会真正被解释执行. 自执行函数严格来说也叫函数表达式,它主要用于创建一个新的作用域,在此作用域内声明的变量,不会和其它作用域内的变量冲突或混淆,大多是以匿名函数方式存在,

JavaScript创建闭包的两种方式的优劣与区别分析_javascript技巧

通常JavaScript创建闭包比较常用的有两种方式. 构造函数方式: new function() { var 变量... } 内联执行方式: (function() { var 变量... })(); 在JavaScript内部运行机制下他们有什么区别?用哪种方式创建比较好?它与其它方式创建的闭包相比有什么优势? 我是这样理解的: 区别: 第一个:子方法可以共享变量 第二个:内部子方法共享变量 比较: 我认为内联的比较好: 优势: 一般内联的创建是按需索要内存,因为只是局部执行的变量在内存里

javascript中创建对象的几种方式

原文:javascript中创建对象的几种方式 javascript中提供了通过Object构造函数或对象字面量方式来创建单个的对象,当我们想要创建很多对象的时候,简单的通过这两种方法就会产生大量的重复.在此,我总结了几种创建对象的模式.本文是在我阅读<javascript高级程序设计>后总结而来. 1.工厂模式 这种模式通过用函数来减少代码重复,利用函数的参数作为接口,与对象的属性与方法对接. function createfactory(name,age){ var obj = new O

JavaScript OOP 创建对象的7种方式

原文:JavaScript OOP 创建对象的7种方式 我写JS代码,可以说一直都是面向过程的写法,除了一些用来封装数据的对象或者jQuery插件,可以说对原生对象了解的是少之又少.所以我拿着<JavaScript高级程序设计 第3版>恶补了一下,这里坐下总结笔记,属于菜鸟级别,大神请直接无视. 1.工厂模式 1 /** 2 * 工厂模式 3 */ 4 function createPerson(name,age,job){ 5 var o = new Object(); 6 o.name =

修改和创建DOM节点两种方式的4种优化方案

原文:<Speeding up JavaScript: Working with the DOM>作者:KeeKim Heng, Google Web Developer翻译:http://www.blogjava.net/emu/archive/2010/03/01/314185.html 在我们开发互联网富应用(RIA)时,我们经常写一些javascript脚本来修改或者增加页面元素,这些工作最终是DOM--或者说文档对象模 型--来完成的,而我们的实现方式会影响到应用的响应速度. DOM

JavaScript定义类的几种方式总结

 本篇文章主要是对JavaScript定义类的几种方式进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 提起面向对象我们就能想到类,对象,封装,继承,多态.在<javaScript高级程序设计>(人民邮电出版社,曹力.张欣译.英文名字是:Professional JavaScript for Web Developers)这本书中描述的还算比较详细.我们看看JavaScript中定义类的各种方法.    1．工厂方式   javaScript中创建自己的类和对象,我们应该是必

详述JavaScript实现继承的几种方式(推荐)_javascript技巧

ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的. 原型链 原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.每一个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的指针.如果:我们让原型对象A等于另一个类型B的实例,那么原型对象A就会有一个指针指向B的原型对象,相应的B的原型对象中保存着指向其构造函数的指针.假如B的原型对象又是另一个类型的实例,那么上述的关系依旧成立,如此层层递进,就构成了实例与原型的