关于JavaScript和Jquery函数封装总结，不断更新。。。

一、JS函数形式

1.一般形式

/**
* test:函数名
* par:参数
*/
function test(par){
    
    
	var text = "Hello world!";
	return text;
}

2.对象中的函数

此函数的this是myobject

可以保存多个数据键值，和函数键值。

/**
* myobject:对象名
* data:数据键名
* myfu:函数键名
*/
var myobject = {
    
    
    data:"2",
    myfu:function(){
    
    
        console.log(this.data);
    }
}
/*调用*/
myobject.myfu();

3.变量函数

此函数中的this是window

/*
* test:函数名
*/
var test = function(){
    
    
    console.log("hello");
}
//调用
test();

4.apply多函数调用

/*
* 1
*/
var person = {
    
    
    fullName: function() {
    
    
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    
    
    firstName: "Bill",
    lastName: "Gates",
}
/*调用*/
person.fullName.apply(person1);
/*
* 2
*/
var myobject = {
    
    
    data:"2",
    myfu:function(){
    
    
        console.log(this.data);
    }
}
var sum = function(a,b){
    
    
    return a+b;
}
/*调用*/
var num_arr = [1,2];
var sum_num = sum.apply(myobject.myfu(),arr);

5.prototype作用

prototype可以在一个函数中定义一个“永恒不变”的变量或函数，也就是说当创建多个函数实例后，使用prototype定义的变量和函数永远只有原来的那一个。

function test(str){
    
    
    this.str = str;
}
test.prototype.arr = [];
test.prototype.mytest = function(pra){
    
    
    return pra;
}
//创建实例对象
var t1 = new test("123");
var t2 = new test("456");
/*测试*/
t1.arr.push(1);
t2.arr.push(2);
console.log(t1.arr);
console.log(t2.arr);
/*结果*/
[1, 2]
[1, 2]
//如果没有prototype，而直接在test中创建arr，结果为[1]和[2]，也就是连个不同的对象
function test(str){
    
    
    this.str = str;
    this.arr = [];
}

6.模块儿化函数

JavaScript中的函数中能够再定义函数，借助这个特点，给出以下函数写法

var outLog = outLog();
function outLog(){
    
    
	function out1(){
    
    
		console.log("out1");
	}
    function out2(){
    
    
        console.log("out2");
    }
    function out3(){
    
    
        console.log("out3");
    }
    return {
    
    
        out1:out1,
        out2:out2,
        out3:out3
    }
}
//调用
outLog.out1(); //out1
outLog.out2(); //out2
outLog.out3(); //out3

二、将函数封装到对象

这样的好处是你能够使用对象名称直接调用函数，看起来比较高尚一些

var operation = {
    
    
    add:function(a,b){
    
    
        return a+b;
    },
    sub:function(a,b){
    
    
        return a-b;
    }
}
/*调用*/
operation.add(2+3); //5
operation.sub(3,2); //1

三、jQuery封装函数

想要自定义jQuery方法，可以使用以下格式

/*
* this:被赋予属性的元素
*/
;
(function($){
    
    
    $.fn.extend({
    
    
        setcss:function(key,value){
    
    
            this.css(key,value);
        }
    });
})(jQuery)
/*使用方法*/
$(".test").setcss("border","1px solid red");

如果您发现任何错误，为了我们的共同学习，请及时指正。
感谢你的观看，谢谢！
持续更新中。。。