关于原生js中函数的三种角色和jQuery源码解析

原生js中的函数有三种角色：

分两大种：

1、函数（最主要的角色）
2、普通对象（辅助角色）：函数也可以像对象一样设置属于本身的私有属性和方法，这些东西和实例或者私有变量没有关系
两种角色直接没有必然的关系；

分三小类：

1、普通函数

function fn(){

 console.log('我是一个最基础的函数');
}

fn();

2、类

包括（内置类，自定义类）也就是 构造函数 

     内置类是通过构造函数的形式创建的

     自定义类形式和内置类一样创建

内置类的使用：其实上述fn函数就是内置Function类的一个实例，可以使用内置函数类的原型上的方法，下面的代码只是更加形象的表现了函数是类的角色而已

var fn2=new Function('a','b','c','return a+b');

console.log(fn2.constructor);//指向当前实例所属类本身，控制台输出：ƒ Function() { [native code] }

console.log(fn2);
 
fn2.call(null);

fn2 输出结果，是一个匿名函数，a,b,c,分别是作为函数的参数，'return a+b'是作为函数体，如截图：

   

fn2是内置类Function的一个实例，可以通过__proto__原型链使用prototype原型上的call方法；

自定义类的使用：

    function fn3() {
        var stack='我是fn3的私有的';
        this.name='我是实例私有的';
    }
   fn3.prototype.sum=function(){

     console.log('执行了sum');

   }
    var f=new fn3;

    console.log(f.constructor);//控制台输出fn3函数体

    console.log(f.name);//我是实例私有的，每个fn3的实例都拥有

    console.log(f.stack);//undefined，属于fn3自己的私有属性，实例不可以使用

    f.sum();//执行了sum , sum属于f的所属类的原型上的公有方法，作为fn3的实例都可以调用

3、普通对象

和普通的object没有区别，就是对键值对的增删改查

 function fn(){
 }
 fn.aa='ok';//把fn当成普通对象键值对方式

jquery这个类库中，有一部分方法就是写在原型上的，有一部分是按照普通对象来设置的：

(function (g,f) {

        var version = "1.11.3",
        jQuery=function(){//把jquery当成构造函数
            
        return new jQuery.fn.init( selector, context );//new 原型上的init，就是new jQuery

         }; 

  jQuery.fn = jQuery.prototype = { //把jquery当成一个函数对象添加了fn属性名=把jquery的原型重新赋值了

  jquery: version,// 添加了jQuery版本键值对 

  constructor: jQuery,//重新补写了constructor属性，值为jquery，更加说明jquery是一个自定义类（构造函数）

  jQuery.extend = jQuery.fn.extend = function() { //将扩展的对象插入到指定的对象中 //实现两种调用方法，对象.xxx, 实例调用  };
 
  var init = jQuery.fn.init = function( selector, context ) { var match, elem;return jQuery; })()//init是jQuery.fn原型上的一个属性 

  init.prototype = jQuery.fn;//init 的原型指向了jQuery.fn , jQuery.fn又是jQuery的原型，所以在起初才能使用 new jQuery.fn.init的写法

  $.ajax();//把jquery当成对象 

  $().css();//把jquery当成构造函数（类），实例.css()->实例调用原型上的css方法

只要是个函数，不管哪个角色，永远都是内置Function这个类的实例