博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery源码的基础知识
阅读量:4337 次
发布时间:2019-06-07

本文共 3522 字,大约阅读时间需要 11 分钟。

序言:DOM addEventListener

attachEvent与addEventListener区别

适应的浏览器版本不同,同时在使用的过程中要注意
attachEvent方法          按钮onclick
addEventListener方法    按钮click
一、arguments对象:

1、arguments 属性

为当前执行的function对象返回一个arguments对象。 

2、function.arguments

function参数是当前执行函数的名称,可以省略。 

3、arguments.length

arguments 对象的 length 属性包含了传递给函数的参数的数目。arguments 对象所包含的单个参数,访问方法与数组中所包含的参数的访问方法相同。 

4、arguments当作数组使用

arguments虽然不是数组,但可以当作数组使用,下标由 0 开始,所以:

arguments[0]  表示接收的第一个参数

arguments[1]  表示接收的第二个参数
……

for (var i = 1; i < arguments.length; i++)

   var s = arguments[i];    

5、arguments转换数组

var args = Array.prototype.slice.call(arguments); 

二、call方法:

语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

定义:调用一个对象的一个方法,以另一个对象替换当前对象。

说明:

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。 

三、apply方法:

语法:apply([thisObj[,argArray]])

定义:应用某一对象的一个方法,用另一个对象替换当前对象。

说明:

如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。

如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。 

四、call方法和apply方法的区别

call和apply方法通常被用来实现类似继承一样的功能,以达到代码复用的功效。它们的区别主要体现在参数上。

Apply:

var v = new fn( " str " ); 

// 上一句相当于下面的代码 

var v = {}; 

fn.apply(v, [ "str" ]);

五、prototype原型

1、当我们使用javascript定义一个类的时候,系统会自动生成一个对应的原型,而使用类的prototype可以指向这个原型。 

2、定义类的时候,一般使用函数定义,而那个函数就是构造函数,构造函数可以使用constructor来指定。 

3、当构造函数和prototype定义了相同的属性或者方法的时候,构造函数的优先级要更高。 

4、原型中,不能调用构造函数的私有变量,和通过传参传进来的值。

 5、prototype中定义的变量和属性都是公有的。 

 6、任何一个类,当有多次实例化的时候,在内存中只有一个原型,而构造函数在内存中会有多个副本。 

7、在构造函数中可以调用prototype中的属性和方法。 

实例:

function fn(){};fn.prototype={    pro:'原型'}var o=new fn();alert(o.pro); 

六、匿名函数自动执行(function(){……}())

1. 什么是自执行的匿名函数?

它是指形如这样的函数: (function {// code})();

 2. 疑问

 为什么(function {// code})();可以被执行, 而function {// code}();却会报错?

 3. 分析

(1). 首先, 要清楚两者的区别:

 (function {// code})是表达式, function {// code}是函数声明.

 (2). 其次, js"预编译"的特点:

js在"预编译"阶段, 会解释函数声明, 但却会忽略表式.

 (3). 当js执行到function() {//code}();时, 由于function() {//code}在"预编译"阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错;

当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行.

另外, 函数转换为表达式的方法并不一定要靠分组操作符(),我们还可以用void操作符,~操作符,!操作符……

如: 

!function(){      alert("另类的匿名函数自执行");    }(); 

七、自定义的extend静态方法

方法一:

var fn=function(){};fn.extend = function(o, p) {        if ( !p ) {    p = o; o = this;    }        for ( var i in p )    o[ i ] = p[  i ];    alert(o[ i ]);    alert(o);    return o;}fn.extend({      method:function(){           alert("静态方法");      }});fn.method(); //静态方法

方法二:

var fn=function(){};fn.extend = function() {       var options,    target = arguments[0] || {};    if ( !options ) {        options = target; target = this;    }        for ( var i in options )    target[ i ] = options[  i ];//执行对象直接量,把options[  i ]装载到target[ i ],最后返回target新对象。    return target;}fn.extend({      method:function(){           alert("静态方法");      }});fn.method();

源码解析如下:

 

var options={            a:function(){                alert("a");            },            b:function(){                alert("b");            }        }        var target={};        for ( var i in options )        target[i]=options[i];//复制对象,重新装载                target.a(); //a

  

                                    

 

方法三:

var fn=function(){};Object.extend = function(destination, source) {  for (property in source) {     destination[property] = source[property];  }  return destination;}Object.prototype.extend = function(object) {  return Object.extend.apply(this, [this, object]);} fn.extend({      method:function(){           alert("静态方法");      }});fn.method();

 

转载于:https://www.cnblogs.com/sntetwt/archive/2013/03/16/2962413.html

你可能感兴趣的文章
小D课堂 - 零基础入门SpringBoot2.X到实战_第10节 SpringBoot整合定时任务和异步任务处理_43、SpringBoot2.x异步任务实战(核心知识)...
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_1_01课程简介
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第11节 Logback日志框架介绍和SpringBoot整合实战_45、SpringBoot2.x日志讲解和Logback配置实战...
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_1_02技术选型
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_汇总
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_2_01传统架构演进到分布式架构
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_2_02 微服务核心基础讲解
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_2_04微服务下电商项目基础模块设计...
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_3-03CAP原理、常见面试题
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_3-05 服务注册和发现Eureka Server搭建实战...
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_3-06 服务注册和发现之Eureka Client搭建商品服务实战...
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_3-07 Eureka服务注册中心配置控制台问题处理...
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_4-03 高级篇幅之Ribbon负载均衡源码分析实战...
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_4-05 微服务调用方式之feign 实战 订单调用商品服务...
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_5-02 Netflix开源组件断路器
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_5-04 feign结合hystrix断路器开发实战下...
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_5-03 feign结合hystrix断路器开发实战上...
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_6-01 微服务网关介绍和使用场景
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_5-05熔断降级服务异常报警通知
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_6-03 高级篇幅之zuul常用问题分析
查看>>