原生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这个类的实例

关于原生js中函数的三种角色和jQuery源码解析的更多相关文章

  1. 【温故知新】——原生js中常用的四种循环方式

    一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0   网页输出“欢迎下次光临” 在网页中弹出框输入1   网页输出“查询中……” 在 ...

  2. android Service Activity三种交互方式(付源码)(转)

    android Service Activity三种交互方式(付源码) Android应用服务器OSBeanthread  android Service Binder交互通信实例 最下边有源代码: ...

  3. Java的三种代理模式&完整源码分析

    Java的三种代理模式&完整源码分析 参考资料: 博客园-Java的三种代理模式 简书-JDK动态代理-超详细源码分析 [博客园-WeakCache缓存的实现机制](https://www.c ...

  4. Java生鲜电商平台-电商中海量搜索ElasticSearch架构设计实战与源码解析

    Java生鲜电商平台-电商中海量搜索ElasticSearch架构设计实战与源码解析 生鲜电商搜索引擎的特点 众所周知,标准的搜索引擎主要分成三个大的部分,第一步是爬虫系统,第二步是数据分析,第三步才 ...

  5. Java中的容器(集合)之HashMap源码解析

    1.HashMap源码解析(JDK8) 基础原理: 对比上一篇<Java中的容器(集合)之ArrayList源码解析>而言,本篇只解析HashMap常用的核心方法的源码. HashMap是 ...

  6. 三.jQuery源码解析之jQuery的框架图

    这张图片是对jQuery源码截图,一点一点拼出来的. 现在根据这张图片来对jQuery框架做一些说明. 一.16~9404行可以发现,最外层是一个自调用函数.当jQuery初始化时,这个自调用函数包含 ...

  7. js便签笔记(9)——解读jquery源码时记录的一些知识点

    近来一直利用业余时间在看jquery2.1.1源码,大约看了两千行了.平时看的时候,做了一些笔记,贴出来分享. 1. Array.prototype.slice.call 可以将伪数组转化为真正的数组 ...

  8. 神经网络中 BP 算法的原理与 Python 实现源码解析

    最近这段时间系统性的学习了 BP 算法后写下了这篇学习笔记,因为能力有限,若有明显错误,还请指正. 什么是梯度下降和链式求导法则 假设我们有一个函数 J(w),如下图所示. 梯度下降示意图 现在,我们 ...

  9. MapReduce中一次reduce方法的调用中key的值不断变化分析及源码解析

    摘要:mapreduce中执行reduce(KEYIN key, Iterable<VALUEIN> values, Context context),调用一次reduce方法,迭代val ...

随机推荐

  1. 【HDU - 6581】Vacation(思维)

    Vacation 题意 有n+1辆车,属性有长度l,距离终点的距离s,速度v问你最末尾的车到达终点的时间 Sample Input 1 2 2 7 1 2 1 2 1 2 2 10 7 1 6 2 1 ...

  2. python包-logging-hashlib-openpyxl模块-深浅拷贝-04

    包 包: # 包是一系列模块文件的结合体,表现形式是文件夹,该文件夹内部通常会包含一个__init__.py文件,本质上还是一个模块 包呢,就是前两篇博客中提到的,模块的四种表现形式中的第三种 # 把 ...

  3. vmware虚拟机三种网卡

    vmware虚拟机三种网卡   vmware为我们提供了三种网络工作模式,它们分别是:Bridged(桥接模式).NAT(网络地址转换模式).Host-Only(仅主机模式). 打开vmware虚拟机 ...

  4. Java后台处理框架之struts2学习总结

    Java后台处理框架之struts2学习总结 最近我在网上了解到,在实际的开发项目中struts2的使用率在不断降低,取而代之的是springMVC.可能有很多的朋友看到这里就会说,那还不如不学str ...

  5. Java面向对象16种原则

    一   类的设计原则   1 依赖倒置原则-Dependency Inversion Principle (DIP) 2 里氏替换原则-Liskov Substitution Principle (L ...

  6. java中代码的注释和快捷

    添加必要的注释,对一个有责任心.有道德模范的前端必须具备的好习惯, 可以大大提高代码的可维护性.可读性. java代码注释快捷键:ctrl+shift+/首先熟悉一下html.css.js的注释的写法 ...

  7. 关于HTML的引入CSS文件问题

    一 html代码引用外部css文件时若css文件在本文件的父目录下的其他目录下,可使用绝对路径.此时路径要写为  “ ../ ”形式,如在tomcat下建立一个test文件,在该文件中建立两个文件 夹 ...

  8. RabbitMQ搭建单机及集群

    1,基本环境配置 hosts 文件 免密登录 2,访问官网 https://www.rabbitmq.com/download.html 3, 4,安装依赖 yum -y install make g ...

  9. 入门MySQL——基础语句篇

    前言:  前面几篇文章,我们介绍了MySQL的基础概念及逻辑架构.相信你现在应该有了自己的一套MySQL环境,接下来我们就可以开始练习MySQL了.本文将从MySQL最基础的语句出发,为你展示出创建及 ...

  10. 多线程编程(Linux C)

    多线程编程可以说每个程序员的基本功,同时也是开发中的难点之一,本文以Linux C为例,讲述了线程的创建及常用的几种线程同步的方式,最后对多线程编程进行了总结与思考并给出代码示例. 一.创建线程 多线 ...